Auto-Zoom Scatter Map

[intapiuser]

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.