Auto zoom Area Map widget to a specific country on load

[ILLIA]

Auto zoom Area Map widget to a specific country on load

To test this solution, you must create a dashboard based on Sample ECommerce and an Area Map widget based on a Country column. Once it is done - please go to the widget editor, click three dots select Edit Script, then paste the following script there:

As a result, we have our Area Map widget zoomed to Germany on the initial load:

const countryName = 'Germany'

widget.on('processresult', (scope, args)=>{
	

saveMapObj()

})



widget.on('domready', (scope, args)=>{
	

zoomToCountry(L.geoJson(widget.queryResult.geoJson), window.currentMap, countryName);

})



function zoomToCountry(geoData, map, countryName) {
    // Create a new empty GeoJSON object to store only the selected country's feature(s)
 	geoData.eachLayer(function (layer) {
    if (layer.feature.properties.name === countryName) {
      map.fitBounds(layer.getBounds()); // Zoom to country bounds
    }
  })
}


function saveMapObj() {
let leafletHookStatus = $$get(prism, 'autoZoomAreaMap.leaflet.initHookAdded')
if(!leafletHookStatus) {
L.Map.addInitHook(function () {
window.currentMap = this
})
$$set(prism, 'autoZoomAreaMap.leaflet.initHookAdded', true);
}
}

[ALT Text: A map of Europe with colored regions indicating specific areas. Central Europe is highlighted in teal, while other areas appear in gray. The United Kingdom is visible to the northwest. The date displayed at the top indicates June 10, 2025.]

DO NOT CHANGE!!! Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this please let us know.