Center / Zoom Scatter Map
Introduction
The following article will explain how to center and zoom scatter map.
Purpose/Benefits
This script allows you to center and zoom a map according to a given latitude and longitude.
Example
In the Example below we want to center the map to China and set the zoom to 8.
Steps
Step 1 - Find latitude and longitude
You can find the latitude and longitude using google maps
Search for and get coordinates
Step 2 - Add widget script
/********************************************************/
/********Set and Center a Map**********/
/********************************************************/
__first_load__ = true;
widget.on("beforeviewloaded", function (widget, args){
var map = args.options.map;
window.map = map;
});
widget.on("domready", function (widget, args){
if (__first_load__){
setTimeout(function () { window.map.setView([39, 116], 8);}, 500);
}
__first_load__ = false;
});
-
Hi Claire,
Haven't tested that yet, but maybe this will solve the issue - https://support.sisense.com/entries/98577227-Auto-Zoom-Scatter-Map
Regards,
Michał
-
Please note that the original script might have trouble supporting multiple centered maps in the same dashboard.
For multi-map support, please use the following syntax instead:
widget['__first_load__'] = true;
widget.on("beforeviewloaded", function (w, args){
var map = args.options.map;
window['map_'+w.oid] = map;
});
widget.on("domready", function (w, args){
if (widget['__first_load__'] ){
setTimeout(function () { window['map_'+w.oid].setView([39, 116], 8);}, 1000);
}
widget['__first_load__'] = false;
} ); -
I have pieced together the following script which can be added into the 'edit script' for an area map.
After originally trying to achieve the 'auto-zoom' after applying filters etc it was unstable - because it was based on listening for Leaflet's 'zoomend' event, and in some scenarios it would keep zooming in and out recursively.
I settled for a center icon overlaid on the top right of the map.. once you have applied any filters or panned around and want to re-center on the current data, click the icon.
Hope it works for you too!
/*
Welcome to your Widget's Script.
To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
*/
/*
Welcome to your Widget's Script.
To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
*/
widget.on("initialized", function () {
// Initialize variable to store map references as they are created by Leaflet
if (!prism.mapsList) {
prism.mapsList = {}
}
// When map is initialized as a variable by leaflet, add it to the list using widget.oid as the key
L.Map.addInitHook(function () {
prism.mapsList[widget.oid] = this
})
})
// Center and zoom the map
widget.on("domready", function (widget) {
// Find the map reference for this widget
var thisMap = prism.mapsList[widget.oid]
var centerMapBtn = $('#centerMapBtn', element)
if (centerMapBtn.length == 0) {
var mapCenterControl = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function (map) {
// create the control container with a particular class name
var container = L.DomUtil.create('div', 'my-custom-control');
container.innerHTML = '<img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/aim-bullseye-center-goal-shoot-shooting-target-27907.png" height=40 style="margin-left:5px;" id="centerMapBtn" />'
// ... initialize other DOM elements, add listeners, etc.
return container;
}
})
thisMap.addControl(new mapCenterControl())
$('#centerMapBtn', element).click(centerMap)
}
function centerMap() {
var featureGroup = collateLayersToFeatureGroup(thisMap)
updateMap(thisMap, featureGroup.getBounds())
}
})
function collateLayersToFeatureGroup(thisMap) {
if (thisMap) {
var featGrp = L.featureGroup()
thisMap.eachLayer(function (layer) {
// features shown on the map have 'colorObj' value (could be alternative ways to filter)
if (layer.feature && layer.feature.properties && layer.feature.properties.colorObj) {
featGrp.addLayer(layer)
}
})
return featGrp
}
}
function updateMap(thisMap, bounds) {
var options = {
maxZoom: 15,
animate: true,
easeLinearity: 0.25,
duration: 0.25
}
thisMap.fitBounds(
bounds,
options
)
}
Please sign in to leave a comment.
Comments
13 comments