Nowy tryb mapy z openstreetmap.org
API Google umożliwia dodanie innych trybów mapy niż te wbudowane (mapa fizyczna, satelitarna, hybrydowa i widok ulic). Największym problemem w dodaniu własnej mapy jest konieczność przygotowania precyzyjnych obrazków z widokiem ulic, wykalibrowanych do mapy Google. Serwis openstreetmap.org udostępnia za darmo własny zestaw map w postaci, którą bardzo łatwo zaimportować do aplikacji w API Google.
Mapy z openstreetmap.org są darmowe i wolne - w niektórych miejsach mniej a w niektórych bardziej szczegółowe niż te, dostępne w Google Maps. Przykładowo, openstreetmap.org pokazuje przebieg linii tramwajowych.
Zdefiniowanie kawałków i praw autorskich
Każda mapa, prezentowana w API Google składa się z małych kawałków o wymiarach 256 x 256. Każdy z tych kawałków na różnym poziomie zoom jest w innej skali. Każdy z nich jest opisany przez współrzędną x i y (liczoną w jednostkach od punktu 0,0) oraz poziom zoom. W przypadku map z openstreetmap.org format URL obrazka wygląda następująco:
http://tile.openstreetmap.org/Z/X/Y.png
gdzie Z to poziom zoom (1-17) a X i Y to współrzędne.
Dodanie nowego trybu mapy zaczynamy od stworzenia noty z prawami autorskimi:
var nota = new GCopyright(1,new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)),0,'<a href="http://www.openstreetmap.org/">OpenStreetMap</a>');
var prawaAutorskie = new GCopyrightCollection('Mapa');
prawaAutorskie.addCopyright(nota);
Bez wchodzenia zbytnio w szczegóły tego zapisu, określa on, że na całej mapie (obszar ograniczony współrzędnymi 180 W, 180 E 90 N i 90S) ma być wyświetlany napis, informujący o prawach autorskich, należących do OpenStreetMap w formie linku. W trzeciej linijce nota jest dodawana do ogólnej kolekcji praw autorskich tworzonej mapy, stworzonych w linijce drugiej.
Teraz należy zdefiniować format URL kawałków. Robi się to następująco:
var kawalki = [new GTileLayer(prawaAutorskie,1,17)];
kawalki[0].getTileUrl = function (p,z) {
var y = p.y;
var x = p.x;
return 'http://tile.openstreetmap.org/'+z+'/'+x+'/'+y+'.png';
}
Definiujemy w pierwszej linijce, że kawałki będą się wyświetlać na poziomach zoom 1-17, z prawami autorskimi określonymi wcześniej. Następnie w linijkach 2-6 napisałem funkcję, którą API automatycznie wywołuje, by "dowiedzieć się", jaki jest adres URL kawałka w punkcie p i w zoomie z. P to obiekt klasy GPoint, więc posiada własności x i y, z których korzystamy, by skonstruować ostateczny adres URL.
Dodanie mapy
Czas na utworzenie nowego trybu mapy. Tryb mapy to w rzeczywistości obiekt klasy GMapType, z którym API komunikuje się, wywołując metodę getTileUrl(). Definicja trybu wygląda następująco:
var mapaOSL = new GMapType(kawalki, G_NORMAL_MAP.getProjection(), "Mapnik", {errorMessage:"Brak obrazka"});
Pierwszy argument to oczywiście odniesienie do obiektu GTileLayer lub do tablicy z obiektami, definiującymi adres URL kawałków. Drugi parametr to rodzaj projekcji - korzystamy z tej samej, co domyślna mapa w Google. Projekcja ma wpływ na to, jak współrzędne geograficzne są przeliczane na współrzędne ekranowe. Czwarty tryb to nazwa mapy (pojawia się na przycisku wyboru trybów) a ostatni do dodatkowe opcje, z których ustawiłem wiadomość, wyświetlaną zamiast brakującego kawałka.
Wybór nowego trybu mapy jest prosty - najpierw dodajemy nowy tryb do listy trybów, a potem możemy dowolnie zmieniać tryb, korzystając np. z funkcji w drugiej linijce:
mapa.addMapType(mapaOSL); mapa.setMapType(mapaOSL);
Inny zestaw map
Dostępny jest również zestaw map, do których kawałków URL wygląda następująco:
http://tah.openstreetmap.org/Tiles/tile/Z/X/Y.png
Szybka modyfikacja poprzedniego przykładu da następujący efekt: przykład 2pokaż kod przykładu
Można oczywiście wszystkie mapy dodać na raz: przykład 3pokaż kod przykładu