Publishing heat maps using carto

This tutorial will demonstrate how to create and publish heat maps using Carto. Heat maps delineate areas or hot spots where a physical phenomena is concentrated.

You can download this sample dataset by clicking this link-   – and practice along. Our sample dataset contains a shapefile comprising settlements located on the african continent. It was extracted from OSM_world populated places.

1. Log in to Carto account online. We will upload our dataset into Carto by selecting  ‘Datasets’ on the Dashboard. In the Datasets page, we choose NEW DATASET.

1 modified

2. The ‘Connect dataset’ page opens. Select ‘Browse’ button and navigate to the local directory where you saved the sample dataset.

2 modified

3.  Click on ‘CONNECT DATASET’

3 modified

4. Once the file is uploaded, the DATA VIEW page will open showing the attribute table of the data.

4 modified

5. Click on the MAP VIEW option and observe that the features are already represented on the base map. Go to the side tab and choose the MAP LAYER WIZARD icon button. A. Scroll along the map options and select HEAT MAP. B. Adjust the radius of the point features from default 35 to 20. C. You can also adjust the resolution down to 8. Carto will automatically create a heat map as seen on the screenshot below.

5 modified

6. Next we create a simple legend to explain the map. A. Click on the LEGEND icon on the side bar and select the option to create a CUSTOM legend. B) For the demo, we insert our explanation inside the html div container. You may do the same.

6 modified

7. Next we click on VISUALIZE to create a map out of the layer. We have to create a map in order to publish the HEAT MAP. Simply follow the prompts and the MAP VIEW page will open again.

7 modified

8. On the new MAP VIEW, click on PUBLISH

8 modified

9. Select the EMBED option. Copy the embed code to the clipboard.

9 modified

10. To embed the heat map in a web page, create your HTML wrapper in notepad and insert the copied code into the body.

10 modified

11. Save as html file and open with a modern browser.

11 modified

See live map at https://mapsnigeriainitiative.comxa.com/Maps

Thank you for following. Your comments are welcome.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s