Menu
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?
942
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.
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 (e.g. 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 (i.e. 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.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
