Load Markers For Visible Area

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

Example

<div id="map"></div>
<script>
function createMap() {
  var markerData = new kendo.data.DataSource({
    transport: {
      read: {
        url: "<my service URL>",
        dataType: "json"
      }
    }
  });

  function updateMarkers(e) {
    var extent = e.sender.extent();
    markerData.read({
      nw: extent.nw.toString(),
      se: extent.se.toString()
    });
  }

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

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

See Also

• Map JavaScript API Reference
• How to Disable Mousewheel Zoom
• How to Display Shape Tooltips
• How to Render Custom Symbols for Bubble Layers
• How to Set 100% Height in Mobile Applications
• How to Update Map Shapes by ID

For more runnable examples on the Kendo UI Map, browse the How To documentation folder.