cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
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. 


Rate this article:
Version history
Last update:
‎03-02-2023 09:19 AM
Updated by:
Contributors