Google Maps API Adds GeoJSON Support: Here is an example

In mid-March, 2014 Google announced that it added support for GeoJSON to the Google Maps API (v3). Although other mapping APIs, namely Leaflet, have supported GeoJSON data for quite some time, easy access to GeoJSON in Google Maps will simplify the coding lives of many developers who often use the Google Maps API.

In the past, we have used Jason Sanford’s very useful GeoJSON to Google Maps utility to take GeoJSON data from, say, a query to CartoDB and render it on top of Google Maps. This added some additional complication and overhead to the coding that is, thankfully, now unnecessary.

Adding GeoJSON data to Google using the new data layer in the Maps API is fairly straightforward and we show a quick example here using California’s State Plane Coordinate System Zones (sorry, not a very interesting variable!). The grid itself is meaningless, created for experimentation purposes in QGIS, but the color blocks reflect the true (approximate) boundaries of the zones. We included both the map and the full code below but you can also see it as a gist at GitHub or, more elegantly, at Mike Bostock’s, bl.ocks.org. Note that the magic happens at line 72. We also added a legend that includes a color toggle to show you that the colors are linked to an attribute in the GeoJSON.

For more information check out Google’s announcement of the new support here or Google’s developers page on GeoJSON here.

<!DOCTYPE html> <html> <head> <title>Data Layer: Styling</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #legend-container { font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } #legend-container h3 { margin-top: 0; } .legend-color-box { height:20px; width:20px; border-radius:3px; float:left; border:1px solid black; margin-right:6px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map, cachedGeoJson, colorValues = [ "red", //1 "blue", //2 "green", //3 "brown", //4 "purple", //5 "pink" //6 ], invertedColorValues = [ "pink", //1 "purple", //2 "brown", //3 "green", //4 "blue", //5 "red"//6 ], infoWindow = new google.maps.InfoWindow({ content: "" }); google.maps.event.addDomListener(window, 'load', function initialize() { //create the map map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 6, center: {lat: 37.5, lng: -119.0}, scrollwheel: false }); // Load GeoJSON. var promise = $.getJSON("california_nad83_zones_min.geojson"); //same as map.data.loadGeoJson(); promise.then(function(data){ cachedGeoJson = data; //save the geojson in case we want to update its values map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"}); }); //style fucntions var setColorStyleFn = function(feature) { return { fillColor: colorValues[feature.getProperty('value')], strokeWeight: 1 }; }, //an inverted style fn setInvertedColorStyleFn = function(feature) { return { fillColor: invertedColorValues[feature.getProperty('value')], strokeWeight: 1 }; }; // Set the stroke width, and fill color for each polygon, with default colors at first map.data.setStyle(setColorStyleFn); //get the legend container, create a legend, add a legend renderer fn var $legendContainer = $('#legend-container'), $legend = $('<div id="legend">').appendTo($legendContainer), renderLegend = function(colorValuesArray){ $legend.empty(); $.each(colorValuesArray,function(index, val){ var $div = $('<div style="height:25px;">').append($('<div class="legend-color-box">').css({ backgroundColor:val, })).append($("<span>").css("lineHeight","23px").html("Zone " + index)); $legend.append($div); }); } //make a legend for the first time renderLegend(colorValues); //make a toggle button for color values var $toggleColorsButton = $("<button>").html("Toggle Colors").click(function(){ if(map.data.getStyle() === setColorStyleFn){ map.data.setStyle(setInvertedColorStyleFn); renderLegend(invertedColorValues); } else { map.data.setStyle(setColorStyleFn); renderLegend(colorValues); } }); //add it to the legend $legendContainer.append($toggleColorsButton); //add the legend to the map map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($legendContainer[0]); //listen for click events map.data.addListener('click', function(event) { //show an infowindow on click infoWindow.setContent('<div style="line-height:1.35;overflow:hidden;white-space:nowrap;"> Feature id = '+ event.feature.getId() +"<br/>Feature Value = Zone " + event.feature.getProperty("value") + "</div>"); var anchor = new google.maps.MVCObject(); anchor.set("position",event.latLng); infoWindow.open(map,anchor); }); }); </script> </head> <body> <div id="map-canvas"></div> <div id="legend-container"><h3>Legend</h3></div> </body> </html>

Technical Tidbits From Spatial Analysis & Data Science

Google Maps API Adds GeoJSON Support: Here is an example

Leave a Reply Cancel reply

Share this:

Leave a Reply Cancel reply