New to Kendo UI for jQuery? Start a free 30-day trial

Extent

methods

Gets or sets the map extent or visible area. The setter is chainable, i.e. returns the map instance.

extent

Parameters:extentkendo.dataviz.map.Extent

The new extent of the map.

Returns:kendo.dataviz.map.Extent

The current map extent.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }]
    });

    var map = $("#map").data("kendoMap");
    var extent = map.extent();

    console.log("North West corner: " + extent.nw.toString());
</script>

  <div id="map"></div>
  <script>
    $("#map").kendoMap({
      zoom: 4,
      layers: [{
        type: "tile",
        urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        subdomains: ["a", "b", "c"],
        attribution: "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
      }]
    });

    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);
  </script>