javascript - How do I dynamically fill the heatMapData array and load a heat map layer with the Google Maps API? -
i'm having hard time getting heat map appear on site. i'm trying plot homicide , shooting data baltimore. load in data via json - can plot of points, can't heatmap show up. populating array right information? need work?
javascript:
var map; function initmap() { var infowindow = new google.maps.infowindow(); var mapdiv = document.getelementbyid('map'); var map = new google.maps.map(mapdiv, { center: {lat: 39.2888414, lng: -76.6099112}, zoom: 12 }); google.maps.event.addlistener(map, 'click', function() { infowindow.close(); }); map.data.loadgeojson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=shooting'); map.data.loadgeojson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=homicide'); var data; $.ajax({ datatype: "json", url: "https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=shooting", data: data, success: letsgo }); var latlnglist = []; var heatmapdata = []; function letsgo(mapdata){ console.log(mapdata.features.length); (i=0; < mapdata.features.length; i++){ templocation = mapdata.features[i] latlnglist.push(templocation.geometry.coordinates); //console.log(latlnglist); } console.log(latlnglist); console.log(latlnglist.length); (i=0; < latlnglist.length; i++){ var templat = latlnglist[i][0]; var templong = latlnglist[i][1]; var tempvar = new google.maps.latlng(templat, templong); heatmapdata.push(new google.maps.latlng(templat, templong)); // console.log(templat); // console.log(templong); } var pointarray = new google.maps.mvcarray(heatmapdata); console.log(pointarray); var heatmap = new google.maps.visualization.heatmaplayer({ data: pointarray }); console.log("got heatmap"); heatmap.setmap(map); } map.data.addlistener('click', function(event) { infowindow.setcontent(event.feature.getproperty('description')+"<br>"+event.feature.getproperty('crimedate')); infowindow.setposition(event.latlng); infowindow.setoptions({pixeloffset: new google.maps.size(0,-34)}); infowindow.open(map); }); google.maps.event.adddomlistener(window, 'load', initmap); } </script>
you have latitude , longitude reversed in heatmap. geojson coordinates [longitude, latitude]
:
for (i = 0; < latlnglist.length; i++) { var templat = latlnglist[i][1]; // [0] var templong = latlnglist[i][0]; // [1] var tempvar = new google.maps.latlng(templat, templong); heatmapdata.push(new google.maps.latlng(templat, templong)); }
code snippet:
var map; function initmap() { var infowindow = new google.maps.infowindow(); var mapdiv = document.getelementbyid('map'); map = new google.maps.map(mapdiv, { center: { lat: 39.2888414, lng: -76.6099112 }, zoom: 12 }); google.maps.event.addlistener(map, 'click', function() { infowindow.close(); }); var data; var latlnglist = []; var heatmapdata = []; letsgo(geojsonshooting); function letsgo(mapdata) { console.log(mapdata.features.length); (i = 0; < mapdata.features.length; i++) { templocation = mapdata.features[i] latlnglist.push(templocation.geometry.coordinates); } (i = 0; < latlnglist.length; i++) { var templat = latlnglist[i][1]; var templong = latlnglist[i][0]; var tempvar = new google.maps.latlng(templat, templong); heatmapdata.push(new google.maps.latlng(templat, templong)); } var pointarray = new google.maps.mvcarray(heatmapdata); var heatmap = new google.maps.visualization.heatmaplayer({ data: pointarray }); heatmap.setmap(map); } map.data.addlistener('click', function(event) { infowindow.setcontent(event.feature.getproperty('description') + "<br>" + event.feature.getproperty('crimedate')); infowindow.setposition(event.latlng); infowindow.setoptions({ pixeloffset: new google.maps.size(0, -34) }); infowindow.open(map); }); } google.maps.event.adddomlistener(window, 'load', initmap); // reduced size of data set fit in post var geojsonshooting = { "type": "featurecollection", "features": [{ "type": "feature", "geometry": { "type": "point", "coordinates": [-76.67129, 39.33763] }, "properties": { "crimedate": "2016-02-09t00:00:00.000", "post": "613", "location_1_address": null, "location": "3000 w cold spring la", "description": "shooting", "neighborhood": "towanda-grantley", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "northwestern", "crimetime": "1612" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.59531, 39.28513] }, "properties": { "crimedate": "2016-02-10t00:00:00.000", "post": "213", "location_1_address": null, "location": "500 s bond st", "description": "shooting", "neighborhood": "fells point", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southeastern", "crimetime": "0135" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.59531, 39.28513] }, "properties": { "crimedate": "2016-02-10t00:00:00.000", "post": "213", "location_1_address": null, "location": "500 s bond st", "description": "shooting", "neighborhood": "fells point", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southeastern", "crimetime": "0135" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.68361, 39.34287] }, "properties": { "crimedate": "2016-02-07t00:00:00.000", "post": "623", "location_1_address": null, "location": "4100 w belvedere av", "description": "shooting", "neighborhood": "woodmere", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "northwestern", "crimetime": "1845" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.70401, 39.28251] }, "properties": { "crimedate": "2016-02-01t00:00:00.000", "post": "823", "location_1_address": null, "location": "200 boswell rd", "description": "shooting", "neighborhood": "westgate", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southwestern", "crimetime": "1818" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.67611, 39.28487] }, "properties": { "crimedate": "2016-02-27t00:00:00.000", "post": "842", "location_1_address": null, "location": "100 s morley st", "description": "shooting", "neighborhood": "saint josephs", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southwestern", "crimetime": "1721" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.63785, 39.31029] }, "properties": { "crimedate": "2016-01-08t00:00:00.000", "post": "733", "location_1_address": null, "location": "1200 w north av", "description": "shooting", "neighborhood": "penn north", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "western", "crimetime": "1852" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.55906, 39.34631] }, "properties": { "crimedate": "2016-02-25t00:00:00.000", "post": "426", "location_1_address": null, "location": "3400 echodale av", "description": "shooting", "neighborhood": "waltherson", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "northeastern", "crimetime": "1227" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.67444, 39.30995] }, "properties": { "crimedate": "2013-07-13t00:00:00.000", "post": "812", "location_1_address": null, "location": "3400 walbrook av", "description": "shooting", "neighborhood": "mount holly", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southwestern", "crimetime": "2128" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.53564, 39.35372] }, "properties": { "crimedate": "2016-02-25t00:00:00.000", "post": "425", "location_1_address": null, "location": "6400 brook av", "description": "shooting", "neighborhood": "rosemont east", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "northeastern", "crimetime": "1933" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.65021, 39.28703] }, "properties": { "crimedate": "2016-02-04t00:00:00.000", "post": "842", "location_1_address": null, "location": "2100 hollins st", "description": "shooting", "neighborhood": "boyd-booth", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southwestern", "crimetime": "1224" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.59893, 39.29428] }, "properties": { "crimedate": "2014-05-17t00:00:00.000", "post": "212", "location_1_address": null, "location": "200 n eden st", "description": "shooting", "neighborhood": "dunbar-broadway", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southeastern", "crimetime": "0146" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.64921, 39.28469] }, "properties": { "crimedate": "2011-04-05t00:00:00.000", "post": "934", "location_1_address": null, "location": "200 harmison st", "description": "shooting", "neighborhood": "carrollton ridge", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southern", "crimetime": "0146" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.64921, 39.28469] }, "properties": { "crimedate": "2011-04-05t00:00:00.000", "post": "934", "location_1_address": null, "location": "200 harmison st", "description": "shooting", "neighborhood": "carrollton ridge", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southern", "crimetime": "0146" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.64921, 39.28469] }, "properties": { "crimedate": "2011-04-05t00:00:00.000", "post": "934", "location_1_address": null, "location": "200 harmison st", "description": "shooting", "neighborhood": "carrollton ridge", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southern", "crimetime": "0146" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.62384, 39.29182] }, "properties": { "crimedate": "2015-07-12t00:00:00.000", "post": "121", "location_1_address": null, "location": "200 n greene st", "description": "shooting", "neighborhood": "university of maryland", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "central", "crimetime": "0512" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.62579, 39.29688] }, "properties": { "crimedate": "2016-02-16t00:00:00.000", "post": "143", "location_1_address": null, "location": "600 n martin l king jr blvd", "description": "shooting", "neighborhood": "seton hill", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "central", "crimetime": "1817" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.59842, 39.31605] }, "properties": { "crimedate": "2016-02-19t00:00:00.000", "post": "342", "location_1_address": null, "location": "2300 aiken st", "description": "shooting", "neighborhood": "east baltimore midway", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "eastern", "crimetime": "1239" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.59842, 39.31605] }, "properties": { "crimedate": "2016-02-19t00:00:00.000", "post": "342", "location_1_address": null, "location": "2300 aiken st", "description": "shooting", "neighborhood": "east baltimore midway", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "eastern", "crimetime": "1239" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.60933, 39.34107] }, "properties": { "crimedate": "2011-04-26t00:00:00.000", "post": "524", "location_1_address": null, "location": "500 e 43rd st", "description": "shooting", "neighborhood": "wilson park", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "northern", "crimetime": "0150" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.67385, 39.28643] }, "properties": { "crimedate": "2016-02-27t00:00:00.000", "post": "842", "location_1_address": null, "location": "3400 w caton av", "description": "shooting", "neighborhood": "saint josephs", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southwestern", "crimetime": "1345" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.63108, 39.30639] }, "properties": { "crimedate": "2013-02-12t00:00:00.000", "post": "132", "location_1_address": null, "location": "1700 madison av", "description": "shooting", "neighborhood": "madison park", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "central", "crimetime": "1929" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.53242, 39.33067] }, "properties": { "crimedate": "2013-01-31t00:00:00.000", "post": "441", "location_1_address": null, "location": "5900 radecke av", "description": "shooting", "neighborhood": "cedonia", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "northeastern", "crimetime": "2136" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.67429, 39.311] }, "properties": { "crimedate": "2016-02-22t00:00:00.000", "post": "812", "location_1_address": null, "location": "3400 clifton av", "description": "shooting", "neighborhood": "mount holly", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "southwestern", "crimetime": "1305" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [-76.66198, 39.34353] }, "properties": { "crimedate": "2011-04-26t00:00:00.000", "post": "532", "location_1_address": null, "location": "4500 lanier av", "description": "shooting", "neighborhood": "parklane", "total_incidents": "1", "location_1_city": null, "location_1_state": null, "crimecode": "9s", "weapon": "firearm", "location_1_zip": null, "district": "northern", "crimetime": "2316" } }], "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:ogc:1.3:crs84" } } };
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script> <div id="map"></div>
Comments
Post a Comment