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

Larry Craig March 14, 2017 18:33

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

Omer March 15, 2017 11:25

Hi Larry,

The plugin indeed doesn't seem to work on version 6.5.2.

In the meanwhile, just add the code to the widget's script as described above.

Best,

Omer

Larry Craig March 15, 2017 16:10

Omer,

Thanks for the confirmation. Hopefully the plugin will be updated to support the most recent versions of Sisense. In the interim, I will apply the script to the widget.

Best regards,

stephen kearing March 02, 2018 14:23

Is it possible to modify the above code to work with Area Maps?