Heat Up Your Webmaps

Looking to create a colorful heat-map using the ArcGIS JavaScript API?

Heatmap

Using heatmap.js

A beautiful heat-map is just a layer away using the heatmap.js library. This open source library developed by Patrick Wied uses JavaScript and HTML5 Canvas to draw ridiculously good-looking and customizable heat-maps in browser. Using a custom adapter layer included in the download, it’s easy as pie to display point data as a heat-map. Heat-maps are rendered client side and do not require any browser plug-ins. HTML5 Canvas works in modern browsers and mobile devices.

Let’s get started!

First, we need to include the “heatmap.js” and “heatLayer.js” files in your HTML document. The heatmap.js file is the library, which allows us to display a heat-map from an array of data points. The heatLayer.js file is the ArcGIS adapter layer, which will allow us to work with library seamlessly.

<script type=”text/javascript” src=”src/heatmap.js”></script>
<script type=”text/javascript” src=”src/heatmap-arcgis.js”></script>

Next, we need to add a HTML element with a unique ID to our HTML document. This element will hold the Canvas element that heatmap.js creates so we can import the heat-map image into our adapter layer. We’ll use the ID when we create the heat-map layer in the next step.

<div id=”heatLayer”></div>

Now we’ll create the heat-map layer. We can specify the heat-map’s radius size, gradient, opacity and default visibility to our liking. The option “useLocalMaxiumum” determines whether to use the calculated maximum value of every data point the layer contains (false) or just the calculated maximum from the data points within the extent (true). Make sure the ID from the previous step matches the “domNodeId” property in this step.

var heatLayer = new HeatmapLayer({

config: {

“useLocalMaximum”: true,

“radius”: 40,

“gradient”: {

0.45: “rgb(000,000,255)”,

0.55: “rgb(000,255,255)”,

0.65: “rgb(000,255,000)”,

0.95: “rgb(255,255,000)”,

1.00: “rgb(255,000,000)”

}

},

“map”: map,

“domNodeId”: “heatLayer”,

“opacity”: 0.85

});

Now that the layer is created, we can add it to our map.

map.addLayer(heatLayer);

Great! The heat-map layer is set up and added to our map. However, it doesn’t contain any points to display. An array of point graphics is the format needed to add data to the heat-map layer. We’ll need to make sure our data points are formatted as shown in the examples below.

Here’s an example feature-set of 2 points.

var data = [

{

attributes: {},

geometry: {

spatialReference: {wkid: 102100},

type: "point",

x: -13625078.0408,

y: 4548494.332400002

}

},

{

attributes: {},

geometry: {

spatialReference: {wkid: 102100},

type: "point",

x: -13625128.3431,

y: 4548152.688299999

}

}

];

Data points can also have a count attribute to set the density of a point, which affects the heat-map display. If the count isn’t defined, it will be 1 and increased for any point added with the same x and y values.

var data = [

{

attributes: {

count:50

},

geometry: {

spatialReference: {wkid: 102100},

type: "point",

x: -13625078.0408,

y: 4548494.332400002

}

},

{

attributes: {

count: 25

},

geometry: {

spatialReference: {wkid: 102100},

type: "point",

x: -13625128.3431,

y: 4548152.688299999

}

}

];

Lastly, add the data to the heat-map layer.

heatLayer.setData(data);

That’s it! Once added to the layer, the data will be displayed as a heat-map.

Heatmap Example

Heatmap Example

View a demo or grab the finished code on ArcGIS Online or GitHub.

This entry was posted in Developer, Mapping, Web and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

One Comment

  1. vadivelan.gis says:

    Is this Heatmap.js is authorized by ESRI to be use in our apps ?

    any alternative from ESRI javascript api ?