Tutorial #41
Display GeoJSON in a Google Map Intermediate   2014-01-16

Introduction

In Tutorial #28: Shapefiles, GeoJSON and KML I covered three of the most popular ways to represent geographic features and in Tutorial #40: Display KML in a Google Map I showed how to load KML into Google Maps.

Google Maps does not currently (January 2014) support the direct loading of GeoJSON datasets but this is easily achieved with the help of a third party JavaScript library called GeoJSON.js from Jason Sanford.

This tutorial shows how to load a GeoJSON file into Google Maps, overlaying its features on Google's Base Map. The file is the GeoJSON equivalent of the one used in Tutorial #40. It includes a Polygon, which represents the Fremont neighborhood in Seattle, and a Point (Marker), which marks the location of a local landmark.

Demo 1 screenshot for this tutorial


GeoJSON File Format

GeoJSON uses JSON (JavaScript Object Notation) to represent its data, in the same way that KML uses XML.

A big difference between the two is that GeoJSON does not carry Style information with it. So When we display data from this source we need to apply our own styles. This can give us more control over the look of our maps, but it does involve a bit more work (not much).

Below is an edited portion of the GeoJSON file used in the demo.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.3473413, 47.651119 ]
      },
      "properties": {
        "name": "Fremont Troll",
        "description": "The Fremont Troll is a large concrete sculpture of the mythical troll ..."
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [ -122.35509749113, 47.662137946078 ],
            [ -122.35457554776, 47.662130986833 ],
            [...]
          ]
        ]
      },
      "properties": {
        "name": "Fremont"
      }
    }
  ]
}

As you would expect from JSON, this looks like a JavaScript Object Literal. At the top level we have a FeatureCollection which has an array of features (2 in this example).

Each element in this array has a type (feature), a geometry and properties, such as a name and description.

A geometry also has a type, which in this example is Point or Polygon, and coordinates. In GeoJSON a coordinate is a two element array of latitude and longitude. As far as I know there is no way to represent altitude.

As with XML, you should check that your GeoJSON is valid before trying to load it into Google Maps. Your really can save a lot of head scratching if you do this.

A really useful site to validate GeoJSON, as well as create your own files, is geojson.io from Mapbox.

Go to geojson.io, click the Folder icon then the Import link. Here is what the demo file looks like:

Image 1 for this tutorial


Understanding the Code

The example code starts out similar to Tutorial #40. We define a div with id map_canvas, style it with CSS and load the Google Maps API JavaScript file with our API key.

We need to load GeoJSON.js, which we need to download from Github.

In our custom script, we define the Latitude and Longitude where we want to center the map and the URL where we can find the GeoJSON file.

The GeoJSON file should be hosted on the same server as this script. If not then you will need to use JSONP to fetch it with AJax. See the Google Tutorial for more information.

As GeoJSON files carry no style information, we need to supply that. The style format is that used in Google Maps.

The initialize function sets up the base Google Map object and then we fetch the GeoJSON file with a XMLHttpRequest (ajax) call. As this is asynchronous we need to process its result within a callback function that we define (loadGeoJSON).

We pass in the JSON Text that we get from the XMLHttpRequest call and convert this into a JavaScript Object with JSON.parse.

Next we create a new GeoJSON object using that result and our Google Maps style information. This holds our features.

I think it was a mistake to call this library GeoJSON as it only deals with GeoJSON to Google Maps conversion...

features is an array of Google Maps objects and so now we can simply loop through the array and link each of them to the map using setMap(map).

Finally, we bind an event listener which calls initialize when the page loads.




One big difference between the GeoJSON and KML demos is that the Marker in this example is not active, whereas with KML we were able to view a popup window containing rendered HTML. There may be a way to do this with GeoJSON but I don't know it. For certain applications this could be a limitation.

Also note that Google Maps does not apply the automatic zoom and centering that we saw with KML, and the marker icon is slightly different (but you can probably change this).

Your choice between GeoJSON and KML will depend on the format(s) in which your source dataset is available, what level of styling and interaction you want and how much work you want to invest in converting formats. Hopefully this and Tutorial 40 will give you a good idea of the trade offs involved in both approaches.


More Information

GeoJSON Wikipedia Entry

geojson.io

GeoJSON to Google Maps (GeoJSON.js)

Google tutorial on loading GeoJSON


Code for this Tutorial


Share this tutorial


Related Tutorials

15 : Display a Google Map using JavaScript   (Intermediate)

28 : Shapefiles, GeoJSON and KML   (Background)

40 : Display KML in a Google Map   (Intermediate)


Comment on this Tutorial


comments powered by Disqus