Creating a map to display geospatial information using an OpenStreet map

The library provides APIs that you can use to display a map of a particular location on the page. In this recipe, we will create a map by using the kendoMap function, providing some configuration details. We will use OpenStreet maps to fetch images for the map.

How to do it…

To create a map, invoke the kendoMap function on the selected DOM node, providing the configuration options mentioned in the following code snippet:

 $('#chart').kendoMap({
  center: [30.2681, -97.7448],
  zoom: 4,
  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>'
    }], 
  .
  .
  
});

In the preceding code snippet, the center...