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

Implementation with Azure

Environment

Product Progress Kendo UI Map
Progress Kendo UI version 2021.1.330

Description

How can I implement Azure maps' geospatial capabilities with Kendo Map?

Solution

The Kendo UI Map is fully compatible with Azure's png tile API. Use the Url of the Asure service in the urlTemplate property of the Map and observe the result.

Make sure that the API version is specified in the URL. In order to use Azure maps you need to have an Azure Maps account and key.

The following example demonstrates the full implementation of the approach.

 <div id="example">

      <div id="map"></div>

      <script>
        function createMap() {
          $("#map").kendoMap({
            center: [30.268107, -97.744821],
            zoom: 3,
            layers: [{
              type: "tile",
              urlTemplate: "https://atlas.microsoft.com/map/tile/png?subscription-key=[your-key-here]&api-version=1.0&layer=basic&style=main&x=#=x#&y=#=y#&zoom=#=zoom#"
            }],
            markers: [{
              location: [30.268107, -97.744821],
              shape: "pinTarget",
              tooltip: {
                content: "Austin, TX"
              }
            }]
          });
        }

        $(document).ready(createMap);
      </script>
    </div>
In this article
Not finding the help you need? Improve this article