Widok na www

Z UMP

(Różnice między wersjami)
d (UMP-pcPL online przeniesiono do Widok na www: tytuł się nie kojarzył przy szukaniu czegoś na temat)
Aktualna wersja (21:26, 1 gru 2021) (edytuj) (anuluj zmianę)
(Eksport widoku: popr.)
 
(Nie pokazano 43 wersji pośrednich.)
Linia 1: Linia 1:
-
Od grudnia 2008 r. można oglądać mapę UMP-pcPL z poziomu www.
+
Od grudnia 2008 r. można oglądać mapę UMP z poziomu www.
Mapa występuje w kilku wersjach:
Mapa występuje w kilku wersjach:
* http://mapa.ump.waw.pl/ump-www/ - mapka z średnim okienku i opcją zaznaczania punktu
* http://mapa.ump.waw.pl/ump-www/ - mapka z średnim okienku i opcją zaznaczania punktu
* http://mapa.ump.waw.pl/ump-www/form.html - formularz wysyłania uwag do mapy
* http://mapa.ump.waw.pl/ump-www/form.html - formularz wysyłania uwag do mapy
 +
* http://mapa.ump.waw.pl/ump-www/trasy - wyznaczanie tras
* http://mapa.ump.waw.pl/ump-www/iframe.html - mapka samo-dopasowująca się do widocznego obszaru, którą można wykorzystać w iframe lub po prostu otworzyć, aby mieć mapę na pełne okno przeglądarki WWW.
* http://mapa.ump.waw.pl/ump-www/iframe.html - mapka samo-dopasowująca się do widocznego obszaru, którą można wykorzystać w iframe lub po prostu otworzyć, aby mieć mapę na pełne okno przeglądarki WWW.
 +
* http://www.ump.waw.pl/sprawdz.html - wersja do wyszukiwania
 +
* https://www.umapa.pl/mapa/test/ - strona dedykowana na urządzenia mobilne
Linia 10: Linia 13:
=== Nawigacja ===
=== Nawigacja ===
-
Podstawowym narzędziem nawigacyjnym jest myszka, którą można intuicyjnie przeciągać mapę. Mapa oferuje jednak więcej możliwości
+
Podstawowym narzędziem nawigacyjnym jest myszka, którą można intuicyjnie przesuwać mapę. Mapa oferuje jednak więcej możliwości:
-
* myszka: przesuwanie, rolką przybliżenie lub oddalanie, podwójne kliknięcie centruje i przybliża
+
* myszka
-
* Shift + myszka: Lupa = zaznaczanie prostokątem obszaru do powiększenia
+
** rolka = przybliżenie lub oddalanie
-
* kontrolki nawigacyjne: przyciski w górnym lewym rogu mapy ze strzałeczkami oraz +/- i dodatkowy pasek ZoomBar do bezpośredniego przeskoku na wskazane powiększenie (może być wyłączony).
+
** podwójne kliknięcie = centruje i przybliża
-
* klawiatura: strzałki oraz Home/End/Page Up/Page Down do przesuwania, +/- do zmiany powiększenia. Opcja może być wyłączona na niektórych mapach, lub przy wejściu w pole tekstowe formularza
+
** przeciąganie z lewym przyciskiem = przesuwanie
 +
** przeciąganie z lewym przyciskiem + Shift = zaznaczanie prostokątem obszaru do powiększenia (lupa)
 +
** kliknięcie z Alt (albo Windows) = zaznaczenie i pokazanie szczegółów najbliższych punktów
 +
** kliknięcie z Ctrl = zaznaczenie i pokazanie szczegółów najbliższych dróg
 +
* klawiatura (działa normalnie na niektórych mapach, lub przy wejściu w pole tekstowe formularza)
 +
** klawisze kursora oraz Home/End/Page Up/Page Down = przesuwanie mapy
 +
** + i - = zmiana powiększenia
 +
 
 +
==== Kontrolki ====
 +
Elementy w lewym górnym rogu służą do przesuwania mapy i zmiany powiększenia (mogą być wyłączone).
 +
 
 +
Trzy szare guziki w prawym górnym rogu pozwalają stworzyć trasę, czyli po prostu kreskę na mapie, oraz ją poprawiać.
 +
 
 +
Niebieskie przyciski (+) w górnym prawym rogu mapy służą do:
 +
* górny: przełączania [[Widok_na_www#Warstwy|warstw]]
 +
* dolny: pokazywania profilu wysokości trasy lub obiektu mapy (np. ulicy).
 +
 
 +
Niebieski przycisk (+) w dolnym prawym rogu pokazuje mini-mapę.
 +
 
 +
Napis "Permalink" pozwala skopiować link do bieżącego widoku mapy (warstwa, miejsce, powiększenie).
=== Permalink ===
=== Permalink ===
W prawym dolnym rogu znajduje się link do aktualnego widoku mapy. Kliknij na "Permalink", a mapa przeładuje się, pokazując w pasku przeglądarki pełny adres bieżącego widoku, który można dodać do zakładek lub przesłać znajomym. Link taki składa się z adresu bazowego strony oraz kilku parametrów, które można wykorzystać do budowania własnych linków:
W prawym dolnym rogu znajduje się link do aktualnego widoku mapy. Kliknij na "Permalink", a mapa przeładuje się, pokazując w pasku przeglądarki pełny adres bieżącego widoku, który można dodać do zakładek lub przesłać znajomym. Link taki składa się z adresu bazowego strony oraz kilku parametrów, które można wykorzystać do budowania własnych linków:
* lat, lon: położenie środka widocznej mapy
* lat, lon: położenie środka widocznej mapy
 +
* mlat, mlon: położenie markera
 +
* mbody: tekst opisu markera
* zoom: poziom powiększenia, gdzie 0 jest najniższy (jeden kafelek 256x256 zawiera cały świat), a 18 to największe zbliżenie
* zoom: poziom powiększenia, gdzie 0 jest najniższy (jeden kafelek 256x256 zawiera cały świat), a 18 to największe zbliżenie
-
*layers: stan widocznych warstw i nakładek
+
* layers: stan widocznych warstw i nakładek
-
O ile lat,lon i zoom są zrozumiałe, to ostatni parametr może być lekko zagadkowy, więc najlepiej opisać na przykładzie:
+
O ile lat, lon, mlat, mlon i zoom są zrozumiałe, to ostatni parametr może być lekko zagadkowy, więc najlepiej opisać na przykładzie:
http://mapa.ump.waw.pl/ump-www/?zoom=7&lat=52.33&lon=19.9&layers=B00T
http://mapa.ump.waw.pl/ump-www/?zoom=7&lat=52.33&lon=19.9&layers=B00T
Linia 27: Linia 51:
Literki B/0 określają aktywność/nieaktywność warstw podstawowych. Z powyższego linku wynika że są 3 warstwy podstawowe, z których pierwsza jest ustawiona jako aktywna. Mogą to być mapy UMP, mapy OSM lub zdjęcia Google.
Literki B/0 określają aktywność/nieaktywność warstw podstawowych. Z powyższego linku wynika że są 3 warstwy podstawowe, z których pierwsza jest ustawiona jako aktywna. Mogą to być mapy UMP, mapy OSM lub zdjęcia Google.
Następnie występują literki T/F określające widoczność/ukrycie nakładek. W przykładzie jest tylko jedna nakładka wektorowa zawierająca warstwę wyświetlającą marker i jest ona aktywna (T)
Następnie występują literki T/F określające widoczność/ukrycie nakładek. W przykładzie jest tylko jedna nakładka wektorowa zawierająca warstwę wyświetlającą marker i jest ona aktywna (T)
 +
 +
W tekście opisu można używać "BBCode", czyli tagów HTML w nawiasach kwadratowych, np:
 +
 +
<nowiki>http://mapa.ump.waw.pl/ump-www/?zoom=14&lat=51.0&lon=17.0&layers=B00000FTF&mlat=51.0&mlon=17.0&mbody=tekst_[b]bold[/b][br]test_[url]http://ump.waw.pl[/url]</nowiki>
 +
 +
Więcej szczegółów poniżej, w sekcji "Marker". W Permalinku można też zadać pytanie wyszukiwarce, konstruując je na przykład tak:
 +
 +
http://mapa.ump.waw.pl/ump-www/?q=Wroc%C5%82aw,,ATM <br>
 +
http://mapa.ump.waw.pl/ump-www/?q=Wroc%C5%82aw,Swobodna&zoom=16
=== Własne ślady ===
=== Własne ślady ===
Linia 33: Linia 66:
=== Warstwy ===
=== Warstwy ===
W prawym górnym rogu mapy znajduje się przycisk (+) pod którym pojawia się lista dostępnych warstw. UMP@Mapnik jest podstawową warstwą
W prawym górnym rogu mapy znajduje się przycisk (+) pod którym pojawia się lista dostępnych warstw. UMP@Mapnik jest podstawową warstwą
-
zawierającą mapę UMP-pcPL i jest wyświetlana jako domyślna. Dla porównania dostępna jest również warstwa z danymi z [http://www.openlayers.org/ OpenStreetMap]. Przy pomocy [[#Dostosowanie_konfiguracji_mapy|dodatkowej konfiguracji]] możliwe jest dodanie warstwy z mapami google. Inne warstwy są w celach testowych i mogą zostać usunięte.
+
zawierającą mapę UMP i jest wyświetlana jako domyślna. Dla porównania dostępna jest również warstwa z danymi z [http://www.openlayers.org/ OpenStreetMap]. Przy pomocy [[#Dostosowanie_konfiguracji_mapy|dodatkowej konfiguracji]] możliwe jest dodanie warstwy z mapami google. Inne warstwy są w celach testowych i mogą zostać usunięte.
-
Poza warstwami mogą wystąpić dodatkowe nakładki wektorowe. Mogą to być zbiory punktów POI lub warstwy do rysowania wielokątów/linii/punktów. Aktualnie na mapie UMP-pcPL jest aktywna na stałe warstwa do rysowania markera. W przyszłości możliwe jest wzbogacenie o dodatkowe nakładki, które mogą być włączane lub wyłączane w menu warstw poprzez odpowiednie checkboxy.
+
Poza warstwami mogą wystąpić dodatkowe nakładki wektorowe. Mogą to być zbiory punktów POI lub warstwy do rysowania wielokątów/linii/punktów. Aktualnie na mapie UMP jest aktywna na stałe warstwa do rysowania markera. W przyszłości możliwe jest wzbogacenie o dodatkowe nakładki, które mogą być włączane lub wyłączane w menu warstw poprzez odpowiednie checkboxy.
=== Marker ===
=== Marker ===
Linia 58: Linia 91:
* [url=www.*]tresc[/url], [url]http://ump.waw.pl[/url] - link
* [url=www.*]tresc[/url], [url]http://ump.waw.pl[/url] - link
* [email]mail@domena[/email] - link do wysłania maila
* [email]mail@domena[/email] - link do wysłania maila
-
 
=== Dodatkowe ozdobniki ===
=== Dodatkowe ozdobniki ===
Linia 67: Linia 99:
* orientacyjna skala aktualnego powiększenia
* orientacyjna skala aktualnego powiększenia
 +
=== Opisy i linki do stron www punktu ===
-
== Mapa UMP-pcPL na Twojej stronie ==
+
Działają od sierpnia 2011. W "dymkach" wskazujących wyszukany punkt pokazują się komentarze umieszczone w źródłach danego punktu, oraz link do strony www punktu (o ile wpisany, oczywiście). Umieszczone w komentarzach linki do Flyspray (o formacie "FS#[numer]") oraz linki http:// będą działały w odpowiedni sposób. Opis składni plików źródłowych PNT i sposób wpisywania danych na [[Format_PNT#POI.pnt|stronie opisu formatu plików PNT]]. Nie są pokazywane "zakomentowane komentarze" czyli linijki zaczynające się podwójnym średnikiem. W rezultacie przykładowy punkt
 +
;; KINA
 +
; tanie bilety z kartą stałego klienta - FS#99999 nieczyne do końca roku
 +
51.00000, 21.00000, 0,Promyk,Krótka;9;+48115552233;url=http://promyk.miasto.pl/,Miasto,KINO
 +
dostanie w "dymku" zachętę o tanich biletach i informację o remoncie, oraz link do swojej strony - ale nie będzie wypisana nazwa "sekcji" KINA.
 +
 
 +
=== Linki do rozkładów jazdy komunikacji miejskiej ===
 +
Szerzej omówione [[Format_PNT#Linki_do_rozk.C5.82ad.C3.B3w_jazdy|tutaj]].
 +
 
 +
=== Eksport widoku ===
 +
Na razie tylko ręcznie, przykładowe linki:
 +
https://mapa.ump.waw.pl/cgi/export.cgi?bbox=20.847,52.18,21.16,52.335&scale=120000&format=pdf
 +
https://mapa.ump.waw.pl/cgi/export.cgi?bbox=21.00735,52.24677,21.01496,52.24916&scale=3386&format=png
 +
Współrzędne dobieramy wg zasady lewy/dolny i prawy/górny punkt obszaru, umieszczając najpierw długość a później szerokość geograficzną.
 +
Parametr scale zgodnie z tym co się prezentuje w prawym dolnym rogu mapy (1:54k itp), obsługiwane wartości formatów: png, jpeg, pdf, svg, ps. Uwaga: svg, tym bardziej ps potrafi być dość duży przy większych wartościach scale, gdyż dane wektorowe '''nie są''' upraszczane.
 +
Ze względu na wielkość pliku chęć pobrania większych fragmentów mapy należy zgłosić na maila ump@ump.waw.pl
 +
 
 +
Bardzo dobrym sposobem na wyeksportowanie widoku jest też [[Wersje#MOBAC|Mobile Atlas Creator]], który w łatwy sposób umożliwia stworzenie pliku z dowolnego obszaru UMP i w dowolnej skali.
 +
 
 +
Należy tylko pamiętać, by w zakładce Tools/Settings/PaperAtlas rozmiar pliku ustawić na Selection.
 +
 
 +
=== Wyliczenie trasy ===
 +
[http://mapa.ump.waw.pl/ump-www/trasy Bezpośrednio] albo na [http://mapa.ump.waw.pl/ump-www mapie] w zakładce "Trasy". Używanie intuicyjne. Na razie obsługuje tylko przejazd dla samochodów, oraz nie uwzględnia niektórych jednokierunków i zakazów.
 +
 
 +
Szczegóły [[Trasy]].
 +
 
 +
===Legenda===
 +
W [http://umapa.pl/fVyzb tych okolicach] umieszczamy przegląd wszystkich rodzajów elementów (drogi normalnie - w tunelu - na wiadukcie).
 +
 
 +
=== Statystyki ===
 +
[http://mapa.ump.waw.pl/ump-www/stats.html Tutaj].
 +
=== Tryb inżynierski ===
 +
[http://mapa.ump.waw.pl/ump-www/?dev=1 Ten parametr] powoduje, że w dymkach będą podawane informacje o źródłach danego obiektu. Wyłączyć funkcję można [http://mapa.ump.waw.pl/ump-www/?dev=0 w ten sposób].
 +
 
 +
Ctrl + klik = informacja o lokalizacji linii
 +
 
 +
Alt + klik - informacja o lokalizacji punktu
 +
 
 +
Ctrl + Alt + klik = informacja o lokalizacji obszaru
 +
 
 +
== Mapa UMP na Twojej stronie ==
 +
Więcej: [[Mapa_UMP_na_Twojej_stronie|tutaj]].
Do wyświetlania mapy w przeglądarce WWW wykorzystana została biblioteka [http://www.openlayers.org/ OpenLayers],
Do wyświetlania mapy w przeglądarce WWW wykorzystana została biblioteka [http://www.openlayers.org/ OpenLayers],
jednak można użyć dowolnej biblioteki tego rodzaju (np Google API). Kafelki mają odwzorowanie i numerację taką samą jak
jednak można użyć dowolnej biblioteki tego rodzaju (np Google API). Kafelki mają odwzorowanie i numerację taką samą jak
-
mapy Google czy [http://www.openlayers.org/ OSM] więc nie powinno być problemu z użyciem innych programów korzystających z tych źródeł.
+
mapy Google czy [http://www.openlayers.org/ OSM], więc programy innych firm wykorzystują także UMP, lub można je łatwo dostosować:
 +
* [[Viking]] (Linux)
 +
* [https://market.android.com/details?id=menion.android.locus Locus] (Android)
 +
* [https://market.android.com/details?id=coderminus.maps& Maps (-)] (Android)
 +
* ...
Dla ułatwienia umieszczania mapki na stronach przygotowany został kod javascript, który powinien ułatwić wstępną konfigurację. Nic jednak nie przeszkadza, aby zrobić po swojemu, wykorzystując jedynie adresy kafelków. W przygotowanej wersji wystarczy jednak umieścić minimalną ilość dodatkowych elementów, by cieszyć się mapą na swojej stronie.
Dla ułatwienia umieszczania mapki na stronach przygotowany został kod javascript, który powinien ułatwić wstępną konfigurację. Nic jednak nie przeszkadza, aby zrobić po swojemu, wykorzystując jedynie adresy kafelków. W przygotowanej wersji wystarczy jednak umieścić minimalną ilość dodatkowych elementów, by cieszyć się mapą na swojej stronie.
 +
 +
Na marginesie: jak [http://wiki.openstreetmap.org/wiki/Tile_usage_policy OSM blokuje] zbyt zachłanne pobieranie kafelków.
TODO...
TODO...
Linia 122: Linia 202:
* disableControls:true - wyłączenie wszystkich kontrolek (tryb czystej mapy UMP)
* disableControls:true - wyłączenie wszystkich kontrolek (tryb czystej mapy UMP)
* simpleZoom:true - strzałeczki i uproszczona kontrolka zoom, bez podziałki (ZoomBar)
* simpleZoom:true - strzałeczki i uproszczona kontrolka zoom, bez podziałki (ZoomBar)
-
* simpliesZoom:true - tylko +/-, globus, bez strzałek (działa również gdy disableControls:true)
+
* simpliestZoom:true - tylko +/-, globus, bez strzałek (działa również gdy disableControls:true)
* disableKeyboard:true - wyłączenie obsługi klawiatury, aby uniknąć zmiany mapy przy edycji formularzy i pól tekstowych
* disableKeyboard:true - wyłączenie obsługi klawiatury, aby uniknąć zmiany mapy przy edycji formularzy i pól tekstowych
* lat,lon,zoom - domyślne położenie mapy, gdy nie podane w url'u
* lat,lon,zoom - domyślne położenie mapy, gdy nie podane w url'u
Linia 134: Linia 214:
...TODO
...TODO
==== OpenLayers ====
==== OpenLayers ====
-
...TODO
+
Jeżeli chce się korzystać z openlayers to wystarczy użyc klasy do OSM, czyli
 +
coś takiego:
 +
 
 +
<pre>
 +
osm = new OpenLayers.Layer.OSM()
 +
ump = new OpenLayers.Layer.OSM("UMP",
 +
"http://1.tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png", {numZoomLevels: 20,
 +
alpha: true, isBaseLayer: false});
 +
map.addLayers [ump, osm]
 +
</pre>
 +
 
==== Google API ====
==== Google API ====
-
Możliwe, że zostanie dodane jakieś ułatwienie typu initUMP dla google, tymczasem przykładowe użycie UMP-pcPL przy pomocy GoogleAPI (potrzebny klucz do wpisania zamiast KLUCZ_GOOGLE_API)
+
Możliwe, że zostanie dodane jakieś ułatwienie typu initUMP dla google, tymczasem przykładowe użycie UMP przy pomocy GoogleAPI (potrzebny klucz do wpisania zamiast KLUCZ_GOOGLE_API)
<pre>
<pre>
&lt;html>&lt;head>
&lt;html>&lt;head>
Linia 149: Linia 239:
if (!GBrowserIsCompatible())
if (!GBrowserIsCompatible())
return;
return;
-
var copyOSM = new GCopyrightCollection("<a href=\"http://ump.waw.pl/\">UMP-PcPL</a>");
+
var copyOSM = new GCopyrightCollection("<a href=\"http://ump.waw.pl/\">UMP</a>");
var copyOSM2 = new GCopyrightCollection("<a href=\"http://www.openstreetmap.org/\">OpenStreetMaps</a>");
var copyOSM2 = new GCopyrightCollection("<a href=\"http://www.openstreetmap.org/\">OpenStreetMaps</a>");
copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
Linia 173: Linia 263:
&lt;/body>&lt;/html>
&lt;/body>&lt;/html>
</pre>
</pre>
 +
==== WordPress ====
 +
[osm_map lat="52.000" long="21.000" control="scaleline,scale" zoom="14" width="500" height="500"
 +
extmap_type="OSM" extmap_name="mapUMP"
 +
extmap_address="http://tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png"
 +
extmap_init="numZoomLevels: 17, transitionEffect: 'resize', sphericalMercator: true" type="ext"]
== Szczegóły techniczne renderingu ==
== Szczegóły techniczne renderingu ==
 +
 +
=== Podsumowanie ===
 +
Większość wiedzy potrzebnej do przygotowania wersji WWW map UMP zaczerpnąłem ze stron http://wiki.openstreetmap.org/wiki/Main_Page gdzie praktycznie [http://wiki.openstreetmap.org/wiki/Mapnik krok po kroku] zostało opisane jak przygotować własną mapę WWW. Głównym problemem było więc przeniesienie kodów z formatu *.mp do *.osm oraz przystosowanie konwencji UMP do [http://mapnik.org/ Mapika], którego gotowa konfiguracja zoptymalizowana była mocno pod kątem [http://www.openstreetmap.org/ OpenStreetMap]. Przez wykorzystanie gotowych komponentów możliwe było bardzo szybkie przygotowanie mapy online UMP (w weekendy i w wolnych chwilach przez 1-2 miesiące), a efektem ubocznym jest duże podobieństwo wyglądu do map OSM :) .
=== Przygotowanie pliku importu *.osm.gz ===
=== Przygotowanie pliku importu *.osm.gz ===
Mapa generowana jest na podstawie tych samych źródeł, z których powstają wersje na odbiorniki Garmin.
Mapa generowana jest na podstawie tych samych źródeł, z których powstają wersje na odbiorniki Garmin.
-
Plik w formacie polskim (*.mp) jest wstępnie przygotowywany, a następnie konwertowany do pośredniego formatu xml zgodnego z [http://wiki.openstreetmap.org/wiki/XML_Schema OSM].
+
Plik w formacie polskim (*.mp) jest wstępnie przygotowywany ('''skrypt.sh'''), a następnie konwertowany do pośredniego formatu xml zgodnego z [http://wiki.openstreetmap.org/wiki/XML_Schema OSM] na podstawie reguł '''~/mapnik/mp2osm/ump-cvs/types.xml'''.
Ze względu na wiele różnic pomiędzy używanymi typami i konwencjami w UMP oraz OSM, otrzymywany plik jest uproszczoną wersją dostosowaną
Ze względu na wiele różnic pomiędzy używanymi typami i konwencjami w UMP oraz OSM, otrzymywany plik jest uproszczoną wersją dostosowaną
Linia 186: Linia 284:
Modyfikacje konwertera obejmowały zarówno zmiany kodu jak i definicji reguł konwersji.
Modyfikacje konwertera obejmowały zarówno zmiany kodu jak i definicji reguł konwersji.
-
Aktualnie wygenerowany plik ump.osm.gz (po spakowaniu) zajmuje ok 100MB i stanowi podstawę do renderingu kafelków wyświetlanych w przeglądarce WWW.
+
Aktualnie generujemy u Marcina. Plik ump.osm.gz (po spakowaniu) zajmuje ok. 900MB i stanowi podstawę do renderingu kafelków wyświetlanych w przeglądarce WWW.
-
=== Renderowanie: Mapnik ===
+
Wymagania - ? (spytać Tadka?)
-
Dalej, uzyskany plik xml jest przetwarzany tak samo jak w przypadku OpenStreetMap, co zostało opisane dokładnie na właściwym Wiki:
+
-
http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map
+
=== Renderowanie ===
 +
Dalej, uzyskany plik xml jest przetwarzany tak samo jak w przypadku OpenStreetMap, co zostało opisane dokładnie na właściwym Wiki: http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map
Oprogramowanie serwera renderującego obejmuje:
Oprogramowanie serwera renderującego obejmuje:
Linia 199: Linia 297:
* [http://wiki.openstreetmap.org/wiki/Mod_tile apache2 + mod_tile] - moduł apache2 wykorzystujący Mapnik'a do dynamicznego generowania kafelków i obsługi cache
* [http://wiki.openstreetmap.org/wiki/Mod_tile apache2 + mod_tile] - moduł apache2 wykorzystujący Mapnik'a do dynamicznego generowania kafelków i obsługi cache
-
Modyfikacje tego etapu polegały jedynie na dostosowaniu definicji styli dla specyficznych warunków UMP-pcPL oraz poprawione zostały
+
Modyfikacje tego etapu polegały jedynie na dostosowaniu definicji stylów dla specyficznych warunków UMP oraz poprawione zostały
niektóre parametry odpowiedzialne za poziom wyświetlania oraz grubość dróg. Różnice można zaobserwować porównując warstwę UMP i OSM.
niektóre parametry odpowiedzialne za poziom wyświetlania oraz grubość dróg. Różnice można zaobserwować porównując warstwę UMP i OSM.
Linia 206: Linia 304:
z obsługą zapytań WWW.
z obsługą zapytań WWW.
-
Przebiega to podobnie jak w przypadku OSM: http://wiki.openstreetmap.org/wiki/Slippy_Map
+
Przebiega to podobnie jak w przypadku OSM: http://wiki.openstreetmap.org/wiki/Slippy_Map według reguł w '''~/mapnik/mapnik_style/settings''' dla warstwy normalnej oraz '''settings-stg''' dla warstwy hybryda.
-
=== Podsumowanie ===
+
Wymagania na renderer: serwer renderd + apache z odpowiednim modułem oraz baza danych (postgres + postgis) blisko renderera. Lubi mieć dużo CPU. Wystarczy 2 GB ramu.
 +
Wymagania na cache: java, dużo pasma.
 +
 
 +
Jeden cache może korzystać z kilku rendererów. Aktualnie mamy dwa renderery (u Marcina wyższe warstwy oraz testowy, u Jacka dwie najniższe).
 +
 
 +
UWAGA w 2014 były prace nad stylem do [http://leafletjs.com/ Leafleat], łącznie z budynkami 3D. Opisane [[GIT|tutaj]].
 +
 
 +
=== Dla opornych ===
 +
* testy rób na rendererze testowym: marcom......:1080
 +
* Zakładki w pierwszym widoku mapy (marker, formularz, trasy)
 +
** na serwerze mapy po prostu ~/mapnik/ump-www/index.html<br />uwaga: katalog /trasy/ zawiera starą wersję rutera, tylko samochodową.
 +
 
 +
* Dodanie linków do rozkładów jazdy dla kolejnych miast
 +
** na rendererze katalog ~/mapnik/ump-www/cgi/ pliki search.pl (dla szukania z formularza) oraz pquery.pl (dla klikania w mapę)<br />szukaj kilku linijek kodu z urlami innych miast
 +
 
 +
* Jeśli punkt wyszukuje się jako "POI", a nie jako typ ogólny
 +
** na rendererze katalog ~/mapnik/ump-www/cgi/ pliki search.pl (dla szukania z formularza) oraz pquery.pl (dla klikania w mapę)<br />definicja my %umptypes =
 +
 
 +
* nowa ikonka na przykładzie kirkutów, stacji Shell i weterynarzy (w trakcie rozpoznawania)
 +
** zastanów się, jak wyłuskać konkretne elementy i na jaką kombinację tagów OSM ma być tłumaczony
 +
*** Typ=KIRKUT to będzie landuse=cemetery; religion=jewish
 +
*** Label=Shell.*
 +
*** Typ=WETERYNARZ (Type=0x3002) to będzie amenity=veterinary
 +
*** (teraz, 7.12, dodaje 10e15 kolej podziemna jako railway=rail/tunnel=yes)
 +
** czasem trzeba pomóc konwersji '''~/mapnik/mp2osm/ump-cvs/skrypt.sh''' dodając (&\n) już na poziomie mp2osm tagi, które pomogą rozróżnić punkty później:
 +
*** -e 's/^Typ=KIRKUT$/&\nlanduse=cemetery\nreligion=jewish\nz_order=-12/g' \ ''(nie jestem pewien, po co jest nz_order)''
 +
*** stacje benzynowe nie potrzebują
 +
*** -e 's/^Type=0x3002$/&\namenity=hospital/g' \ <br /> -e 's/^Typ=WETERYNARZ$/&\namenity=veterinary/g' \
 +
*** ale np. paczkomat nie potrzebuje "wspomagania", bo nie ma zmiany typu garminowego ani OSM, a rozróżnienie jest na podstawie ump:typ
 +
** i teraz już możesz konwertować: w '''~/mapnik/mp2osm/ump-cvs/types.xml'''
 +
*** dla type garmin-type="0x6403" (cmentarz)<br /><osm-tag tag="landuse" value="cemetery" /><br /><osm-tag tag="religion" value="%religion%" />
 +
*** paliwa nie potrzebują
 +
*** dla type garmin-type="0x3002" (szpitale)<br /><osm-tag tag="amenity" value="%amenity%" />
 +
** narysuj obrazek do pokazywania - na rendererze wgraj plik do '''~/mapnik/mapnik_style/symbols_ump/''' (preferowany png - xpm nie działa)
 +
** dodaj wyświetlanie obrazka dla konkretnych kombinacji tagów: na rendererze dopisz do któregoś pliku w '''~/mapnik/mapnik_style/settings/*''' oraz '''settings-stg/*'''
 +
*** kirkut
 +
<Rule>
 +
<MaxScaleDenominator>10000</MaxScaleDenominator>
 +
<MinScaleDenominator>2500</MinScaleDenominator>
 +
<Filter>[landuse]='cemetery' and not [religion] = 'jewish'</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/6403_Cemetery_Cmentarz_day.png" type="png" width="24" height="24" />
 +
</Rule>
 +
<Rule>
 +
<MaxScaleDenominator>2500</MaxScaleDenominator>
 +
<Filter>[landuse]='cemetery' and not [religion] = 'jewish'</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/6403_Cemetery_Cmentarz_day.png" type="png" width="24" height="24" allow_overlap="true"/>
 +
</Rule>
 +
<Rule>
 +
<MaxScaleDenominator>5000</MaxScaleDenominator>
 +
<Filter>[landuse]='cemetery' and [religion] = 'jewish'</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/kirkut.png" type="png" width="24" height="24" allow_overlap="true"/>
 +
</Rule>
 +
*** benzyny:<br />
 +
<Rule>
 +
<MaxScaleDenominator>50000</MaxScaleDenominator>
 +
<MinScaleDenominator>5000</MinScaleDenominator>
 +
<Filter>[amenity]='fuel'</Filter>
 +
<PointSymbolizer file="&ump_symbols_path;/2f01_Petrol-Station_Stacja-Benzynowa_day.png" type="png" width="24" height="24" />
 +
</Rule>
 +
<Rule>
 +
<MaxScaleDenominator>5000</MaxScaleDenominator>
 +
<Filter>[amenity]='fuel' and not ([name].match('^BP.*') or [name].match('^Shell.*'))</Filter>
 +
<PointSymbolizer file="&ump_symbols_path;/2f01_Petrol-Station_Stacja-Benzynowa_day.png" type="png" width="24" height="24" allow_overlap="true"/>
 +
</Rule>
 +
<Rule>
 +
<MaxScaleDenominator>5000</MaxScaleDenominator>
 +
<Filter>[amenity]='fuel' and [name].match('^BP.*')</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/BP_16x16.png" type="png" width="16" height="16" allow_overlap="true"/>
 +
</Rule>
 +
<Rule>
 +
<MaxScaleDenominator>5000</MaxScaleDenominator>
 +
<Filter>[amenity]='fuel' and [name].match('^Shell.*')</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/Shell_16x16.png" type="png" width="16" height="16" allow_overlap="true"/>
 +
</Rule>
 +
*** weterynarz<br />
 +
<Rule>
 +
<MaxScaleDenominator>10000</MaxScaleDenominator>
 +
<Filter>[amenity]='veterinary'</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/wet.png" type="png" width="16" height="16" />
 +
</Rule>
 +
*** paczakomat<br />
 +
<Rule>
 +
<MaxScaleDenominator>10000</MaxScaleDenominator>
 +
<MinScaleDenominator>2500</MinScaleDenominator>
 +
<Filter>[amenity]='post_office' and not [ump:typ]='PACZKOMAT'</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/2f05_Post-Office_Urzad-Pocztowy_day.png" type="png" width="24" height="24" />
 +
</Rule>
 +
<Rule>
 +
<MaxScaleDenominator>2500</MaxScaleDenominator>
 +
<Filter>[amenity]='post_office' and not [ump:typ]='PACZKOMAT'</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/2f05_Post-Office_Urzad-Pocztowy_day.png" type="png" width="24" height="24" allow_overlap="true" />
 +
</Rule>
 +
<Rule>
 +
<MaxScaleDenominator>5000</MaxScaleDenominator>
 +
<Filter>[amenity]='post_office' and [ump:typ]='PACZKOMAT'</Filter>
 +
<PointSymbolizer file= "&ump_symbols_path;/paczkomat.png" type="png" width="20" height="20" allow_overlap="true" />
 +
</Rule>
 +
** uwaga: poziom 2500 to skala 50 metrów na mapie www
 +
** poczekaj "do jutra", ewentualnie przerestartuj renderer testowy (killall renderd; poczekać 30 sekund; renderd powinien się sam uruchomić)
 +
 
 +
== Pomysły na przyszłość ==
 +
=== legenda ===
 +
czyli okienko z opisami co znaczą jakie kolory / elementy
 +
 
 +
Nie-okienkowo zrobiłem [http://mapa.ump.waw.pl/ump-www/?zoom=16&lat=49.99546&lon=29.00893&layers=B00000TTF gdzieś daleko] - wersja ułomna, będzie się ubogacać (<- nowomowa kościelna), mam nadzieję.
-
Większość wiedzy potrzebnej do przygotowania wersji WWW map UMP-pcPL zaczerpnąłem ze stron:
+
=== drobne błędy ===
 +
[http://mapa.ump.waw.pl/ump-www/?zoom=17&lat=52.23231&lon=20.98467&layers=B00000FTF nazwa terenu przemysłowego] się nie wyświetla
-
http://wiki.openstreetmap.org/wiki/Main_Page
+
# podnieść Openlayers do 2.12? (wsparcie tabletów)
 +
# sugestie zmiany (jakiej?) wyglądu:
 +
#* <strike>zwykły las oraz park krajobrazowy, zgłasza Grzesiek Michalik</strike> (poprawione od 22.12, znaczek PN do poprawy)
 +
#* osobne ikonki dla stacji BP, bankomatu, ..... zgłaszam ja (znaczek kirkutu od 15.12)
 +
#** Zientara: szpital-pogotowie-wet-przychodnia; rentacar/renatbike/rentaboat
 +
#** przy okazji 2f08 jest bus/tram/taxi itd, może bus/tram dać 2f16, a truck_stop dać parkingiem 2f0b
 +
#* kilka rodzajów linii jest niewidocznych http://mapa.ump.waw.pl/ump-www/?zoom=16&lat=49.98891&lon=29.0097&layers=B00000FTF (częściowo zgłoszone jako http://ump.fuw.edu.pl/flyspray/index.php?do=details&task_id=13631)
 +
# sprawdzić, czy można przenieść część serwowania kafelków na serwer nie u Jacka
 +
#* przenieść generację konwersji mp->osm do Tadka
 +
# bojki się nie wyświetlają, ale się wyszukują http://mapa.ump.waw.pl/ump-www/?q=,,watpliwy albo przez klikanie z Alt
 +
# [http://ump.fuw.edu.pl/flyspray/index.php?project=4&do=index&switch=1 zgłoszenia na FS]
-
gdzie praktycznie [http://wiki.openstreetmap.org/wiki/Mapnik krok po kroku] zostało opisane jak przygotować własną mapę WWW. Głównym problemem było więc przeniesienie kodów z formatu *.mp do *.osm oraz przystosowanie konwencji UMP-pcPL do [http://mapnik.org/ Mapika], którego gotowa konfiguracja zoptymalizowana była mocno pod kątem [http://www.openstreetmap.org/ OpenStreetMap]. Przez wykorzystanie gotowych komponentów możliwe było bardzo szybkie przygotowanie mapy online UMP (w weekendy i w wolnych chwilach przez 1-2 miesięce), a efektem ubocznym jest duże podobieństwo wyglądu do map OSM :) .
+
MAPA WWW - NOWE FUNKCJE (bardziej odległe)
 +
#<strike>wyświetlanie znaków zakazu wedle pomysłu Michała Górskiego</strike> (działają "publicznie" od 22.12.2012) (i limitu prędkości/gabarytów?)
 +
#widok domków 3D - coś jak osmapa.pl http://osmapa.pl/?lon=21.00603&lat=52.23146&zoom=17&map=1&o=FFFF
 +
#osmapa wprowadziła coś jak pokazywanie warstw czy też widoki z akcentowaniem różnych aspektów http://osmapa.pl/w/
[[Użytkownik:Mar rud|Marcin Rudowski]]
[[Użytkownik:Mar rud|Marcin Rudowski]]
[[Kategoria:Użytkowanie mapy]]
[[Kategoria:Użytkowanie mapy]]

Aktualna wersja

Od grudnia 2008 r. można oglądać mapę UMP z poziomu www.

Mapa występuje w kilku wersjach:


Spis treści

Korzystanie z mapy

Nawigacja

Podstawowym narzędziem nawigacyjnym jest myszka, którą można intuicyjnie przesuwać mapę. Mapa oferuje jednak więcej możliwości:

  • myszka
    • rolka = przybliżenie lub oddalanie
    • podwójne kliknięcie = centruje i przybliża
    • przeciąganie z lewym przyciskiem = przesuwanie
    • przeciąganie z lewym przyciskiem + Shift = zaznaczanie prostokątem obszaru do powiększenia (lupa)
    • kliknięcie z Alt (albo Windows) = zaznaczenie i pokazanie szczegółów najbliższych punktów
    • kliknięcie z Ctrl = zaznaczenie i pokazanie szczegółów najbliższych dróg
  • klawiatura (działa normalnie na niektórych mapach, lub przy wejściu w pole tekstowe formularza)
    • klawisze kursora oraz Home/End/Page Up/Page Down = przesuwanie mapy
    • + i - = zmiana powiększenia

Kontrolki

Elementy w lewym górnym rogu służą do przesuwania mapy i zmiany powiększenia (mogą być wyłączone).

Trzy szare guziki w prawym górnym rogu pozwalają stworzyć trasę, czyli po prostu kreskę na mapie, oraz ją poprawiać.

Niebieskie przyciski (+) w górnym prawym rogu mapy służą do:

  • górny: przełączania warstw
  • dolny: pokazywania profilu wysokości trasy lub obiektu mapy (np. ulicy).

Niebieski przycisk (+) w dolnym prawym rogu pokazuje mini-mapę.

Napis "Permalink" pozwala skopiować link do bieżącego widoku mapy (warstwa, miejsce, powiększenie).

Permalink

W prawym dolnym rogu znajduje się link do aktualnego widoku mapy. Kliknij na "Permalink", a mapa przeładuje się, pokazując w pasku przeglądarki pełny adres bieżącego widoku, który można dodać do zakładek lub przesłać znajomym. Link taki składa się z adresu bazowego strony oraz kilku parametrów, które można wykorzystać do budowania własnych linków:

  • lat, lon: położenie środka widocznej mapy
  • mlat, mlon: położenie markera
  • mbody: tekst opisu markera
  • zoom: poziom powiększenia, gdzie 0 jest najniższy (jeden kafelek 256x256 zawiera cały świat), a 18 to największe zbliżenie
  • layers: stan widocznych warstw i nakładek

O ile lat, lon, mlat, mlon i zoom są zrozumiałe, to ostatni parametr może być lekko zagadkowy, więc najlepiej opisać na przykładzie:

http://mapa.ump.waw.pl/ump-www/?zoom=7&lat=52.33&lon=19.9&layers=B00T

Literki B/0 określają aktywność/nieaktywność warstw podstawowych. Z powyższego linku wynika że są 3 warstwy podstawowe, z których pierwsza jest ustawiona jako aktywna. Mogą to być mapy UMP, mapy OSM lub zdjęcia Google. Następnie występują literki T/F określające widoczność/ukrycie nakładek. W przykładzie jest tylko jedna nakładka wektorowa zawierająca warstwę wyświetlającą marker i jest ona aktywna (T)

W tekście opisu można używać "BBCode", czyli tagów HTML w nawiasach kwadratowych, np:

http://mapa.ump.waw.pl/ump-www/?zoom=14&lat=51.0&lon=17.0&layers=B00000FTF&mlat=51.0&mlon=17.0&mbody=tekst_[b]bold[/b][br]test_[url]http://ump.waw.pl[/url]

Więcej szczegółów poniżej, w sekcji "Marker". W Permalinku można też zadać pytanie wyszukiwarce, konstruując je na przykład tak:

http://mapa.ump.waw.pl/ump-www/?q=Wroc%C5%82aw,,ATM
http://mapa.ump.waw.pl/ump-www/?q=Wroc%C5%82aw,Swobodna&zoom=16

Własne ślady

Przy pomocy parametrów url strony można wyświetlić na mapie własne dane wektorowe w postaci plików gpx lub gdb i w ten sposób przykładowo wyświetlić swoją trasę na mapie w iframe na swojej stronie. Szczegóły dotyczące sposobów umieszczania śladów na tle mapy opisano w artykule Prezentacja GPX na mapie online

Warstwy

W prawym górnym rogu mapy znajduje się przycisk (+) pod którym pojawia się lista dostępnych warstw. UMP@Mapnik jest podstawową warstwą zawierającą mapę UMP i jest wyświetlana jako domyślna. Dla porównania dostępna jest również warstwa z danymi z OpenStreetMap. Przy pomocy dodatkowej konfiguracji możliwe jest dodanie warstwy z mapami google. Inne warstwy są w celach testowych i mogą zostać usunięte.

Poza warstwami mogą wystąpić dodatkowe nakładki wektorowe. Mogą to być zbiory punktów POI lub warstwy do rysowania wielokątów/linii/punktów. Aktualnie na mapie UMP jest aktywna na stałe warstwa do rysowania markera. W przyszłości możliwe jest wzbogacenie o dodatkowe nakładki, które mogą być włączane lub wyłączane w menu warstw poprzez odpowiednie checkboxy.

Marker

Dla celów formularza oraz możliwości generowania mapek wskazujących jakiś punkt, została utworzona wcześniej wspomniana warstwa dla markera.

O ile strona z mapą została prawidłowo przygotowana, kliknięcie na mapie powoduje dodanie markera w danym punkcie. Przy okazji mogą zostać wypełnione odpowiednie pola formularza współrzędnymi geograficznymi punktu.

Poza tworzeniem nowego punktu mapka umożliwia również linkowanie do wcześniej przygotowanego markera. Służą do tego dodatkowe parametry strony:

  • mlat, mlon: współrzędne punktu markera do wyświetlenia
  • mbody: treść dymku (w uproszczonym BBCode) markera po najechaniu myszą lub kliknięciu.

Przykładowy link zawierający definicję punktu do narysowania po otworzeniu strony:

http://mapa.ump.waw.pl/ump-www/?zoom=7&lat=52.33&lon=19.9&layers=B00T&mlat=52.25609&mlon=20.96567&mbody=test%5bbr%5dmarkera

Bardziej złożony przykład

W mbody można użyć kilku predefiniowanych kodów BBCode, aby sformatować zawartość:

  • [br] - nowa linia
  • [b]tekst[/b] - pogrubienie
  • [i]tekst[/i] - pochylonym tekstem (italic)
  • [img]url_obrazka[/img] - obrazek
  • [url=www.*]tresc[/url], [url]http://ump.waw.pl[/url] - link
  • [email]mail@domena[/email] - link do wysłania maila

Dodatkowe ozdobniki

W pełnej wersji na mapie poza kontrolką nawigacyjną, przyciskiem warstw oraz permalinkiem znajdują się dodatkowe kontrolki. W lewym dolnym rogu znajduje się link do strony domowej UMP (Data by...) oraz status aktualności wyświetlanych danych mapowych. W prawym dolnym rogu kolejno od dołu widoczne są:

  • pozycja wskazywana przez kursor myszy
  • Permalink
  • orientacyjna skala aktualnego powiększenia

Opisy i linki do stron www punktu

Działają od sierpnia 2011. W "dymkach" wskazujących wyszukany punkt pokazują się komentarze umieszczone w źródłach danego punktu, oraz link do strony www punktu (o ile wpisany, oczywiście). Umieszczone w komentarzach linki do Flyspray (o formacie "FS#[numer]") oraz linki http:// będą działały w odpowiedni sposób. Opis składni plików źródłowych PNT i sposób wpisywania danych na stronie opisu formatu plików PNT. Nie są pokazywane "zakomentowane komentarze" czyli linijki zaczynające się podwójnym średnikiem. W rezultacie przykładowy punkt

;; KINA
; tanie bilety z kartą stałego klienta - FS#99999 nieczyne do końca roku
  51.00000, 21.00000, 0,Promyk,Krótka;9;+48115552233;url=http://promyk.miasto.pl/,Miasto,KINO

dostanie w "dymku" zachętę o tanich biletach i informację o remoncie, oraz link do swojej strony - ale nie będzie wypisana nazwa "sekcji" KINA.

Linki do rozkładów jazdy komunikacji miejskiej

Szerzej omówione tutaj.

Eksport widoku

Na razie tylko ręcznie, przykładowe linki:

https://mapa.ump.waw.pl/cgi/export.cgi?bbox=20.847,52.18,21.16,52.335&scale=120000&format=pdf
https://mapa.ump.waw.pl/cgi/export.cgi?bbox=21.00735,52.24677,21.01496,52.24916&scale=3386&format=png

Współrzędne dobieramy wg zasady lewy/dolny i prawy/górny punkt obszaru, umieszczając najpierw długość a później szerokość geograficzną. Parametr scale zgodnie z tym co się prezentuje w prawym dolnym rogu mapy (1:54k itp), obsługiwane wartości formatów: png, jpeg, pdf, svg, ps. Uwaga: svg, tym bardziej ps potrafi być dość duży przy większych wartościach scale, gdyż dane wektorowe nie są upraszczane. Ze względu na wielkość pliku chęć pobrania większych fragmentów mapy należy zgłosić na maila ump@ump.waw.pl

Bardzo dobrym sposobem na wyeksportowanie widoku jest też Mobile Atlas Creator, który w łatwy sposób umożliwia stworzenie pliku z dowolnego obszaru UMP i w dowolnej skali.

Należy tylko pamiętać, by w zakładce Tools/Settings/PaperAtlas rozmiar pliku ustawić na Selection.

Wyliczenie trasy

Bezpośrednio albo na mapie w zakładce "Trasy". Używanie intuicyjne. Na razie obsługuje tylko przejazd dla samochodów, oraz nie uwzględnia niektórych jednokierunków i zakazów.

Szczegóły Trasy.

Legenda

W tych okolicach umieszczamy przegląd wszystkich rodzajów elementów (drogi normalnie - w tunelu - na wiadukcie).

Statystyki

Tutaj.

Tryb inżynierski

Ten parametr powoduje, że w dymkach będą podawane informacje o źródłach danego obiektu. Wyłączyć funkcję można w ten sposób.

Ctrl + klik = informacja o lokalizacji linii

Alt + klik - informacja o lokalizacji punktu

Ctrl + Alt + klik = informacja o lokalizacji obszaru

Mapa UMP na Twojej stronie

Więcej: tutaj.

Do wyświetlania mapy w przeglądarce WWW wykorzystana została biblioteka OpenLayers, jednak można użyć dowolnej biblioteki tego rodzaju (np Google API). Kafelki mają odwzorowanie i numerację taką samą jak mapy Google czy OSM, więc programy innych firm wykorzystują także UMP, lub można je łatwo dostosować:

Dla ułatwienia umieszczania mapki na stronach przygotowany został kod javascript, który powinien ułatwić wstępną konfigurację. Nic jednak nie przeszkadza, aby zrobić po swojemu, wykorzystując jedynie adresy kafelków. W przygotowanej wersji wystarczy jednak umieścić minimalną ilość dodatkowych elementów, by cieszyć się mapą na swojej stronie.

Na marginesie: jak OSM blokuje zbyt zachłanne pobieranie kafelków.

TODO...

Wersja najprostsza

  • W części <head> strony dodanie skryptów:
 <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 <script src="http://mapa.ump.waw.pl/ump-www/lib/layers.js"></script>
 <script src="http://mapa.ump.waw.pl/ump-www/lib/map.js"></script>
  • W wybranym miejscu strony dodać div o id="map" i stylu wg. potrzeb:
 <div style="width:450px; height:350px; float:right" id="map"></div>
  • dodać do body w zdarzeniu onload wywołanie funkcji konfigurującej mapę:
 <body onload="initUMP();">

Dodatkowe elementy mapy

Prezentację śladów na tle mapy UMP opisano tutaj.

...TODO

  • toolbox
  • pola tekstowe
  • permalink z markerem

Dostosowanie konfiguracji mapy

Funkcja initUMP(divID,{klucz:wartosc,...}) przyjmuje dodatkowo dwa parametry, pozwalając łatwo dostosować zawartość mapy:

  • id div'a zawierającego mapę (domyślnie "map")
  • dodatkowa lista parametrów konfiguracyjnych

Bardziej złożony przykład wyglądałby więc tak:

 <html><head>
 <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 <script src="http://mapa.ump.waw.pl/ump-www/lib/layers.js"></script>
 <script src="http://mapa.ump.waw.pl/ump-www/lib/map.js"></script>
 </head>
 <body onload="initUMP('mapUMP', {simpleZoom:true, disableKeyboard:true,
           zoom:12, lat:52.24453, lon:21.00275, 
           mlat:52.24999, mlon:20.98318,mbody:'Przykładowy marker[br]wielolinijkowy'});">
 <div style="width:450px; height:350px; float:right" id="mapUMP"></div>
 </body></html>

Liczba dostępnych opcji powinna wzrastać w miarę rosnących potrzeb, jednak już teraz dostępne są:

  • disableControls:true - wyłączenie wszystkich kontrolek (tryb czystej mapy UMP)
  • simpleZoom:true - strzałeczki i uproszczona kontrolka zoom, bez podziałki (ZoomBar)
  • simpliestZoom:true - tylko +/-, globus, bez strzałek (działa również gdy disableControls:true)
  • disableKeyboard:true - wyłączenie obsługi klawiatury, aby uniknąć zmiany mapy przy edycji formularzy i pól tekstowych
  • lat,lon,zoom - domyślne położenie mapy, gdy nie podane w url'u
  • mlat,mlon - położenie początkowe markera
  • mbody: treść dymku markera po najechaniu myszą lub kliknięciu. Format taki sam jak dla parametru mbody w url'u. Honorowane jest kodowanie %xx znaków specjalnych (funkcja encodeURIComponent/decodeURIComponent w javascript).
  • permBase:'http://mapa.ump.waw.pl/ump-www/' - ustawienie części niezmiennej adresu url permlinka na wskazaną
  • enableGoogle:true - włączenie do wyboru warstw google (ulice, sat, hybryda). Wymaga dodania odpowiedniego pliku wpisu z właściwym kluczem dla Google API w sekcji head:
<script src="http://maps.google.com/maps?file=api&v=2&key=KLUCZ_GOOGLE_API" type="text/javascript"></script>

Własna mapa od podstaw

...TODO

OpenLayers

Jeżeli chce się korzystać z openlayers to wystarczy użyc klasy do OSM, czyli coś takiego:

osm = new OpenLayers.Layer.OSM()
ump = new OpenLayers.Layer.OSM("UMP",
"http://1.tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png", {numZoomLevels: 20,
alpha: true, isBaseLayer: false});
map.addLayers [ump, osm]

Google API

Możliwe, że zostanie dodane jakieś ułatwienie typu initUMP dla google, tymczasem przykładowe użycie UMP przy pomocy GoogleAPI (potrzebny klucz do wpisania zamiast KLUCZ_GOOGLE_API)

 <html><head>
 <script src="http://maps.google.com/maps?file=api&v=2&key=KLUCZ_GOOGLE_API" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[ //<>
  function load()
  {
    var lat=52.29;
    var lon=20.72;
    var zoom=7;
    if (!GBrowserIsCompatible())
        return;
    var copyOSM = new GCopyrightCollection("<a href=\"http://ump.waw.pl/\">UMP</a>");
    var copyOSM2 = new GCopyrightCollection("<a href=\"http://www.openstreetmap.org/\">OpenStreetMaps</a>");
    copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
    copyOSM2.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
    var tilesMapnik     = new GTileLayer(copyOSM, 1, 18, {tileUrlTemplate: 'http://tiles.ump.waw.pl/ump_tiles/{Z}/{X}/{Y}.png'});
    var tilesOSM     = new GTileLayer(copyOSM2, 1, 18, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
    var mapMapnik     = new GMapType([tilesMapnik],     G_NORMAL_MAP.getProjection(), "Mapnik");
    var mapOSM     = new GMapType([tilesOSM],     	G_NORMAL_MAP.getProjection(), "OSM");
    var map           = new GMap2(document.getElementById("map"), { mapTypes: [mapMapnik,mapOSM] });
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    map.enableScrollWheelZoom();
    map.setCenter( new GLatLng(lat, lon), parseInt(zoom));
    new GKeyboardHandler(map);
    map.enableContinuousZoom();
  }
  //]]>
  </script>
 </head>
 <body onload="load()" onunload="GUnload()">
 <div id="map" style="width:800px; height:600px; border:1px solid gray"></div>
 </body></html>

WordPress

[osm_map lat="52.000" long="21.000" control="scaleline,scale" zoom="14" width="500" height="500"
extmap_type="OSM" extmap_name="mapUMP"
extmap_address="http://tiles.ump.waw.pl/ump_tiles/${z}/${x}/${y}.png"
extmap_init="numZoomLevels: 17, transitionEffect: 'resize', sphericalMercator: true" type="ext"]

Szczegóły techniczne renderingu

Podsumowanie

Większość wiedzy potrzebnej do przygotowania wersji WWW map UMP zaczerpnąłem ze stron http://wiki.openstreetmap.org/wiki/Main_Page gdzie praktycznie krok po kroku zostało opisane jak przygotować własną mapę WWW. Głównym problemem było więc przeniesienie kodów z formatu *.mp do *.osm oraz przystosowanie konwencji UMP do Mapika, którego gotowa konfiguracja zoptymalizowana była mocno pod kątem OpenStreetMap. Przez wykorzystanie gotowych komponentów możliwe było bardzo szybkie przygotowanie mapy online UMP (w weekendy i w wolnych chwilach przez 1-2 miesiące), a efektem ubocznym jest duże podobieństwo wyglądu do map OSM :) .

Przygotowanie pliku importu *.osm.gz

Mapa generowana jest na podstawie tych samych źródeł, z których powstają wersje na odbiorniki Garmin. Plik w formacie polskim (*.mp) jest wstępnie przygotowywany (skrypt.sh), a następnie konwertowany do pośredniego formatu xml zgodnego z OSM na podstawie reguł ~/mapnik/mp2osm/ump-cvs/types.xml.

Ze względu na wiele różnic pomiędzy używanymi typami i konwencjami w UMP oraz OSM, otrzymywany plik jest uproszczoną wersją dostosowaną dla celów rysowania. W związku z tym niektóre dane nie są w nim zawarte oraz może zawierać dodatkowe modyfikacje, które pozwoliły zamaskować różnice między formatami. Przykładowo OSM zawiera zaledwie kilka typów określających miasto, tymczasem w UMP jest ich kilkanaście w zależności od wielkości.

Do konwersji użyty został programik oparty o źródła pobrane z http://code.google.com/p/mp2osm/. Modyfikacje konwertera obejmowały zarówno zmiany kodu jak i definicji reguł konwersji.

Aktualnie generujemy u Marcina. Plik ump.osm.gz (po spakowaniu) zajmuje ok. 900MB i stanowi podstawę do renderingu kafelków wyświetlanych w przeglądarce WWW.

Wymagania - ? (spytać Tadka?)

Renderowanie

Dalej, uzyskany plik xml jest przetwarzany tak samo jak w przypadku OpenStreetMap, co zostało opisane dokładnie na właściwym Wiki: http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map

Oprogramowanie serwera renderującego obejmuje:

  • Mapnik - silnik renderujący kafelki
  • Postgresql + PostGIS - baza danych przestrzennych, do której importowane są dane
  • osm2plsql - importer danych z OSM do bazy postgis
  • apache2 + mod_tile - moduł apache2 wykorzystujący Mapnik'a do dynamicznego generowania kafelków i obsługi cache

Modyfikacje tego etapu polegały jedynie na dostosowaniu definicji stylów dla specyficznych warunków UMP oraz poprawione zostały niektóre parametry odpowiedzialne za poziom wyświetlania oraz grubość dróg. Różnice można zaobserwować porównując warstwę UMP i OSM.

Ponieważ liczba kafelków obejmujących samą Polskę, nie wspominając o Europie, przekracza kilka milionów, tylko część z nich jest wstępnie wygenerowana, reszta tworzona jest dynamicznie na żądania. W momencie update'u istniejące kafelki są ponownie odrysowywane równolegle z obsługą zapytań WWW.

Przebiega to podobnie jak w przypadku OSM: http://wiki.openstreetmap.org/wiki/Slippy_Map według reguł w ~/mapnik/mapnik_style/settings dla warstwy normalnej oraz settings-stg dla warstwy hybryda.

Wymagania na renderer: serwer renderd + apache z odpowiednim modułem oraz baza danych (postgres + postgis) blisko renderera. Lubi mieć dużo CPU. Wystarczy 2 GB ramu. Wymagania na cache: java, dużo pasma.

Jeden cache może korzystać z kilku rendererów. Aktualnie mamy dwa renderery (u Marcina wyższe warstwy oraz testowy, u Jacka dwie najniższe).

UWAGA w 2014 były prace nad stylem do Leafleat, łącznie z budynkami 3D. Opisane tutaj.

Dla opornych

  • testy rób na rendererze testowym: marcom......:1080
  • Zakładki w pierwszym widoku mapy (marker, formularz, trasy)
    • na serwerze mapy po prostu ~/mapnik/ump-www/index.html
      uwaga: katalog /trasy/ zawiera starą wersję rutera, tylko samochodową.
  • Dodanie linków do rozkładów jazdy dla kolejnych miast
    • na rendererze katalog ~/mapnik/ump-www/cgi/ pliki search.pl (dla szukania z formularza) oraz pquery.pl (dla klikania w mapę)
      szukaj kilku linijek kodu z urlami innych miast
  • Jeśli punkt wyszukuje się jako "POI", a nie jako typ ogólny
    • na rendererze katalog ~/mapnik/ump-www/cgi/ pliki search.pl (dla szukania z formularza) oraz pquery.pl (dla klikania w mapę)
      definicja my %umptypes =
  • nowa ikonka na przykładzie kirkutów, stacji Shell i weterynarzy (w trakcie rozpoznawania)
    • zastanów się, jak wyłuskać konkretne elementy i na jaką kombinację tagów OSM ma być tłumaczony
      • Typ=KIRKUT to będzie landuse=cemetery; religion=jewish
      • Label=Shell.*
      • Typ=WETERYNARZ (Type=0x3002) to będzie amenity=veterinary
      • (teraz, 7.12, dodaje 10e15 kolej podziemna jako railway=rail/tunnel=yes)
    • czasem trzeba pomóc konwersji ~/mapnik/mp2osm/ump-cvs/skrypt.sh dodając (&\n) już na poziomie mp2osm tagi, które pomogą rozróżnić punkty później:
      • -e 's/^Typ=KIRKUT$/&\nlanduse=cemetery\nreligion=jewish\nz_order=-12/g' \ (nie jestem pewien, po co jest nz_order)
      • stacje benzynowe nie potrzebują
      • -e 's/^Type=0x3002$/&\namenity=hospital/g' \
        -e 's/^Typ=WETERYNARZ$/&\namenity=veterinary/g' \
      • ale np. paczkomat nie potrzebuje "wspomagania", bo nie ma zmiany typu garminowego ani OSM, a rozróżnienie jest na podstawie ump:typ
    • i teraz już możesz konwertować: w ~/mapnik/mp2osm/ump-cvs/types.xml
      • dla type garmin-type="0x6403" (cmentarz)
        <osm-tag tag="landuse" value="cemetery" />
        <osm-tag tag="religion" value="%religion%" />
      • paliwa nie potrzebują
      • dla type garmin-type="0x3002" (szpitale)
        <osm-tag tag="amenity" value="%amenity%" />
    • narysuj obrazek do pokazywania - na rendererze wgraj plik do ~/mapnik/mapnik_style/symbols_ump/ (preferowany png - xpm nie działa)
    • dodaj wyświetlanie obrazka dla konkretnych kombinacji tagów: na rendererze dopisz do któregoś pliku w ~/mapnik/mapnik_style/settings/* oraz settings-stg/*
      • kirkut
<Rule>
 <MaxScaleDenominator>10000</MaxScaleDenominator>
 <MinScaleDenominator>2500</MinScaleDenominator>
 <Filter>[landuse]='cemetery' and not [religion] = 'jewish'</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/6403_Cemetery_Cmentarz_day.png" type="png" width="24" height="24" />
</Rule>
<Rule>
 <MaxScaleDenominator>2500</MaxScaleDenominator>
 <Filter>[landuse]='cemetery' and not [religion] = 'jewish'</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/6403_Cemetery_Cmentarz_day.png" type="png" width="24" height="24" allow_overlap="true"/>
</Rule>
<Rule>
 <MaxScaleDenominator>5000</MaxScaleDenominator>
 <Filter>[landuse]='cemetery' and [religion] = 'jewish'</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/kirkut.png" type="png" width="24" height="24" allow_overlap="true"/>
</Rule>
      • benzyny:
<Rule>
 <MaxScaleDenominator>50000</MaxScaleDenominator>
 <MinScaleDenominator>5000</MinScaleDenominator>
 <Filter>[amenity]='fuel'</Filter>
 <PointSymbolizer file="&ump_symbols_path;/2f01_Petrol-Station_Stacja-Benzynowa_day.png" type="png" width="24" height="24" />
</Rule>
<Rule>
 <MaxScaleDenominator>5000</MaxScaleDenominator>
 <Filter>[amenity]='fuel' and not ([name].match('^BP.*') or [name].match('^Shell.*'))</Filter>
 <PointSymbolizer file="&ump_symbols_path;/2f01_Petrol-Station_Stacja-Benzynowa_day.png" type="png" width="24" height="24" allow_overlap="true"/>
</Rule>
<Rule>
 <MaxScaleDenominator>5000</MaxScaleDenominator>
 <Filter>[amenity]='fuel' and [name].match('^BP.*')</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/BP_16x16.png" type="png" width="16" height="16" allow_overlap="true"/>
</Rule>
<Rule>
 <MaxScaleDenominator>5000</MaxScaleDenominator>
 <Filter>[amenity]='fuel' and [name].match('^Shell.*')</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/Shell_16x16.png" type="png" width="16" height="16" allow_overlap="true"/>
</Rule>
      • weterynarz
<Rule>
 <MaxScaleDenominator>10000</MaxScaleDenominator>
 <Filter>[amenity]='veterinary'</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/wet.png" type="png" width="16" height="16"  />
</Rule>
      • paczakomat
<Rule>
 <MaxScaleDenominator>10000</MaxScaleDenominator>
 <MinScaleDenominator>2500</MinScaleDenominator>
 <Filter>[amenity]='post_office' and not [ump:typ]='PACZKOMAT'</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/2f05_Post-Office_Urzad-Pocztowy_day.png" type="png" width="24" height="24"  />
</Rule>
<Rule>
 <MaxScaleDenominator>2500</MaxScaleDenominator>
 <Filter>[amenity]='post_office' and not [ump:typ]='PACZKOMAT'</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/2f05_Post-Office_Urzad-Pocztowy_day.png" type="png" width="24" height="24" allow_overlap="true" />
</Rule>
<Rule>
 <MaxScaleDenominator>5000</MaxScaleDenominator>
 <Filter>[amenity]='post_office' and [ump:typ]='PACZKOMAT'</Filter>
 <PointSymbolizer file= "&ump_symbols_path;/paczkomat.png" type="png" width="20" height="20" allow_overlap="true" />
</Rule>
    • uwaga: poziom 2500 to skala 50 metrów na mapie www
    • poczekaj "do jutra", ewentualnie przerestartuj renderer testowy (killall renderd; poczekać 30 sekund; renderd powinien się sam uruchomić)

Pomysły na przyszłość

legenda

czyli okienko z opisami co znaczą jakie kolory / elementy

Nie-okienkowo zrobiłem gdzieś daleko - wersja ułomna, będzie się ubogacać (<- nowomowa kościelna), mam nadzieję.

drobne błędy

nazwa terenu przemysłowego się nie wyświetla

  1. podnieść Openlayers do 2.12? (wsparcie tabletów)
  2. sugestie zmiany (jakiej?) wyglądu:
  3. sprawdzić, czy można przenieść część serwowania kafelków na serwer nie u Jacka
    • przenieść generację konwersji mp->osm do Tadka
  4. bojki się nie wyświetlają, ale się wyszukują http://mapa.ump.waw.pl/ump-www/?q=,,watpliwy albo przez klikanie z Alt
  5. zgłoszenia na FS

MAPA WWW - NOWE FUNKCJE (bardziej odległe)

  1. wyświetlanie znaków zakazu wedle pomysłu Michała Górskiego (działają "publicznie" od 22.12.2012) (i limitu prędkości/gabarytów?)
  2. widok domków 3D - coś jak osmapa.pl http://osmapa.pl/?lon=21.00603&lat=52.23146&zoom=17&map=1&o=FFFF
  3. osmapa wprowadziła coś jak pokazywanie warstw czy też widoki z akcentowaniem różnych aspektów http://osmapa.pl/w/

Marcin Rudowski