Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I tried to follow the example on the heatmap.js but for some reason it is not displaying the heat map layer, and the layer control is not working. Maybe I am missing something stupid. Can someone point me out what goes wrong?

$(function() {
 var testData={
max: 46,
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 transformedTestData = { max: testData.max , data: [] },
data = testData.data,
datalen = data.length,
nudata = [];

// in order to use the OpenLayers Heatmap Layer we have to transform our data into
// { max: , data: [{lonlat: , count: },...]}
while(datalen--){
nudata.push({
lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
count: data[datalen].count
});
}
transformedTestData.data = nudata;
var map = new OpenLayers.Map('map_canvas',
                {
                    allOverlays: true,
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:900913"),
                    units: "m",
                    maxResolution: 156543.0339,
                    maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher(),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.MousePosition()
                    ]
                });
 var layer = new OpenLayers.Layer.OSM();
// create our heatmap layer
var heatmap = new OpenLayers.Layer.Heatmap("Heatmap Layer", map, testData,
                {visible: true, radius: 15}, 
                {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
//map.addLayer(layer);
map.addLayers([layer,heatmap]);

map.zoomToMaxExtent();
heatmap.setDataSet(transformedTestData);
// Handler for .ready() called.
});

heatmap example

share|improve this question
1  
Did you try using Firebug? –  steko Mar 18 '13 at 23:08
    
Yes, but it doesn't return any bugs. –  Seen Mar 19 '13 at 0:18

1 Answer 1

up vote 1 down vote accepted

Well I see two issues. The first issue is that in the while statement you are using "lon" instead of "lng" like you defined in your data.

{lat: 33.5363, lng:-117.044, count: 1}

Here is the typo:

new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat)

So longitude is NaN when you try to load it, discovered this debuggin with firebug. The second issue is when you are defining your heatmap layer you use "testData" after "map" which according to the documentation should be "layer".

new OpenLayers.Layer.Heatmap("Heatmap Layer", map, testData,

Documentation:

new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer,   

Finally, I replaced your data with the example data from the website and everyone worked as expected. So my only conclusion is that something is wrong with the data you are using.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.