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>