Google Maps API lets one use polygons to create shapes on a map.
What I wish to do is nest these polygons, and use them to describe data which can then be used for navigation.
Let’s say that the data is population density. A series of nested polygons would surround a major city, each one with a value. The most densely populated city centers would have a small polygon with a value 10 (for very dense) and the suburbs might be surrounded by a larger polygon of value 5 (moderate density) and the countryside might be inside a giant polygon of value 1 (low density).
I would want to let a user navigate by these polygon values. For example, someone looking for the closest inner city area might be in a area of value 3 and might want to get to the closest area of value 8.
Setting aside for the moment how I would get the population density data into polygons (That is a problem for another day), Is there any existing way to do this utilizing Google Maps API and its polygon feature? Is there a better way to approach this problem that I am not considering?
7
If by nesting polygones you simply mean putting one shape inside another consider this:
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
/* .-=== center ===-. */
{lat: 25.321, lng: -66.118},
/* .-=== inner box ===-. */
{lat: 25.321, lng: -69.757},
{lat: 24.321, lng: -69.757},
{lat: 24.321, lng: -70.757},
{lat: 25.321, lng: -70.757},
{lat: 25.321, lng: -69.757},
/* '-=== inner box ===-' */
{lat: 25.321, lng: -66.118},
/* '-=== center ===-' */
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
Which produces:
It could certainly look better but it shows that nesting of shapes is already possible with a polygon.
From your comment:
That is what I mean, but I don’t want one to create a “hole” in the polygon, I want to have polygons contain one another and each polygon have a value (representing some data associated with that geographical area) that can be used for directions (i. e. go to the nearest point in a polygon with value 8) – Brian C
You can just create another polygon:
var boxCoords = [
{lat: 25.321, lng: -69.757},
{lat: 24.321, lng: -69.757},
{lat: 24.321, lng: -70.757},
{lat: 25.321, lng: -70.757},
{lat: 25.321, lng: -69.757}
]
// Construct the polygon.
var bermudaBox = new google.maps.Polygon({
paths: boxCoords,
strokeColor: '#FFF000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFF000',
fillOpacity: 0.35
});
bermudaBox.setMap(map);
Combined with the previous that gives you:
2