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

Load Markers for Visible Map Areas


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


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


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>
function createMap() {
  var markerData = new{
    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. */{
      nw: extent.nw.toString(),

    center: [30.268107, -97.744821],
    zoom: 15,
    layers: [{
      type: "tile",
      urlTemplate: "https://#= subdomain zoom #/#= x #/#= y #.png",
      subdomains: ["a", "b", "c"],
      attribution: "&copy; <a href=''>OpenStreetMap contributors</a>." +
      "Tiles courtesy of <a href=''>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


See Also

In this article