O'Reilly logo

Kendo UI Cookbook by Sagar Ganatra

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required