Cartina Italia interattiva

[Mitttico]

Salve a tutti!!

Sto facendo un progetto per la scuola e mi son scontrato con un problema. Devo presentare nel mio sito una specie di cartina dell'italia che, in base all'orario in cui l'utente sta visitando la pagina e ad un algoritmo particolare, ogni regione assuma un colore.

Esempio stupido per far capire: alle 3 di pomeriggio in sicilia ci saranno 30° ,quindi sarà colorata di rosso intenso; mentre in trentino ci saranno 15° quindi un colore piu' chiaro.

Qualcuno sa darmi qualche dritta su come potr fare questa cosa? Oppure sapete dove posso trovare del materiale?

Grazie mille a tutti!!!

[filippo.toso]

Puoi utilizzare un GIS oppure una immagine dinamica (es. se conosci le coordinate dei bordi delle regioni) oppure provare con Google Maps.

[gianiaz]

Se vuoi prendere spunto:

http://lab.gianiaz.com/jquery/jmap/

[Mitttico]

Originariamente inviato da gianiaz
Se vuoi prendere spunto:

http://lab.gianiaz.com/jquery/jmap/

La cartina che mi hai dato tu non è male,si potrebbe cominciare con quella..pero' ci vorrebbe ben piu' grande è possibile? Ma è tutto in javascript? Perchè nn e ne intendo tantissimo,ne so piu' di php. Cambia molto?

[filippo.toso]

Originariamente inviato da gianiaz
Se vuoi prendere spunto:

http://lab.gianiaz.com/jquery/jmap/

Le coordinate delle mappe le hai create a mano oppure hai un archivio di qualche tipo da cui le hai estratte?

Mi piacerebbe riuscire a trovare sia quelle delle regioni che delle province e comuni (e magari anche dei CAP).

[gianiaz]

allora, sono partito da un file svg.

Le coordinate di un file svg sono le stesse delle mappe html, quindi se si ha il sorgente svg si possono estrapolare facilmente.

Qui c'è l'svg:

http://lab.gianiaz.com/Italia.svg

L'effetto è fatto in javascript, perchè in pratica tramite canvas e vml disegna un'area usando le coordinate della map html e la sovrappone alla regione.

Se ti interessa l'argomento, esiste un plugin di jquery chiamato appunto jmaps che facilita di molto la cosa.

ciao

[Mexcalero]

Ciao Gianiaz, aggiorno qst post x kiederti se puoi spiegarmi il procedimento utilizzato x creare la cartina dell'italia, è esattamente qll ke stavo cercando io ! Solo ke dovrei creare anke qll dell'europa, dei singoli stati e delle relative regioni. Per qst ragione vorrei capire esattamente come procedere ed ottenere mappe omogenee nell'aspetto. Per la parte grafica come hai fatto? Hai ricalcato un immagine? Grazie x l'aiuto .

[gianiaz]

Ciao Mexcalero, come dicevo nei post precedenti, il punto di partenza è un file.svg.

I file svg non sono altro che file vettoriali descritti tramite il formato xml.

Nella scala 1:1 partendo da un file originale i punti descritti nel file (che puoi aprire oltre che con i programmi di grafica - ad esempio inkscape che è free, anche con il notepad) troverai le coordinate, che equivalgono a quelle delle mappe html, quindi ti basterà un copia incolla nel codice html per usarle come punti dei poligoni.

Se scali il file invece potrebbe darsi che i punti siano descritti sempre nello stesso modo ma che in un altro nodo del file venga passato un valore di scala, in quel caso dovrai manualmente moltiplicare tutti i valori per il fattore di scala.

Un'altra cosa che ho notato è che in alcuni casi i punti nei file svg sono in ordine inverso rispetto alle mappe html, quindi dovrai copiarli e incollarli in ordine inverso.

Purtroppo ho fatto una sola volta questa operazione, quindi non ho molta esperienza a riguardo per poterti elencare tutte le problematiche che potresti dover affrontare.

Per l'europa una rapida ricerca su google mi ha dato questo risultato:

http://commons.wikimedia.org/wiki/Image:Europa.svg

Una volta che hai creato correttamente la mappa il resto del lavoro è fatto dal plugin per jquery jQuery maphilight (http://davidlynch.org/js/maphilight/docs/), quindi dovrai includere sia il file di jquery che è il framework javascript che il plugin.

Se hai bisogno chiedi

[Mexcalero]

Grazie Gianiaz sei davvero gentilissimo.

Penso di aver capito, ora cerco di documentarmi su qst file svg xkè credo di nn averne mai utilizzato uno. Il fatto ke ridimensionando l'immagine si modifikino le coordinate/valori mi incuriosce, credo sia un aspetto da tener presente visto ke desidero avere dimensione fissa per tutte le immagini. Insomma, nn mi resta ke provare.

Grazie ancora x la disponibilità, alla prossima

[Rotorwing]

Salve, ripprendo questo vecchio post per avere qualche info supplementare.

In pratica ho capito che per avere l'effetto simile a quello mostrato qui bisogna caricare il file svg dell'Italia ed adoperare il javascript indicato.

Purtroppo non sono molto pratico e vorrei un aiuto per mettere la cartina online. Ad ogni regione corrisponderà una pagina già esistente. In pratica mi manca solo il passaggio intermedio, che è appunto quello di mettere la cartina con l'effetto di evidenziare il contorno delle regioni e di collegare ogni regione con l'apposita pagina html.

Mi aiutate?

Grazie.