Jak zrobić mapkę

W jednym z wpisów na blogu przedstawiłem mapkę pomników upamiętniających działania Armii Czerwonej w czasie II wojny światowej na obecnym terytorium Polski. Mapka od chwili jej powstania ciągle się dezaktualizuje. Na dodatek nie da się po niej nawigować — jest zwykłym zrzutem ekranu w niskiej rozdzielczości (a ta śmieszna mordka koło Radomia to ikona ładującego się po to by przyciąć zrzut GIMPa).

sowpom

Idealnie byłoby wstawić na bloga odpowiedni kod HTML/JavaScript by móc nawigować i dostawać szczegółowe informacje o obiektach klikając na gwiazdki, ale na WordPress.com nie jest to możliwe — ze względów bezpieczeństwa. Nic nie stoi jednak na przeszkodzie, by każdy mógł oglądać w pełni funkcjonalną mapkę na swoim komputerze czy postawić ją na serwerze. Potrzebne będzie do tego kilka plików, wszystkie dostępne tutaj.

Plik HTML — sowpom.htm

Punktem wyjściowym do stworzenia mapki był dla mnie jeden z przykładów na wiki OpenStreetMap (en). Pierwszym krokiem było skopiowanie podanego kodu i zmodyfikowanie go. Dodałem kod css ułatwiający podzielenie strony na część lewą (mapka) i prawą (legenda). Zapisane w kodzie JavaScript współrzędne i zoom zostały ustawione tak, by przy starcie widok obejmował całą Polskę. W przykładzie tworzona była tylko jedna warstwa, tu dostepne są dwie. Jedna zawiera dane istniejących pomników, druga usuniętych. Dane są oczywiście niekatualne i niekompletne.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="pl">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>

    <style type="text/css">
      .mleft {float: left; width: 70%;}
      .mright {width: 28%; float: right; margin-left: 1em;}
    </style>
    
    <title>Pomniki sowieckie w Polsce</title>
    
</head>

<body>

    <h1>Pomniki sowieckie w Polsce - stan na rok 2009</h1>
  
<div class="mleft">
 <div id="mapdiv"></div>
 <p>&nbsp;Mapa &copy; <a href="http://www.openstreetmap.org/copyright">Open Street Map contributors</a></p>
 <p>&nbsp;Dane: Rada Ochrony Pamięci Walk i Męczeństwa</p>
 <p>&nbsp;Kompilacja: &copy; szescstopni na licencji CC-BY-SA
</div>
 
<div class="mright">

<h3>Legenda</h3>

<p><img src="star1.png"> istniejący</p>
<p><img src="removed.png"> usunięty</p>

<p>Kliknij na znaczek plus w górnym prawym rogu mapy aby przełączyć warstwy</p>
<p>Kliknij na ikonke na mapie by zobaczyć szczegółowe informacje o pomniku</p>

</div>
  
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    bounds = new OpenLayers.Bounds(0,200,0,200);
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var mons = new OpenLayers.Layer.Text( "Istniejące",
                    { location:"sovmon.txt",
                      projection: map.displayProjection
                    });
    var remmons = new OpenLayers.Layer.Text( "Usunięte",                    
                    { location:"sovmonr.txt",
                      projection: map.displayProjection
                    });
                    
    map.addLayer(mons);
    map.addLayer(remmons);
    
 // create layer switcher widget in top right corner of map.
   var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
   map.addControl(layer_switcher);

    //Set start centrepoint and zoom    
    var lonLat = new OpenLayers.LonLat( 19.490, 52.066)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=6;
    map.setCenter (lonLat, zoom);  
 
  </script>


 </body></html>

Dane — sovmon.txt, sovmonr.txt

Struktura plików z danymi do warstw jest prosta. Pierwsza linia to nagłówek, wszystkie następne to dane, ostatnia musi być pusta. Dane można modyfikować, na przykład przenosząc pozycje z pliku „istniejące” do „usunięte” lub modyfikując informacje. Aż prosi się o edycję pozycja o numerze 91.10 — pozostawiłem oryginalną niepoprawną nazwę miejscowości, która naprawdę nazywa się Węgrzce, a nie Węgrzyce. Takich baboków jest w danych jeszcze trochę.

Każda linia (w komputerowym nazywa się to „rekord”) zawiera kilka elementów (w komputerowym „pola”) rozdzielonych tabulatorami. Te tabulatory są ważne, jeżeli na jakimś etapie przetwarzania danych je zgubisz to mapka nie będzie działała. Umieszczenie tu na blogu tekstu rozdzielonego tabulatorami jest niemożliwe — zostałyby zastąpione spacjami. Tu dostępne są pliki tekstowe, w których wszystkie TABy zostały zastąpione pionową kreską (|). Wystarczy zamienić | na TAB i gotowe.

Kolejne pola to:

lat — szerokość geograficzna
lon — długość geograficzna
title — tytuł, tu numer identyfikacyjny
description — opis
icon — nazwa pliku ikony
iconSize — rozmiar ikony
iconOffset — przesunięcie ikony

W wielu przypadkach współrzędne lokalizacji zostały wygenerowane automatycznie (przez odpytywanie serwisu Nominatim na OpenStreetMap — o tym być może napiszę później) i wskazują na środek miejscowości lub punkt środkowy ulicy, przy której znajduje sie pomnik. Jeżeli komuś zechce się doprecyzować współrzędne choćby jednego z punktów, proszę dać znać w komentarzach.

Opis standardowo zaczyna się od numeru identyfikacyjnego (z PDFu ROPWiM), miejscowości, nazwy pomnika i informacji o jego stanie. W dwóch przypadkach — usunięty pomnik w Katowicach i istniejący pomnik w Sanoku — do opisu wstawiłem link do artykułu na Wikipedii opisującego dany pomnik. Tylko po to, by pokazać, że się da.

Ikony

W plikach z danymi pojawiają się różne nazwy ikon — odzwierciedlają one różne rodzaje obiektów (pomnik, czołg, tablica etc.). Nie miałem czasu przygotować odpowiednich ikon, więc na razie na moim dysku wszystkie są kopią jednej — „star.png” (tzn. „tank.png” jest kopią „star.png” itd.). Jeżeli komuś się chce, może przygotować ikony „table.png”, „stone.png”, „obel.png” i „tank.png”. Nic nie stoi na przeszkodzie, by ikony miały inne rozmiary i format — można dowolnie eksperymentować.

Na razie stworzyłem tylko te cztery ikony:

rstar star.png, star1.png — użyta do pokazwania istniejących pomników, docelowo dla pomników, których stan jest oznaczony jako dobry

star2 star2.png — na razie nie używana, docelowo dla pomników, których stan jest oznaczony jako średni

star3 star3.png — na razie nie używana, docelowo dla pomników, których stan jest oznaczony jako zły

removed removed.png — użyta do pokazywania zlikwidowanych pomników

Podsumowanie

  • Skopiuj plik html (z tej strony)
  • Ściągnij ikony (z tej strony)
  • Ściągnij pliki z danymi (dostępne tu)
  • Ściągnięte pliki umieść w jednym katalogu
  • Plik „star.png” skopiuj jako „table.png”, „stone.png”, „obel.png” i „tank.png”
  • W plikach z danymi zamień „|” na tabulatory
  • Załaduj plik html do przeglądarki (poleceniem „otwórz plik”)

Problemy? Pytaj w komentarzach lub na Twitterze

Możliwe usprawnienia

Istniejące dane można łatwo przekształcić tak, by każdy opis zawierał link do lokalizacji obiektu na OpenStretMap czy GoogleMaps. Możliwośc przejścia do zewnetrznej mapy ułatwiłaby sprawdzenie poprawności podanych współrzędnych, a także ewentualne dodanie obiektu do OSM.

Wykorzystując dane w opisie można pokazać informacje o stanie pomnika — albo tworząc osobne warstwy, albo też wykorzystując odpowiednie ikony.

Przygotowanie danych

Fot. Robert Niedźwiedzki na licencji CC BY-SA 3.0

Danymi wejściowymi był plik PDF ściągniety ze strony „Rzeczypospolitej”. Z pewnością nie są one kompletne — nie ma w nich np. tego napisu na filarze wiaduktu nad autostradą A4 na odcinku Wrocław-Legnica: Водрузим над Берлином знамя победы (Zatkniemy nad Berlinem sztandar zwycięstwa). Autor zdjęcia dokładnie określił położenie napisu więc dołączyłem go do danych, nadając identyfikator zupełnie niepodobny do identyfikatorów ROPWiM.

Skalę problemów związanych z przetworzeniem PDFa sugeruje ten fragment, który wygląda jak zagadka z rodzaju „połącz liniami pasujące elementy”:

pompdf2

Cały proces przetwarzania i lepienia danych był dość długotrwały i nużący. Jakaś Pani Halinka, która wrzuciła dane do PDFa, zadbała o to, by nie dało się go sensownie i łatwo przetworzyć na dane jadalne dla innych programów. Jeżeli ktoś wyrazi zainteresowanie, to postaram się w kolejnym wpisie dokładnie odtworzyć kroki, które doprowadziły do wygenerowania plików tekstowych z danymi. Ot, kilka programików w Pythonie.

Tu możesz zostawić komentarz, ale może najpierw przeczytaj "zasady komentowania".

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s


%d bloggers like this: