Getting Started With DataViz Maps: Onions And Ogres?!

With the Q3 2013 release of Kendo UI, we introduced a new Map control in the DataViz suite. With features like map markers, zoom, touch-based input, tile-based maps and GeoJSON, this control makes it easier than ever to add maps to your app, with compatibility all the way back to IE7! But The DataViz Map control does not provide it’s own map images for tiling or other layers - this is something that you have to provide through integration with tile-based map services. Fortunately, this is as easy as typing in a URL.

The Basic Map Setup

After you’ve configured DataViz on your page, you can set up the basic map call on any <div>:

$("#map").kendoMap({
  center: [35.1107,-106.6100],
  zoom: 4,
  layers: [{
    type: "tile",
    urlTemplate: "http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
  }],
  markers: mapMarkers
});

And WHA-BAM! You’ve got a map!

Ogres And Donkey’s And Maps! OH MY!

Like other maps that you may have used before, the DataViz Maps have various layers that you can work with.

Unlike ogres and onions, though, the DataViz maps don’t smell bad or sproute little white hairs… but layers! Layers are important! Layers are what give the map it’s … mapiness? … with the images that it shows.

As demonstrated in the above map, one of the layer types that you can use is a tile layer. This is the standard type of map layer that most map services provides, and Kendo UI can integration with a lot of these map services quite easily.

OpenStreetMap, OpenCycleMap And Others

The demo above shows how easy it is to integrate with OpenStreetMap. The use of the “urlTemplate” in the layer definition is what sets up the integration. The template points to a URL where a map tile will be retrieved. The tile service should accept a zoom level, latitude (represented as ‘x’) and longitude (represented as ‘y’) and return the tiles for the request. You can see the OpenStreetMap use of this information, and there are other maps that integrate just as easily.

OpenStreetMap

{
  type: "tile",
  urlTemplate: "http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
}

Thunderforest

Thunderforest provides a lot of map data, including OpenCycleMap and others.

{
  type: "tile",
  urlTemplate: "http://tile.thunderforest.com/cycle/#= zoom #/#= x #/#= y #.png"
}

MapQuest OSM Tiles

{
  type: "title",
  urlTemplate: "http://otile1.mqcdn.com/tiles/1.0.0/sat/#= zoom #/#= x #/#= y #.jpg"
}

Note that MapQuest has several tile types availables. I’ve only show the satellite photos here.

Other Maps Integration

I’ve only shown a few maps options, here, but there are many others out there. Chances are, your favorite map service provides an API that can be used… maybe with a few exceptions, though.

Here’s a short list of additional maps that should work, no problem:

• MapBox
• Esri
• OpenWeatherMap
• Nokia Maps
• CloudMade
• Bing Maps

You may have noticed one map set missing from this list, though.

Sorry, No Integration With Google Maps

Unfortunately, there’s one map service that we wanted to integrate with but can’t: Google Maps. The terms of service in Google Maps expressly forbid the use of their map data outside of their map SDK. That means we can’t hook the tiles and map images from Google Maps in to DataViz for rendering and manipulation.

Unless Google Maps changes their licensing, we won’t be able to provide integration with them. Fortunately, as you’ve seen already, there are plenty of map systems that are available.

Beta, But Strong

The DataViz Maps are currently a “beta” product - this means that we know of some limitations, some missing features, and potentially some bugs in the code. But this is a strong beta with a ton of great features (even compared to others).

BUT WAIT! THERE’S MORE!

There are some additional features, which I haven’t talked about in this post, like GeoJSON support. This post is already getting a bit long, though. So be sure to check back soon, for another epic blog post covering all the fun things we can do with GeoJSON and the DataViz Maps API!