Heatmap.js not rendering
Question
I'm attempting to integrate heatmap.js with Google maps to do some visualization work. I referred to this:
http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html
As such, my code in my local sample looks nearly identical:
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<div id="heatmapArea" style="width:1024px;padding:0;height:768px;cursor:pointer;position:relative;"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/heatmap.js"></script>
<script type="text/javascript" src="js/heatmap-gmaps.js"></script>
<script type="text/javascript">
window.onload = function(){
// standard gmaps initialization
var myLatlng = new google.maps.LatLng(48.3333, 16.35);
// define map properties
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: true,
draggable: true,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
disableDoubleClickZoom: false
};
// we'll use the heatmapArea
var map = new google.maps.Map($("#heatmapArea")[0], myOptions);
// let's create a heatmap-overlay
// with heatmap config properties
var heatmap = new HeatmapOverlay(map, {
"radius":20,
"visible":true,
"opacity":60
});
// here is our dataset
// important: a datapoint now contains lat, lng and count property!
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}]
};
// now we can set the data
google.maps.event.addListenerOnce(map, "idle", function(){
// this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
heatmap.setDataSet(testData);
});
};
</script>
</html>
I'm getting the google map rendering in my div as I expect, but the heatmap itself isn't rendering on the lat-long data points provided by testData.
No errors in the browser console....
Someone see that I'm doing something foolish here?
1 answers
solution1
13 ACCPTED 2013-12-11 00:24:51
Update
As heatmap.js v1 has now been retired I have also included an example based on the current version, v2, here:
http://jsfiddle.net/Fresh/pz4usuLe/
This is based on the Google Maps example found on the heatmap website .
Original Answer
I looked at this and it is definitely confusing. I took your code and got it to work here:
http://jsfiddle.net/Fresh/nRQbd/
(Note that the original example above no longer works as v1 has been retired, to see this working with v2 see this http://jsfiddle.net/Fresh/pz4usuLe/ )
Note how I modified the datapoints within testData to get a result drawn on the map:
var testData = {
max: 3,
data: [{
lat: 48.3333,
lng: 16.35,
count: 100
}, {
lat: 51.465558,
lng: 0.010986,
count: 100
}, {
lat: 33.5363,
lng: -5.044,
count: 100
}]
};
I also increased the count value for each of these points; a point value of 1 is not visible, but increasing it's value (eg to 100) increases the intensity of the colour of the rendered point (thereby making it visible!).
The problem appears to occur when points are drawn outside of the visible map boundary. I deduced this by debugging:
heatmap.setDataSet(testData);
(uncomment "debugger;" in the fiddle to debug the code in the web console)
The code within heatmap-gmaps.js which is causing the datapoints to not be rendered is here:
while(dlen--){
latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
if(!currentBounds.contains(latlng)) {
continue;
}
me.latlngs.push({latlng: latlng, c: d[dlen].count});
point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
}
It appears that none of the datapoints in your example are contained within the current bounds of the rendered map area. Hence "!currentBounds.contains(latlng)" is always true, causing no points to be added to the mapdata object.
This assumption seems to be true because the first point in your dataSet (ie lat: 33.5363, lng:-117.044) is in fact in San Diego (use this to confirm http://itouchmap.com/latlong.html ), which is not visible on the rendered map.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.