OpenLayers: mappe semplici e OpenSource
OpenLayers rende semplice inserire una mappa dinamica in qualsiasi sito web... così recita la home page del progetto OpenLayers; dopo aver segnalato il nuovo embed di Google Maps propongo volentieri questo metodo alternativo, semplice e, soprattutto Opensource...
Si tratta di una libreria in JavaScript che permette di visualizzare e "manipolare" una mappa e i suoi dati (marker e relative pop up). Grazie al MapViewerService è possibile visualizzare una mappa in un iframe, avendo a disposizione un discreto numero di parametri... vediamo un semplice esempio (potete usare lo zoom e trascinare la mappa):
Due righe di codice per ottenere lo stesso risultato:
<iframe src="http://openlayers.org/viewer/" width="480" height="200" scrolling="no" frameborder="0"></iframe>
Solo per dimostrare la semplicità di utilizzo; certo se vogliamo ottenere risultati più complessi dobbiamo lavorare un pò, ma nemmeno troppo. Se ad esempio vogliamo inserire dei markers e la rispettiva popup possiamo utilizzare un semplice foglio di testo (o di Exel o OpenOffice) e caricarlo poi come parametro URL.
L' esempio sotto utilizza come base dati questo file.txt e contiene le informazioni necessarie a posizionare tre etichette e aprire tre popup che conterranno un titolo ed una descrizione (nella quale potremmo inserire codice HTML):
Anche in questo caso si tratta di poche righe di codice (lo stesso iframe con i parametri URL):
<iframe src="http://www.openlayers.org/viewer/?controls=panzoom, mouse¢er=43,10&zoom=5&data=http://dominio.com/textfile.txt" style="width: 500px; height: 350px;"></iframe>
Ovviamente dovete modificare l' indirizzo del file di testo e prestare molta attenzione al "sorgente" che vi ho segnalato sopra (soprattutto lo spazio tra le colonne). Qui trovate un tutorial di base mentre questa è la pagina della documentazione.
Ovviamente non può competere con altre mappe molto più dettagliate e "full optional", immaginatela come una valida alternativa, semplice da utilizzare (niente server side) e da personalizzare; del resto è possibile utilizzarla CON Google Maps e utilizzare altri formati standard. Da Provare.
Etichette: google maps, javascript, maps, OpenSource, webdesign
| Permalink | |