Edit this page

Map Authoring

This article illustrates the process of creating a map from scratch and by using freely available datasets. The goal of this tutorial is a map of the Australian states and mainland territories.

Figure 1: The expected outlook of a finished map

Finished map

Steps

Find Data

The first step is to locate a map dataset that matches your requirements. The U.S. Census Bureau and Ordnance Survey are popular official sources for map data.

The data used in this article is from the Natural Earth project. Natural Earth datasets are in the public domain. The project is supported by NACIS. It offers different data themes in three levels of detail - 1:10m, 1:50m and 1:110m.

For the purpose of this project, the Admin 1 – States, provinces data set is going to be used. A scale of 1:50 000 000 provides good detail/size balance on a country level. The dataset is available for download in Esri Shapefile format.

For more information, refer to the web site on global administrative areas.

Explore Data

A traditional desktop geographic information system (GIS) application can be invaluable for exploring new datasets. The open-source QGIS project is an excellent choice in this regard.

Start by importing the Esri Shapefile for the data set. With the help of the Identify tool you can quickly inspect the available metadata.

Figure 2: Identifying of the results

Identify results

You are also able to narrow down your interest to features with the "AU" ISO 3166-1 alpha-2 country code.

Process Data

You need to extract the data for the target region and convert it to GeoJSON format to make it usable for the Kendo UI Map widget.

When it comes to converting between different vector formats the first project that comes to mind is the OGR Library and utilities, part of the Geospatial Data Abstraction Library. The ogr2ogr command-line tool is also included in it.

Important

Mapshaper is also a great tool that allows you to do many edits directly in the browser. Make sure you check it out.

The example below demonstrates the command that converts the dataset to GeoJSON and filters it out.

Example
ogr2ogr -f GeoJSON -where "iso_a2 = 'AU'" au-states.json ne_50m_admin_1_states_provinces_lakes.shp

Your dataset is now ready and you can display it.

Load Data

Set up a simple Kendo UI Map and add a single shape layer to it, as demonstrated in the example below. Its GeoJSON data source will point to your processed dataset.

Important

Make sure the GeoJSON files are properly encoded, preferably in UTF-8.

Example
<div id="map" style="width: 600px; height: 600px;"></div>
<script>
$("#map").kendoMap({
    center: [-28.0000, 136.2500],
    zoom: 4,
    layers: [{
        type: "shape",
        dataSource: {
            type: "geojson",
            transport: {
                read: "./au-states.json"
            }
        }
    }]
});
</script>

Unstyled map

Add Styles

The example below demonstrates how to define a palette and apply it based on province.

Example
<div id="map" style="width: 600px; height: 600px;"></div>
<script>
var colors = ["#E96D63", "#7FCA9F", "#F4BA70", "#85C1F5", "#4A789C", "#13A1CB", "#728CB0", "#C296B6"];

$("#map").kendoMap({
    center: [-28.0000, 136.2500],
    zoom: 4,
    layers: [{
        type: "shape",
        dataSource: {
            type: "geojson",
            transport: {
                read: "./au-states.json"
            }
        }
    }],
    shapeCreated: function(e) {
        var provNum = e.shape.dataItem.properties["provnum_ne"];
        if (provNum) {
            e.shape.fill(colors[provNum % colors.length]);
        }
    }
});
</script>

The provnum_ne field goes from 1 to 9 denoting each mainland state and territory. This project uses the shapeCreated event to set the fill color of the newly created shape.

See Also

Other articles on the Kendo UI Map:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy