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

Load Markers for Visible Map Areas

Environment

Product Progress Kendo UI Map for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I add markers for a visible area in the Kendo UI for jQuery Map?

Solution

The following example demonstrates how to filter the data for a marker layer depending on the visible area of the Kendo UI Map.

<div id="map"></div>
<script>
function createMap() {
  var markerData = new kendo.data.DataSource({
    data: [{"latlng":[30.2675,-97.7409], "name": "Zevo Toys"},
           {"latlng": [30.2707,-97.7490],"name": "Foo Bars"},
           {"latlng": [30.2705,-97.7409],"name": "Mainway Toys"},
           {"latlng": [30.2686,-97.7494], "name": "Acme Toys"}]
  });

  function updateMarkers(e) {
    var extent = e.sender.extent();
    /* Send the North West and South West locations of the currently visible map to the server in order to filter the markers which should be retrieved. */
    markerData.read({
      nw: extent.nw.toString(),
      se: extent.se.toString()
    });
  }

  $("#map").kendoMap({
    center: [30.268107, -97.744821],
    zoom: 15,
    layers: [{
      type: "tile",
      urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
      subdomains: ["a", "b", "c"],
      attribution: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>." +
      "Tiles courtesy of <a href='https://www.opencyclemap.org/'>Andy Allan</a>"
    }, {
      type: "marker",
      dataSource: markerData,
      locationField: "latlng",
      titleField: "name"
    }],
    // Request the new markers when the viewport is reset...
    reset: updateMarkers,
    // ...and after a pan operation.
    panEnd: updateMarkers
  });
}

$(document).ready(createMap);
</script>

See Also

In this article