Center / Zoom Scatter Map

Comments

13 comments

  • Avatar
    Michael Becker

    Hi,

    It seems to work to certain zoom level (5) and after that it won't work. Is there a way to zoom in below level 5? Thanks in advance

    0
    Comment actions Permalink
  • Avatar
    Eli

    Hi Michal,

    Script was fixed and updated. 

    Please try the new script.

    0
    Comment actions Permalink
  • Avatar
    Michael Becker

    Works very nice, thanks!

    0
    Comment actions Permalink
  • Avatar
    Ronnie

    Clarification: In the script above the input for the setView function is as follows:

    window.map.setView([LATITUDE, LONGITUDE])
    0
    Comment actions Permalink
  • Avatar
    Michael Becker

    Hi,

    is there a way to make this script work always when a filter has changed or selection was made on map, but not launch when using +/- or any other way to zoom in or out? Thanks!

    0
    Comment actions Permalink
  • Avatar
    Philip Lima

    This seems to only trigger a center and zoom when the widget is opened. Is there a way to have this happen when the dashboard is loaded?

    0
    Comment actions Permalink
  • Avatar
    Claire

    Hi,

    I would also like to to know if what Michal asked on Nov 25th '15 is possible?

    Thanks,

    Claire

    0
    Comment actions Permalink
  • Avatar
    Michael Becker

    Hi Claire,

    Haven't tested that yet, but maybe this will solve the issue - https://support.sisense.com/entries/98577227-Auto-Zoom-Scatter-Map

    Regards,

    Michał

    0
    Comment actions Permalink
  • Avatar
    Claire

    Thanks Michal! Working on it now!

    Claire

    0
    Comment actions Permalink
  • Avatar
    Adi Lewenstein (Edited )

    Please note that the original script might have trouble supporting multiple centered maps in the same dashboard.

    For multi-map support, please use the following syntax instead:


    widget['__first_load__'] = true;
    widget.on("beforeviewloaded", function (w, args){
    var map = args.options.map;
    window['map_'+w.oid] = map;
    });

    widget.on("domready", function (w, args){
    if (widget['__first_load__'] ){
    setTimeout(function () { window['map_'+w.oid].setView([39, 116], 8);}, 1000);
    }
    widget['__first_load__'] = false;
    } );
    1
    Comment actions Permalink
  • Avatar
    stephen kearing

    Any suggestions to get this code to work on an Area Map?

    Thanks.

    1
    Comment actions Permalink
  • Avatar
    Antti Wolk

    Hi,

    is that working also with the Area Map?

    If not, can this Script be modified to do that?

     

    Thank you

    1
    Comment actions Permalink
  • Avatar
    Steve Lewis

    I have pieced together the following script which can be added into the 'edit script' for an area map.

    After originally trying to achieve the 'auto-zoom' after applying filters etc it was unstable - because it was based on listening for Leaflet's 'zoomend' event, and in some scenarios it would keep zooming in and out recursively.

    I settled for a center icon overlaid on the top right of the map.. once you have applied any filters or panned around and want to re-center on the current data, click the icon.

    Hope it works for you too!


    /*
    Welcome to your Widget's Script.

    To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
    */
    /*
    Welcome to your Widget's Script.

    To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
    */
    widget.on("initialized", function () {
    // Initialize variable to store map references as they are created by Leaflet
    if (!prism.mapsList) {
    prism.mapsList = {}
    }

    // When map is initialized as a variable by leaflet, add it to the list using widget.oid as the key
    L.Map.addInitHook(function () {
    prism.mapsList[widget.oid] = this
    })
    })

    // Center and zoom the map
    widget.on("domready", function (widget) {

    // Find the map reference for this widget
    var thisMap = prism.mapsList[widget.oid]

    var centerMapBtn = $('#centerMapBtn', element)

    if (centerMapBtn.length == 0) {

    var mapCenterControl = L.Control.extend({
    options: {
    position: 'topright'
    },

    onAdd: function (map) {
    // create the control container with a particular class name
    var container = L.DomUtil.create('div', 'my-custom-control');

    container.innerHTML = '<img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/aim-bullseye-center-goal-shoot-shooting-target-27907.png" height=40 style="margin-left:5px;" id="centerMapBtn" />'

    // ... initialize other DOM elements, add listeners, etc.
    return container;
    }
    })

    thisMap.addControl(new mapCenterControl())
    $('#centerMapBtn', element).click(centerMap)
    }

    function centerMap() {
    var featureGroup = collateLayersToFeatureGroup(thisMap)
    updateMap(thisMap, featureGroup.getBounds())
    }
    })

    function collateLayersToFeatureGroup(thisMap) {

    if (thisMap) {
    var featGrp = L.featureGroup()
    thisMap.eachLayer(function (layer) {
    // features shown on the map have 'colorObj' value (could be alternative ways to filter)
    if (layer.feature && layer.feature.properties && layer.feature.properties.colorObj) {
    featGrp.addLayer(layer)
    }
    })
    return featGrp
    }
    }

    function updateMap(thisMap, bounds) {

    var options = {
    maxZoom: 15,
    animate: true,
    easeLinearity: 0.25,
    duration: 0.25
    }

    thisMap.fitBounds(
    bounds,
    options
    )
    }


    0
    Comment actions Permalink

Please sign in to leave a comment.