OpenStreetMap z własnymi punktami krok po kroku

Mapy google nie zawsze są dobrym wyborem. Licencja, koszty… Możemy użyć OpenStreetMap, które dają nam podobne możliwości. Zbudujemy krok po kroku mapę z własnymi punktami.

1. Podłączamy mapy

Żeby użyć OpenStreetMap skorzystamy z biblioteki OpenLayers. Wystarczy dołączyć javascript:

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

W treści naszej strony zrobimy miejsce na mapę:

<div id="mapdiv" style="width: 400px; height: 400px;">
   <!-- tu będzie mapka -->
</div>

Jak zwykle całe tworzenie map zrobimy po załadowaniu strony:

<script type="text/javascript">
window.onload = function() {
   // tu stworzymy mapkę
}
</script>

2. Prosta mapa

Aby wyświetlić prostą mapę, wystarczy stworzyć obiekt, przypisać go do elementu DIV i podać kilka podstawowych parametrów:

// podłączamy mapę do div
map = new OpenLayers.Map("mapdiv");

// dodajemy warstwę OpenStreetMap
map.addLayer(new OpenLayers.Layer.OSM());

// definiujemy punkt środka
var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
   .transform(
      new OpenLayers.Projection("EPSG:4326"),
      map.getProjectionObject()
   );

// ustawiamy pozycję i zoom mapy
map.setCenter (lonLat, 16);

Trochę wyjaśnienia wymaga transformacja punktu. Otóż mamy wiele różnych systemów obliczania współrzędnych. Tradycyjna pozycja znana z naszych GPSów to tylko jeden z systemów (oznaczuny jako EPSG:4326). Musimy przekonwertować nasze współrzędne formatu używanego przez mapę. Funkcja transform pobiera dwa obiekty definiujące system współrzędnych.

Cała konwersja przypomina trochę starą dobrą funkcję iconv z PHP, gdzie konwertowaliśmy teksty między zestawami znaków. Tutaj jednak zmieniamy punkt z jednego systemu na drugi. Więcej można poczytać na stronie EPSG.

Powyższy kod wyświetli nam mapę razem z kontrolkami. Nie mamy jeszcze żadnego markera.

3. Markery na mapie

Czas dodać marker. Kod jest równie prosty. Najpierw dodajemy warstwę z markerami:

var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);

Teraz pozostało nam już dodać marker. Dla uproszczenia użyjemy tego samego punktu, którym wycentrowaliśmy mapę:

markers.addMarker(new OpenLayers.Marker(lonLat));

Teraz na mapie zobaczymy marker. Ale nie da się w niego kliknąć.

4. Ciekawsze markery

Drugi sposób to stworzenie warstwy z „features” na mapie. Pozwoli to nam klikać w markery i dodawać dymki.

Najpierw dodajmy warstwę:

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
map.addLayer(vectorLayer);

Teraz stwórzmy feature mapy:

var feature = new OpenLayers.Feature.Vector(
   new OpenLayers.Geometry.Point( -0.119623, 51.503308  ).
      transform(
         new OpenLayers.Projection("EPSG:4326"),
         map.getProjectionObject()
      ),
      {description:'London Eye'} ,
      {
         externalGraphic: 'http://openlayers.org/api/img/marker.png',
         graphicHeight: 25,
         graphicWidth: 21,
         graphicXOffset:-12,
         graphicYOffset:-25
      }
);
vectorLayer.addFeatures(feature);

Najwięcej kodu zajmuje nam definicja grafiki. Bez niej punkt wyświetli się jako domyślne żółte kółko.

Zobaczymy teraz kolejny punkt na mapie. A co z klikaniem? Stwórzmy najpierw dwie funkcje – tworzącą i niszczącą dymek:

// selektor grupujący funkcje
var selector = new OpenLayers.Control.SelectFeature(vectorLayer, {
   onSelect: createPopup,
   onUnselect: destroyPopup
});

// tworzenie dymka
function createPopup(feature) {
   feature.popup = new OpenLayers.Popup.FramedCloud("pop",
         feature.geometry.getBounds().getCenterLonLat(),
         null,
         '<div class="markerContent">'+feature.attributes.description+'</div>',
         null,
         true,
         function() { selector.unselectAll(); }
   );
   //feature.popup.closeOnMove = true;
   map.addPopup(feature.popup);
}

// niszczenie dymka
function destroyPopup(feature) {
   feature.popup.destroy();
   feature.popup = null;
}

Jak widać obie funkcje korzystają ze stworzonego punktu. Pozostało nam tylko podłączyć je do mapy:

map.addControl(selector);
selector.activate();

I to tyle. Mamy już działającą mapę z wstawionymi punktami. W jeden z nich można kliknąć.

Co dalej?

Biblioteka OpenLayers jest bardzo rozbudowana. Możemy wstawiać wiele warstw, nakładać na siebie mapy, punkty, oznaczenia i dużo dużo więcej. Warto zajrzeć na stronę OpenLayers.

Pisząc o klikalnych markerach skorzystałem z przykkładu w artykule o OpenLayers

Warto też przeczytać interesujący artykuł o różnych układach współrzędnych i kodach EPSG.