CODEWITHSUNDEEP
javascriptphpgoogle-mapsgoogle-maps-api-3
Brian Powell
Brian Powell

Reputation: 3411

Incorporating polygons into Google Maps API 3

Part of my web application will allow users to click on a certain territory of a map and have it highlight that section in the Google Maps that I have on the page. This is pretty standard on a lot of websites, but I'm having a hard time with the amount of data that's there.

I'm trying to generate data from http://global.mapit.mysociety.org/, which provides me several output options for actual coordinates that I want to turn into polygons, but exporting the WKT, GeoJSON, or the KML is HUGE - 700-900 KB for EACH instance, and I don't understand how this website is able to incorporate these polygons without loading this data, (Chrome doesn't show any item over 50 KB being loaded.)

What I'm doing NOW:

I downloaded a few of the WKT files, then used PHP to translate that into a javascript string so :

var coordinates = [
new google.maps.LatLng(1.1, 1.2),
...
new google.maps.LatLng(1.1, 1.2)
];

I did this with about 10 locations, saved my file, and it was 9 MB - all from these super long coordinates strings...

How do I do this more efficiently, as this is obviously not the way to incorporate polygon data into a dynamic map load?

Upvotes: 0

Views: 232

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Don't translate it on serverside, the string new google.maps.LatLng will blow up your file.

When you use e.g. geoJSON you may load the polygon via loadGeoJson.

The linked page uses geoJSON to draw the polygons(e.g. http://global.mapit.mysociety.org/area/686972.html loads these data: http://global.mapit.mysociety.org/area/686972.geojson?simplify_tolerance=0.0001 ~100KB)

Another option would be to encode each single polygon(polyline) on serverside and reassemble/decode the polygons via JS. See https://developers.google.com/maps/documentation/utilities/polylinealgorithm and https://developers.google.com/maps/documentation/javascript/reference#encoding for more details.

Upvotes: 1

Related Questions