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