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.