+
+ + Examples + See how easy it is to create heatmaps with heatmap.js +
+
+
+
+
+
+
+
+
+
+
+
+
+ This example shows a static heatmap overlay for OpenLayers. Please feel free to improve the layer implementation on github.
+
+
+
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+...
+<div id="heatmapArea" />
+<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
+<script type="text/javascript" src="heatmap.js"></script>
+<script type="text/javascript" src="heatmap-openlayers.js"></script>
+<script type="text/javascript">
+window.onload = function(){
+
+ // here is our data
+ // important: a datapoint now contains lat, lng and count property!
+ var data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}];
+
+ var datalen = data.length,
+ features = [];
+
+ // in order to use OpenLayers vectorial layer we have to transform our data into
+ // a features array.
+
+ var sphericalMercatorProj = new OpenLayers.Projection('EPSG:900913'),
+ geographicProj = new OpenLayers.Projection('EPSG:4326');
+ while (datalen--) {
+ var g = new OpenLayers.Geometry.Point(data[datalen].lng, data[datalen].lat);
+ g.transform(geographicProj, sphericalMercatorProj);
+ features.push(
+ new OpenLayers.Feature.Vector(g, {count: data[datalen].count})
+ );
+ }
+
+ var map = new OpenLayers.Map( 'heatmapArea');
+ var layer = new OpenLayers.Layer.OSM();
+
+ // create our vectorial layer using heatmap renderer
+ heatmap = new OpenLayers.Layer.Vector("Heatmap Layer", {
+ opacity: 0.3,
+ renderers: ['Heatmap'],
+ rendererOptions: {weight: 'count', heatmapConfig: {radius: 10}}
+ });
+ map.addLayers([layer, heatmap]);
+
+ map.zoomToMaxExtent();
+
+ // Add the features to a vectorial layer
+ heatmap.addFeatures(features);
+
+};
+</script>
+</body>
+</html>
+
+ + +
+