Google map with too much polygons crashes iOS

Question

I have a Google map with 400+ polygons, these polygons consist of 40.000+ lat/lng coordinates. These are all Dutch municipalities, the result can be seen here: http://silktool.com/maptest.php

It works fine (it is a bit slow to load at 2.5MB / 500Kb gzipped) on desktop machines, but when opening the url on an iOS device it crashed Mobile Safari (in Chrome for iOS it works).

I suspect it is because it is just simply too much code or polygons. When I load only half of the polygons, Mobile Safari does not crash.

I load every polygon with the following Javasctipt:

var city1 = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(53.0873209365,6.79015076682),
    …many many latlng coordinates… 
    new google.maps.LatLng(53.0716361297,6.81423099069),
    new google.maps.LatLng(53.0873209365,6.79015076682)
  ],
  strokeColor: "#fff",
  strokeOpacity: 0.5,
  strokeWeight: 1,
  fillColor: "rgb(60,255,160)",
  fillOpacity: 0.7
});


var city2 = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(53.0873209365,6.79015076682),
    …many many latlng coordinates… 
    new google.maps.LatLng(53.0716361297,6.81423099069),
    new google.maps.LatLng(53.0873209365,6.79015076682)
  ],
  strokeColor: "#fff",
  strokeOpacity: 0.5,
  strokeWeight: 1,
  fillColor: "rgb(60,255,160)",
  fillOpacity: 0.7
});

I want to make the code not crash on iOS and was wondering how to do that?

I've thought of several options, but I don't know if they would work:

make the code more efficient/compact
don't use Google maps, but for example Leaflet with a smoothing option to simplify the polygons on different zoom levels (http://leaflet.cloudmade.com/reference.html#polyline-options)
put the coordinates in a Javascript array (they are now in a PHP array and the javascript is generated with this).
more options?

I don't know which option to choose, any ideas?

Maybe you should try to render this layer on server side (ex. http://wikimapia.org/)? — fedosov, Jul 11 '12 at 10:09

score 0 · Accepted Answer · edited Apr 13 '17 at 12:33

0

You can also try to use google.maps.KmlLayer.

Have you considered using Google Maps API v3's new KmlLayer? Essentially what happens here is Google acts as a proxy for grabbing any publicly available KML layer, and automatically breaks it up into tiles. This tiled layer can also respond to click events very similar to how a vector layer would. (link)

Please, refer to similiar thread on https://gis.stackexchange.com/.

edited Apr 13 '17 at 12:33

Community

1
1

answered Jul 11 '12 at 10:16

fedosov

1,989
15
26

Thanks! KML layers seem the way to go. I tested this before but was under the impression that you could not style the KML shapes. However, this is possible (within the KML file). – Rutger Jul 11 '12 at 13:02
Also you can host and edit KML in Google Maps "My places" tool. – fedosov Jul 11 '12 at 13:11

Google map with too much polygons crashes iOS

1 Answers1