Google Maps Polygons slowing down the browser

Question

I have an application which draws polygons to a Google Maps map. I use angular for the front end and a NodeJS api to serve my polygon data.

Right now I load around 300 polygons with around 10 000 latlng coords each, but I have the data paginated so I'm only rendering one tenth of the total amount of polygons. I use an angular module on top called Angular Google Maps, the project itself seems a bit dead, considering the GitHub issues page, but I don't think it really matters.

I've set the editable flag to false, but even after only displaying 30 of these complex polygons the browser seems to slow down a significant amount. This does not happen when I don't draw the polygons at all.

I've found that KML or Fusion tables get recommended a lot, but I would like to hopefully not have to transform my data because of the sheer massive amount of it.

Has anyone had a similar issue?

Answer 1

I tackled a similar issue in the past. First I want to mention that I didn't use any Google Maps JS API wrappers like Angular Google Maps or NgMaps, because I find these libraries don't wrap a lot of useful functionality of the API or do it so ineffectively.

I was using google.maps.Data layer to display polygons. I find this approach having better performance than using google.maps.Polygon. So that's my first advice you, give data layer a try instead of regular polygons. It doesn't require drastic data transformations, as the data layer has addGeoJson(geoJsonObject) method and since you have your data in form of lat and lngs it should be easy to generate a GeoJSON Feature object from it, it would look something like this:

{
"type": "Feature",
"properties": { ... },
"geometry": {
    "type": "Polygon",
    "coordinates": [ [lng1, lat1], [lng2, lat2],  .. (your data) ]
    }
}

Or use some library to generate it for you. The advantage of data layer is that is it provides a lot of features like custom styling, mouse events interaction, etc. I suggest you to take a look at my BoundariesExample example which is leveraging DataLayer available on Github or this answer on SO. (By the way, you can also add a polygon to Data Layer easily like this: map.data.add({geometry: new google.maps.Data.Polygon([coords])}) but I suggest the above approach since libraries I will mention later work with GeoJSON format)

I was though, displaying over 30K polygons on map, a lot of them were very complicated. So if you still experience slowness, I have some more optimalization advices for you:

1.Simplify polygons before displaying them on map. That is, if you don't mind removing some vertices from your polygons in exchange for better performance. You can add all your polygons into a single GeoJSON object, and then leverage mapshaper utility to simplify them using specialised algorithms (interactive example here). I am not sure if the utility can be included as library in node.js project, since I was running it as external utility from PHP, but it can simplify your polygons very fast. With 300 polygons, I suspect you will be able to do this on the fly, or of course you can cache the results. Use simplification if you can, since it has of all methods the most significant impact on performance.

2.Merge the polygons. I have found out that reducing number of polygons (collapsing them to one for example) improves performance. If your polygons doesn't have to exist as a separate entities (so if they can all be colored the same color, display the same popup on click...) you can merge them. mapshaper's dissolve command is here to help you.

3.Add multiple data layers and load only polygons (partially) visible on map. So for example on bigger zoom levels, where user cannot even see such detail as your data provide, you can simplify polygons using method 1, and when zoomed in, hide the upper level and display non-simplified polygons, and only those which fall (even partially) within your current map view. So you will calculate bounding rectangles for all your polygons, take bounding rectangle of current map view and load only those which overlap. After user moves the map, you can fetch the other. When they zoom out again, hide the lower level and display the upper level. It seems that when data layer features (feature is a polygon, line, point, or collection of those) are hidden they don't affect performance.

Of course you can apply combination of above techniques. Also you can leverage FusionLayer, but that comes with some limitations (listed in the docs), with Data layer you have more control.