Nov 102011
 

Come creare delle aree circolari su una mappa, per esempio per mostrare dei cerchi in proporzione con la popolazione residente in una città?

A partire dalla Google Maps costruiremo un array contenente il centro del cerchio e un  valore che servirà a determinare il raggio, nel nostra esempio la popolazione, anche se i dati non sono reali.

Un elemento dell’array sarà dunque fatto in questo modo:


citymap['milano'] = {

center: new google.maps.LatLng(45.463681, 9.188171),

population: 1334077};

e così via per tutte le aree

La seconda parte è la creazione del cerchio dove all’interno di un ciclo che fa scorrere il nostro array:


for (var city in citymap) {
var populationOptions = {
strokeColor: “#FF0000″,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: “#FF0000″,
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: citymap[city].population / 50
};
cityCircle = new google.maps.Circle(populationOptions);
}

definiamo colore, opacità e via via tutti i parametri che servono.

L’esempio completo

Sorry, the comment form is closed at this time.