Center and zoom after loading

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    1 posts
    Member since:
    Nov 2011

    Posted 22 Feb 2018 Link to this post

    Trying to accomplish a simple task, after loading I want to set the map extent based on the marker layer.

    I have the code to create the extent and set it but timing is the issue. When I try to do this on document ready the layer item list is empty and there is no explicit "load" event I can attach a handler to. Firing on "reset" will cause infinite recursion since the function is itself changing the viewport of the map plus it seems to fire multiple times.

    Basically, I just need to know when this should be called and how to wire a handler to do it at that time.

    var map = $('#map').getKendoMap();
    var layer = map.layers[1];
    var markers = layer.items;
    var extent;
     
    for (var i = 0; i < markers.length; i++) {
      var loc = markers[i].location();
      if (!extent) {
        extent = new kendo.dataviz.map.Extent(loc, loc);
      } else {
        extent.include(loc);
      }
    }
     
    map.extent(extent);

    .

     

  2. Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 26 Feb 2018 Link to this post

    Hello Patrick,

    You are correct, for the time being, there is no event that could be handled when the map is fully rendered and ready.

    What I could suggest is adding an "if" in the reset event handler to use the extent method. For example:

    reset: function(e) {
        console.log("reset")
        if (firstReset) {
            firstReset = false;
            setTimeout(function(e) {
                var aus = new kendo.dataviz.map.Extent(
                    [-10.683333, 113.155], // North West location
                    [-39.138889, 153.638889] // South East location
                );
     
                $("#map").getKendoMap().extent(aus);
            }, 1)
        }
    }

    For a runnable example, check my testing Dojo:
    I hope this helps.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top