Google Maps and GeoJSON

Complex multi-polygons are complex, but GeoJSON makes it simple to display with Google Maps.

No doubt if you’ve had to do anything with displaying area data on a map, whether its demographic data, delivery areas, territory coverage area, council zoning information (the list goes on) there is always the exceptions in the data. A street that is in some way special, a park that’s excluded, a house that’s heritage listed, a coverage area that’s added outside the original zone. As it turns out, postal code data in the Netherlands is one such dataset that has it’s fair share of exceptions, like the image above.

So how might you approach drawing this. So lets say you’ve got a single simple territory that can be represented with a single polygon.

(don’t copy/paste this code, it won’t work – it’s illustrative)

    // retrieve the polygon as an array of lat/log points, e.g.
    //   [ 
    //     {lat: 25.774, lng: -80.190},
    //     { ... etc ... },
    //     {lat: 15.466, lng: -66.118}
    //   ]
    var simpleTerritory = dataService.getSimpleTerritory();

    // Add the polygon to the map.
    var territory = new google.maps.Polygon({
      paths: simpleTerritory,
      map: definedEarlier
    });

Great, I now have a single contiguous line encompassing my territory, zone etc. Simple. Ok, let’s add a couple of exclusions.

(remember it’s illustrative, I’m not suggesting you multi-round trip for the territory and its exclusion)

    // retrieve polygons as lat/long point arrays, remembering that the points 
    // in the exclusions must be wound in the opposite order to the enclosing polygon
    var territory = dataService.getSimpleTerritory();
    var exclusion1 = dataService.getSimpleTerritoryExclusion(1);
    var exclusion2 = dataService.getSimpleTerritoryExclusion(2);

    // Add the polygon to the map.
    var territory = new google.maps.Polygon({
      paths: [territory, exclusion1, exclusion2],
      map: definedEarlier
    });

Easy enough. From here you could go on adding exclusions as point arrays to your polygon’s paths property as each subsequent point array is considered another exclusion from the original polygon. In practice, rendered results depend very much on the data provided. Experiment for yourself if you’re curious. Then if you have more territories and exclusions for an aggregate territory you would have to add additional polygons. And so it grows.

Now you have a lot of point arrays representing your territories and a whole not more point arrays representing the exclusions from those territories. Presumably you’ve had to do some level of manipulation to get to an array of lat/long points that represents your territory and similarly for your exclusions and depending on your data’s journey from where it lives to being rendered on Google Maps, this approach may indeed be the most simple.

However, if you’re keeping your data in an SQL Server and using the support for geometry/geography data types then you’re in luck. There are a couple of articles here and here that give you a pretty easy walk through on how to have SQL Server produce GeoJSON for you. You then wire up your data service to return a single GeoJSON string instead of an array of array of lat/long points.

    // retrieve your complete territory, inclusions, exclusions and all as GeoJSON
    var geoJsonTerritory = dataService.getGeoJson();

    // Add the GeoJSON to the map.
    map.data.loadGeoJson(geoJsonTerritory);

And you’re done. This of course glosses over a lot of the detail needed to get started with Google Maps in the first place (which can be found here), but it does show that rendering a single GeoJSON object and simpler than construction multiple polygons with exclusions from point array data. What I would not like to undersell is the potential complexity of creating GeoJSON if you already have point array data.

Coming back to the Netherlands and it’s postcodes. They were designed for defining precise delivery points, so when they’re aggregated into a service territory you get some interesting results. Take the example below which is in The Hague. From this level, its not obvious that this isn’t a single contiguous area.

A complex multi-polygon.

Let’s zoom in. At this zoom level, it becomes obvious that the areas are non-contiguous and that there are multiple polygons making up this territory.

Looking at another area (below), you can see that with a single call the the Google Maps JavaScript API we have rendered a complex multi-polygon with numerous exclusions, numerous additions and an inclusion within an exclusion.

I don’t know what’s on the island in that park, but it sure looks important from here.

Categories

Recent Posts

Tags

Kurt Written by: