Heat maps: how to highlight your statistics on a map?

Tips - December 22, 2015

Heat maps make it possible to present statistics on a map using color coding. Higher values can be represented by more vivid or darker colors, based on your preferences.

Does your mapping project that involves coloring regions, states or countries? This tutorial will help you create such a map.

With the recent COP21 international meeting in mind, we’ve built the following map. It represents the extent of water leaks inventoried in 150 french cities. Districts with higher water leaks appear darker on this map, based on the leak volume in cubic meters. Each marker represents a city and can be clicked to display some information (leak rates, number of water leaks…). Blue markers correspond to towns that have a water leak rate above 25% while the national goal, set in 2010 with the Grenelle II law, aims at limiting water leaks to 15 % of the produced water.

Click here to enlarge the map.


Three steps are necessary to create such a map.

1/ Creation of the geographical borders

1. Importing KML files

The current version of Click2Map allows you to create drawings manually.

In the Drawings menu, you will find lines and polylines called polygons. Polygons will allow you to create the borders of regions or states. To do that, you simply need to click on the map at the exact spot where you need to start your drawing and repeat this operation until it is complete. To end your polygone, click on the drawing's first point.

However, manually creating all all areas one by one is boring. That’s why predefined KML files are made available on websites such as census.gov.

You can download an existing KML file and import them in the Click2Map editor using the New > Import command from the menu.

2. Personalization of your drawings

Once your files are imported, the borders will be displayed on your map. It will be possible to modify the colors as you please according to the data you need to highlight on your map.

Thanks to the HTML editor, you can add a description to your drawings like a data’s table or an image or any representation needed into your map.

3. Creation of a legend

A sidebar displaying your markers and drawings can be placed at the right or the left of your map. You can set up its size or even hide it completely.

To create the legend of our map, we used the software Gimp 2. It’s also possible to create a legend in Microsoft Word (a post with a quick tutorial will come).

3. Integrating your map on your website

Last step! Embed your map into your website.

Use the Publish menu > A widget Online on Click2map's servers command and embed the HTML code, provided by the editor, into any webpage of your website.

The editor allows you to personalize the widget before publishing it (Read all about the different personalization parameters in this post.

Why wait?

Start mapping now!