Introduzione a Openstreetmap

Introduzione a Openstreetmap 

Openstreetmap e Openlayers sono una buona alternativa al famoso Google Maps, per la realizzazione di applicazioni Maps based.

Inclusione Librerie necessarie 

Per utilizzare Openstreetmap sarà sufficiente includere, all'interno dei tag head le seguenti librerie 

<script src="http://www.openlayers.org/api/OpenLayers.js">
</script>

Mappa Navigabile 

Per creare una semplice Mappa navigabile, sarà sufficiente creare anzitutto un Oggetto OpenLayers.Map al quale andrà associato un div_id ovvero ID di un Elemento HTML, tipicamente un div, che fungerà da contenitore per la mappa in questione.

All’oggetto OpenLayers.Map andrà associato un primo Layer contenente la vera e propria Mappa, il quale è rappresentato da un oggetto OpenLayers.OSM

Javascript

map_obj = new OpenLayers.Map("div_id");
map_obj.addLayer(new OpenLayers.Layer.OSM());

HTML 

<div id="div_id" class="smallmap"></div>

Per il centraggio della Mappa in un punto, sarà necessario creare un opportuno oggetto che indica le Coordinate di un Punto sulla Mappa rappresentato da OpenLayers.LonLat

Il metodo setCenter si occuperà quindi di centrare la Mappa dove indicato.

Javascript

map.setCenter(new OpenLayers.LonLat(-70, 42).transform(
    new OpenLayers.Projection("EPSG:4326"), 
    map.getProjectionObject()), 
  zoom_level);  

Da notare che il punto indicato viene ritrasformato secondo la Proiezione EPSG 4326 (una delle diverse trasformazioni supportate)

Il parametro zoom_level è tipicamente un intero compreso tra 1 e 16 anche se è possibile avere, settando opportunamente la mappa, uno zoom frazionale.