Includere OpenStreetMap con Javascript

OpenStreetMap è un sistema di mappe simile a Google Maps e Bing, ma totalmente open e gestito dagli utenti.

Volendo è possibile inserirlo anche in un sito web, ed è possibile usare diversi SDK per diversi linguaggi.

Noi useremo Javascript con OpenLayers.

Ad essere sincero uno dei punti negativi è proprio la documentazione per i programmatori, che è frammentata e non spiegata benissimo, soprattutto per quanto riguarda i tipi di mappe utilizzabili.

Ma dopo un pò di ricerche ho raccolto un pò di link utili che vi giro:

• OpenLayers docs
• wiki OpenLayers
• library

Detto ciò vediamo un esempio abbastanza completo.

L'esempio prevede già due tipi di mappe tra cui secgliere attraverso uno switcher, e il marker.

Prima di tutto dobbiamo includere le librerie:

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

Poi un classico <div> per la mappa:

<div id="map" style="width: 500px; height: 500px;"></div>

Subito sotto al <div> abbiamo questo script qua:

<script>
    var lat = 41.90151;
    var lon = 12.46077;
    var zoom = 13;

    var map = new OpenLayers.Map("map", {
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Attribution()],
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
        maxResolution: 156543.0399,
        numZoomLevels: 19,
        units: 'm',
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326")
    });

    var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    map.addLayer(layerMapnik);
    var layerCycle = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
    map.addLayer(layerCycle);

    var lonLat = new OpenLayers.LonLat(lon, lat).transform(
            new OpenLayers.Projection("EPSG:4326"),
            new OpenLayers.Projection("EPSG:900913")
            );
    map.setCenter(lonLat, zoom);

    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(lonLat));
</script>

Prima di tutto impostiamo latitudine e longitudine.

Poi varie opzioni per la mappa, che sono soprattutto controlli come lo switcher o lo zoomer.

Poi impostiamo due tipi di mappe: OSM.Mapnik e OSM.CycleMap.

Poi impostiamo le coordinate, dando però prima la longitudine e poi la latitudine (in genere è il contrario.....) e la centriamo.

Poi impostiamo il Marker.

Nel complesso non è difficile, ha solo un funzionamento diverso con tantissime opzioni; tutto ciò è dovuto principalmente al fatto di essere un progetto aperto.