<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d2587781031737933902', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

OpenLayers: mappe semplici e OpenSource 09/10/07

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...

» continua

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&center=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: , , , ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti