Auto-Zoom Scatter Map
Download: Plugin Scatter Map Auto Zoom
Introduction
The following article will explain how to dynamically center and zoom a scatter map, based on the data points. So if your map defaults to a view of the US and then changes to Europe, the map will automatically adjust.
Default View
After Changing the Filter
Purpose/Benefits
This script allows you to center and zoom a map according to a given the visible data points.
Copy and paste the below script into the Widget
Create a Scatter Map widget, then go back to the widget editor. Click on the Edit Script menu item, and save the following code to the widget
// Save the map object as it's loaded
widget.on("beforeviewloaded", function (widget, args){
// Set a max zoom size
var maxZoomLevel = 10;
// Save the map object
var map = args.options.map;
// Save the markers array
var markers = [];
$.each(args.options.markersArray, function(){
// Save to the list
markers.push(L.marker([this._latlng.lat, this._latlng.lng]));
});
// Create a feature group from the markers
var featureGroup = L.featureGroup(markers);
// Get the outer bounds of that feature group
var rawBounds = featureGroup.getBounds();
var bounds = [
[rawBounds._southWest.lat, rawBounds._southWest.lng], [rawBounds._northEast.lat, rawBounds._northEast.lng]
]
// Create the container if it doesn't exist
if (!prism.autoZoomScattermap) {
prism.autoZoomScattermap = {};
}
//Save objects to the widget
prism.autoZoomScattermap[widget.oid] = {
map: map,
bounds: bounds,
wasUpdated: true,
maxLevel: maxZoomLevel
};
});
// Center and zoom the map
widget.on("domready", function (widget, args){
// Function to update the map
var updateMap = function(map, bounds, maxLevel){
// Apply the calculated bounds to the map
map.fitBounds(
bounds,
{
maxZoom: maxLevel
}
);
};
// Find the details for this widget
var thisMap = prism.autoZoomScattermap[widget.oid];
if (thisMap && thisMap.wasUpdated) {
// Wait 0.5 seconds before running
setTimeout(updateMap, 500, thisMap.map, thisMap.bounds, thisMap.maxLevel);
// Reset the first load flag
thisMap.wasUpdated = false;
}
});
Notes
- You can adjust the maxZoomLevel variable to set how far the scatter map is allowed to zoom in
- Sisense's scatter map is based off Leaflet, so any references to L are to the Leaflet library
- UPDATED to include a plugin version, just unzip the plugin attachment into your C:\Program Files\Sisense\PrismWeb\plugins folder and refresh your web browser. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder.
- UPDATED June 6, 2017 - Fixed for Sisense version 6.6.1
-
Takashi,
I've installed the plugin version, and it doesn't appear to be working with Sisense Version 6.5.2.11007. The posted script functions properly when attached to the widget. I've restarted IIS, and the plugin still doesn't work, or show in the options menu for the widget.
Could you please check compatibility, or offer some hints as to what might be wrong?
Thanks,
Larry
-
Hi All,
Glad to announce we've developed a few advanced maps based off of Deck.gl for visualisations of large data sets,
With these maps you can tailor suit your specifications onto any available layer, as well as combine a few layers to further enhance your mapping requirements:
More to come soon!
Feel free to reach out for a live demo,
Sisense Partner of the Year 2019!
Please sign in to leave a comment.
Comments
5 comments