How To Draw A Polygon In Google Earth Using Coordinates

January 27, 2013

Using Google Earth Borders as Google Maps Polygons

Today we are going to embrace how to extract the polygonal information from Google Earth's land borders and encode the information into a JavaScript array that we can use in Google maps. With the combination of both polygon borders and Google style magician you can get some stunning map results.

[View Working Example Here]

To brainstorm, download and install Google earth here. Once you have installed Google earth, open Google earth:

ss-1

Now download these ii land borders KMZ files as yous desire:

» Low poly borders
» High poly borders

Once y'all have downloaded both files, double click each one to list the borders in Google earth. In one case you run into the optional overlays for low and high polygon borders in Google Earth, we tin begin.

ss-3

Lets selection a single state; for our example sakes, I will cull Federal republic of germany but yous may choose whatever country you wish at this indicate. As well, I'one thousand choosing to use the low details polygon borders over high particular edge; depending on your fidelity of detail need, you may choose to utilise the higher detail over the lower detail polygon borders.

ss-4

Once yous take picked a country, simply right click on information technology, and choose re-create.

ss-5

This will re-create the KMZ lat/lng data numbers for each point that makes up a polygon. Now open up up a mod word processor (for sakes of speed, I will choose MS Give-and-take) and paste your copied data.

In one case hither, apply the find and replace characteristic to search for all instances of this:

,0

and replace it with:

^p

(Please note there is a space after the 0 and information technology is important!!!) Now click replace all.

ss-6

This will separate all your coordinates past pairs into new lines allowing u.s. to copy them in a format we can employ to compress the data. And so, in one case done replacing all instances, select everything and copy your results out of MS Give-and-take and into something more readable like notepad, or your favourite IDE.

Now, nosotros are going to go through each XML grouping chosen <Polygon> and selecting their <coordinates>, like then (do the following ane at a time for each polygon grouping):

ss-7

we are going to point our browser to a lovely online resources that will accept our lng/lat data, and compress this selected data into a special algorithm to lower our polygon cache size.

Become here: https://developers.google.com/maps/documentation/utilities/polylineutility

In the textarea at the top of the page titled "Input text", paste our copied coordinates, then change the Lat/lng order to lng/lat, and finally press "Show Map" to ostend our polygon shape is rendering correctly. Once you have confirmed you meet your polygon shape rendering correctly, click "Evidence Code" to open up a window that will expose our encoded and compressed coordinates. From hither, copy the string value in the "points" backdrop, like so:

ss-8

Now that nosotros have our compressed polygon data, we need to build a JavaScript object array that we tin can store the data in and ultimately and describe the polygons on Google Maps for our visitors. Here is how I purpose you construct such an array, but y'all may change it how always you like, just as long as the polygon data is attainable and support multiply polygons per land you will be fine:

ss-9

Great, as you can see we accept three objects in our "country_polys" object in the above array, and each object contains an encoded polygon group we encoded from the steps above.

Hither is our Object array with a second country added:

ss-10

Once more, this second country merely has two "poly" objects considering when nosotros copied its KMZ data from Google earth, it only had 2 XML polygon groups that we had to encode.

Swell, now we need to actually render the polygons into a Google Maps example on a page, so save this Object array as country-borders.js on your spider web server for later apply and open a new document.

Here is a bones certificate I've prepare-up already that includes the nuts for setting upwardly a Google Maps; the install portion of Google Maps is out side of the scope of this tutorial so I suggest you read more than nigh this on the Google Maps Developer Documentation. I volition point out all the same, that when working with polygons and Google maps, you must extend your api to include geometry functionality so we must include "libraries=geometry" to our Google Maps JavaScript API source url.

<div id="map"></div> 	 <script src="//maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script> <script src="state-borders.js"></script> <script> 	var mapOptions = { 		zoom: 8, 		center: new google.maps.LatLng(-34.397, 150.644), 		mapTypeId: google.maps.MapTypeId.ROADMAP 	} 	var map = new google.maps.Map(document.getElementById("map"), mapOptions);    </script>

Great, notice in our document nosotros accept already included the country-border.js we just saved out in our last step? We need to include this JavaScript Object array before any attempts to utilize it, so the browser has time to enshroud and reference to it when we need it. If you save this html source out now, and bespeak your browser it it, you lot should see a Google maps case, but no polygon existence rendered yet. We must now parse our state-borders.js Object array and plot each polygon coordinate on our map case earlier the polygon volition showup.

Here is what we will use to parse our encoded borders:

var bounds = new google.maps.LatLngBounds(); var countries = country_borders; var i = countries.length; var p = { paths: '0', fillColor: '#54cafe', strokeColor: '#b5e8ff', strokeWeight: 1, fillOpacity: 1};  while(i--){     var country = countries[i];     var polygon = country.country_poly;     var v = polygon.length;      while(five--){         p.paths = google.maps.geometry.encoding.decodePath(polygon[v].poly);          var shape = new google.maps.Polygon(p);         shape.setMap(map); //set it          //capture bounds         var m = p.paths.length;         while(m--){ premises.extend(p.paths[m]); }     } } map.fitBounds(premises);

Ok, there is a lot to cover here, so I will practise my best to break it down as needed.

First, nosotros gear up-up a premises variable and equal it to a Google LatLngBounds() office that we will use to auto zoom, and pan our map around the drawn polygons once we are finished. Side by side we want to gather all our country borders, then nosotros set-up another variable called "countries" and equal it to our globally available Object assortment from our country-borders.js "country_borders". Next we gear up-up a third variable called "i" and we equal it to the length of institute objects in our "countries" variable. Finally we prepare-upward a variable chosen "p" that will be used to contain our path, and polygon styles.

Now that we have gathered the necessaries in values to plot our polygons, we demand to loop over our data. We use the while loop and the fastest proven method of looping, by looping in reverse (v–). One time we are in our loop, nosotros must further drill downward into each polygon, of each countrym and plot each vertex points that we encoded before. So we create a new variable called "country" (singular, cause we are a unmarried state scope now) and equal it to "countries[i]" or rather, the current country in the looping procedure. Next nosotros volition create another variable called "polygon" and equal it to our current land's institute polygon objects; and finally we make a third variable and equal information technology to the found polygons length for our current county.

If you are starting to see the looping pattern of first country, so polygons, then you tin can empathize why we need a second while loop to loop over all the establish polygon instances of a unmarried land. Once again we volition make employ of the while loop, and do so in reverse looping guild for functioning sakes. At present that we accept reached the "single polygon" telescopic of our looping (the second while loop), we demand to now decode our encoded polygon coordinates. Google provides a function called decodePath that does this for u.s., so we set up the value of "p.path" to equal a passed param value to decodePath of "polygon[v].poly", or rather our currently looped polygon.

Once we have collected the current polygon in it's decoded format, nosotros must apply it to the map. We do so past creating a new variable called "shape" and equal it to a Google maps "Polygon()" overlay type, with our "p" variable as a passed parameter that besides now contains our decoded coordinates. Once we have nerveless all the custom options, and coordinates of our currently looped polygon into a Polygon overlay declaration, nosotros need to demark information technology to map. Using our new "shape" variable and the Google map'south "setMap(map)" role (note "map" param was divers when setting up the Google maps) our finally compiled polygon will exist plotted on the map and rendered.

Lastly equally promised is the auto fit/bounds. The final step is to take the paths of our current polygon, and apply them to our bounds functionality through an "extend" method in social club to execute a map.fitBounds(bounds) in one case all our looping is completed. This will auto eye the map around the drawn polygons by both zoom level and pan.

[View Working Example Hither]

That'due south it anybody, you have at present successfully converted Google Earth KMZ data over to JavaScript in a very neat and compressed way that tin can be decoded and rendered in a Google Maps.

Thanks, and Enjoy!