Wprowadzenie
Mapa cyfrowa może być podstawą wielu ciekawych projektów humanistyki cyfrowej. Warto nauczyć się budować ją od postaw z wykorzystaniem dostępnych zasobów i narzędzi. Umiejętność złożenia mapy z wybranych komponentów - danych geograficznych, warstw czy markerów - pozwala nam w pełni wykorzystać potencjał tej formy prezentacji informacji.
Cele lekcji
Celem lekcji jest zdobycie podstawowych umiejętności w prezentacji danych geograficznych na mapie cyfrowej, przy wykorzystaniu popularnych narzędzi: OpenStreetMap jako źródła warstw geograficznych (map provider) i biblioteki Leaflet, służącej do integrowania warstw geograficznych z danymi, które chcemy na mapie prezentować.
Efekty
Efektem naszej pracy będzie dynamiczna, interaktywna mapa cyfrowa z prezentacją danych na temat warszawskich zabytków lat 90. - skorzystamy z informacji o obiektach udostępnianych przez ARCHIwum Warszawy Lat 90.
Wymagania
Do skorzystania z lekcji przyda się darmowe konto w serwisie CodePen, pozwalającym w łatwy sposób edytować i publikować strony internetowe z dowolnym kodem. Z mapami i danymi pracować będziemy w języku JavaScript, a strukturę naszej strony zdefiniujemy w HTML. Aby zbudować mapę w ramach tej lekcji nie jest wymagane wcześniejsze doświadczenie w programowaniu.
Wizualizacje z wykorzystaniem OpenStreetMap i Leaflet mogą być tworzone także w języku R. Metodom pracy z pakietem leaflet poświęcimy kolejną lekcję.
Część merytoryczna
Naszą lekcję podzielimy na kilka wątków. W pierwszym poznamy podstawy systemów informacji geograficznej i strukturę mapy cyfrowej. W drugim nauczymy się korzystać z interfejsu CodePen, gdzie budować będziemy naszą mapę. Trzeci wątek poświęcony będzie już bezpośrednio podstawowej pracy z mapą (umieszczanie jej na stronie internetowej z wykorzystaniem Leaflet), w czwartym - dodamy do niej kilka punktów reprezentujących zabytki lat 90.
System informacji geograficznej
Zastanówmy się, ile pracy, narzędzi i zasobów koniecznych jest do umieszczenia w internecie mapy cyfrowej. Potrzebujemy zdjęć satelitarnych i lotniczych, które następnie muszą zostać przypisane do określonych punktów geograficznych. Do tego punkty geograficzne to nie przecież nie jedyne informacje, jakie możemy odczytać z mapy: drogi i ulice, granice krajów, regionów czy miast, rzeki i jeziora, rodzaje lasów, szlaki piesze - rodzajów map jest naprawdę wiele. To wszystko musi być też w jakiś sposób dostępne online - konieczny jest system pozwalający nie tylko na dynamiczne wyświetlanie mapy oraz rozwiązania umożliwiające prezentację na nich dodatkowych danych. Te wszystkie elementy budują system informacji geograficznej (Geographical Information System, GIS).
Rozwiązania GIS wykorzystywane są szeroko w projektach humanistyki cyfrowej. Świetnym przykładem jest The Grub Street Project, realizowany na Uniwersytecie Saskatoon w Kanadzie. Jego celem jest opisanie gospodarczego i kulturalnego życia nowożytnego Londynu z wykorzystaniem - między innymi - map i danych geograficznych. Mapy są tutaj interfejsem i kontekstem dla wiedzy pozageograficznej.
W projekcie Instambul Urban Database mapy historyczne, umieszczane w kontekście map współczesnych, pozwalają badań ewolucję miasta.Cyfrowa postać mapy umożliwia dodawanie do niej informacji, których oryginalnie nie zawierała - możliwość pracy na wielu alternatywnych lub uzupełniających się warstwach to jedna z podstawowych cech map cyfrowych. Jakie są inne ich właściwości?
Dlaczego mapy cyfrowe?
Mapy cyfrowe mają szereg przewag nad mapami tradycyjnymi:
- dostępność i łatwość aktualizacji: mapy cyfrowe mogą być łatwo aktualizowane, a aktualizacje są od razu widoczne online. To idealne rozwiązanie zwłaszcza dla map dokumentujących bieżące procesy i wydarzenia, np. rozwój sieci drogowej, przemieszczanie się ludności w mieście, protesty czy konflikty zbrojne,
- łączenie danych: mapa cyfrowa może być przestrzenią, na której prezentowane są obok danych geograficznych także dane atrybucyjne (attrubute data). Przykładowo: punkty na mapie oznaczające wybrane miejscowości mogą udostępniać (po kliknięciu) informacje o liczbie ludności, roku uzyskania praw miejskich itp. Pracując z różnymi warstwami mapy możemy prezentować i zestawiać ze sobą dane (mashup),
- łatwe dostosowywanie się do preferencji użytkowniczki i użytkownika: mapa cyfrowa może udostępniać wiele skali, kolorów, rodzajów warstw - do wolnego wyboru przez osobę korzystającą,
- mapa może korzystać z danych kontekstowych, np. danych o lokalizacji użytkownika i dzięki temu udostępniać bardziej sprofilowane informacje.
Wadą map cyfrowych jest na pewno to, że do prawidłowego działania zazwyczaj wymagają one dostępu do internetu (prezentacja map cyfrowych offline czy ich archiwizacja jest trudna). Wielość dostępnych warstw i bogactwo informacji udostępnianych za pomocą map cyfrowych może powodować błędy w ich interpretacji (np. kiedy na historyczną mapę nakładamy współczesne informacje).
Pamiętajmy też, że każda mapa jest interpretacją, a nie neutralnym odwzorowaniem rzeczywistości. Świetnie pokazuje to witryna The True Size Of, ujawniająca uproszczenia i ograniczenia jednego z powszechnie przyjętych modeli mapy świata:
Więcej o odwzorowaniach kartograficznych przeczytać można na Wikipedii.
Struktura naszego projektu
Aby pokazać w internecie mapę zabytków architektury lat 90., musimy zorganizować sobie własny GIS. Oto struktura naszego systemu:
- źródło danych o obiektach: projekt ARCHIwum Warszawy Lat 90.,
- źródło mapy (siatka punktów 2D reprezentująca punkty geograficzne oraz warstwa informacyjna) - OpenStreetMap,
- strona internetowa, na której będzie dostępna nasza mapa - CodePen,
- umieszczenie mapy na stronie oraz zarządzanie interakcjami: HTML, JavaScript, Leaflet.
OpenStreetMap nie jest jedynym dostępnym otwartym providerem map. Oczywiście moglibyśmy użyć w naszym projekcie Google Maps, jednak nie warto tego robić: Google Maps jako źródło danych geograficznych to provider płatny, a dane są zamknięte. OpenSteetMap to dane udostępniane na wolnych licencjach z dbałością o prywatność użytkowników i użytkowniczek. To projekt wyjątkowy także dlatego, że mapy rozwijane są przez społeczność - czasem określa się go jako Wikipedię dla map. W pracy z mapami cyfrowymi skorzystać można też z usługi MapBox, która jest płatna od określonego poziomu użycia danych.
Zwróćmy uwagę, że korzystać będziemy z map współczesnych. Temu, jak przygotować cyfrową mapę historyczną, poświęcimy już inną lekcję.
Podstawy pracy w CodePen
CodePen to serwis internetowy, który umożliwia tworzenie, udostępnianie i przeglądanie kodu HTML, CSS i JavaScript. To świetne narzędzie do eksperymentów z publikacjami online - aby z niego skorzystać, potrzebujemy jedynie przeglądarki. Odpada konieczność instalowania edytora programistycznego i serwera, pozwalającego na opublikowanie stron. Naszymi projektami przygotowanymi w CodePen możemy dzielić się z innymi, po prostu udostępniając link. CodePen umożliwia podgląd na żywo zmian dokonywanych w projekcie oraz możliwość dołączania do niego gotowych bibliotek - skorzystamy z tej opcji w naszej pracy. Musimy jednak najpierw zarejestrować się w serwisie i zalogować się - dzięki temu będziemy mogli zapisać własną pracę i udostępnić ją innym.
W interfejsie CodePen znajdują się cztery okna. Ich układ można zmieniać za pomocą ikony w prawym górnym rogu. Największe okno to podgląd bieżącej pracy. Okno HTML pozwala na umieszczenie struktury i treści strony - korzystamy tam z tagów HTML, tak jak przy edycji zwykłej strony WWW czy nawet wpisu na blogu. Okno Kaskadowych Arkuszy Stylów (Cascading Style Sheets, CSS) pozwala na zaprojektowanie układu i estetyki strony. Okno JavaScript umożliwia pisanie skryptów, które będą interpretowane przez przeglądarkę - za ich pomocą możemy ściągać na stronę dane z API albo pracować z mapą z wykorzystaniem biblioteki Leaflet 😎.
Warto zauważyć, że zmiany w którymkolwiek z okien edytora od razu przekładają się na to, co widzimy na podglądzie strony. Ułatwia to eksperymentowanie. Jeśli zepsujemy nasz projekt, możemy zacząć od początku i stworzyć sobie nowy.
Niezbędna struktura HTML
Język HTML służy do strukturyzowania informacji umieszczanych na stronach internetowych. Za jego pomocą możemy zatytułować naszą stronę i przygotować miejsce, do którego wkleimy interaktywną mapę:
<h1>Zabytki Warszawy lat 90.</h1>
<div class="intro">Mapa prezentuje wybrane obiekty ze zbiorów <a href="https://archiwumlat90.pl/">ARCHIwum Warszawy Lat 90.</a></div>
<div id="map"></div>Zwróćmy uwagę, że:
- wszystkie elementy (tagi): h1, div czy a, występują w parach (otwarcie, np. <h1> i zamknięcie - </h1>),
- elementy mogą mieć atrybuty, np. class czy id o różnych wartościach (intro, map). Do tych atrybutów, tak samo jak do nazw elementów, możemy odwoływać się w kodzie CSS i JavaScript,
- element a buduje link (hiperłącze, odnośnik) - za pomocą atrybutu href podajemy adres docelowej strony.
Musimy teraz skopiować nasz kod HTML do okna w CodePen. CodePen integruje kod ze wszystkich okien edytora i generuje na jego podstawie podgląd strony - w standardowej stronie publikowanej online elementy te znajdują się w jednym dokumencie HTML lub są importowane (zagnieżdżane) z zewnętrznych plików CSS i JS.
CSS: trochę estetyki
Kaskadowe Arkusze Stylów (CSS) pozwalają nam nadać strukturze HTML dowolną estetykę. Możemy nadawać cechy wybranym elementom albo całej stronie. Spróbujmy dodać taki kod do okna CSS:
body {
background: pink;
}
a {
color: purple;
}
.intro {
margin-bottom: 10px;
}
#map {
border: 1px solid #000000;
height: 80vh;
}Zwróćmy uwagę, że:
- kod CSS składa się z selektorów (np. body, .intro) oraz definicji stylu (np. color: purple;),
- selektory mogą przyjmować różną postać - nazwy elementu (body), jego klasy - .intro czy identyfikatora - #map,
- pink, purple i #000000 to definicje kolorów, przy czym ostatnia wykorzystuje zapis szesnastkowy,
- określając marginesy czy wysokość wybranego elementu możemy korzystać z wartości bezwzględnych (np. 10px) i relatywnych (80vh to 80 proc. bieżącej wysokości okna przeglądarki),
- w naszym CSSie odwołujemy się do selektora body, którego nie ma w naszym kodzie HTML. CodePen dodaje go za nas, a my edytujemy wszystko, co znajduje się wewnątrz niego.
W kontenerze div o identyfikatorze map umieścimy naszą mapę. Leaflet, z którego korzystamy, wymaga, aby wysokość tego elementu była ustawiona.
JavaScript: dane i mechanizmy
Jak pamiętamy, System Informacji Geograficznej to zbiór wielu elementów. OpenStreetMap (jako map provider) zapewni nam dostęp do dynamicznie wyświetlanych warstw mapy. Gdybyśmy chcieli wyświetlać mapę jako plik graficzny, miałby on olbrzymie rozmiary (pamiętajmy, że możemy zmieniać skalę mapy!), dlatego OSM dostarcza mapę w postaci skalowalnych płytek (tiles). Płytki mapy - w naszym przypadku - będa miały postać zwykłych plików rastrowych. Oto przykładowa płytka - zwróćmy uwagę na schemat jej adresu URL, którego elementem jest skala oraz koordynaty X i Y (mapa jest przecież obiektem dwuwymiarowym):
https://tile.openstreetmap.org/{zoom}/{x}/{y}.pngManipulując adresem, możemy manipulować skalą i koordynatami:
Serwer OpenStreetMap przetwarza koordynaty geograficzne (długość i szerokość geograficzną) na punkty x i y w prostokącie, dynamicznie dogrywając kafelki z warstwą mapy. Za pomocą Leaflet, biblioteki, z której korzystać będziemi w języku JavaScript, możemy korzystać z tych danych i zasobów. Leaflet zapewni nam też warunki do zaprogramowania interakcji z naszą mapą - będziemy chcieli, żeby po kliknięciu w punkt reprezentujący położenie zabytku pojawiła się informacja o jego nazwie.
Dodajemy Leaflet do projektu
CodePen pozwala w łatwy sposób skorzystać z wielu dostępnych bibliotek JavaScript. Także z Leaflet - musimy tylko umieścić tę bibliotekę w projekcie. W tym celu klikamy w ikonę koła zębatego w prawym górnym rogu okna JavaScript - w ten sposób otworzymy panel ustawień.
W module Add External Scripts/Pens wpisujemy leaflet i kliknięciem dodajemy go do projektu. CodePen ściągnie bibliotekę z podanego adresu URL.
Nie zapomnijmy o zapisaniu nowych ustawień!
Leaflet to jednak nie tylko JavaScript, ale też kod CSS, określający wygląd mapy i porządkujący układ kafelek. Dlatego musimy także ten element biblioteki dodać do projektu. Kliknijmy ikonę koła zębatego w oknie CSS - niestety nie możemy tam łatwo wyszukać pliku CSS Leafleta, dodajmy go więc ręcznie. Adres URL tego pliku to:
https://unpkg.com/leaflet@1.9.4/dist/leaflet.cssMusimy podać ten adres w panelu Add External Stylesheets/Pens:
Mamy już bibliotekę Leaflet w naszym projekcie. Pora z niej skorzystać i wyświetlić naszą mapę. Do tego potrzebować będziemy struktury HTML (mamy ją już) oraz JavaScriptu - ten kod musimy dopiero napisać.
Umieszczamy mapę na stronie
Leaflet udostępnia prosty tutorial, pokazujący, w jaki sposób umieścić mapę w wybranym elemencie strony. Zmodyfikujmy trochę podany tak kod, żeby bardziej pasował do naszego projektu. Będziemy pracować w oknie JavaScript, bo z Leafleta korzystamy właśnie w tym języku.
Jak pamiętamy z lekcji poświęconej wykresom w R, rozmaite cyfrowe wizualizacje można składać z wielu różnych elementów - niekoniecznie trzeba przygotowywać jeden plik graficzny. Podobnie jest w Leaflet - mapa będzie dla nas obiektem złożonym z wielu różnych warstw, elementów i metod (funkcji).
Zacznijmy od zdefiniowania tego obiektu:
var map = L.map('map').setView([52.13, 21.00], 13);Zinterpretujmy ten kod:
- słowo kluczowe var tworzy nam obiekt map, do którego wrzucamy wynik działania funkcji L.map(). Do obiektu map będziemy mogli się później odwoływać, tworząc nowe warstwy i dodając punkty (markery),
- L to obiekt tworzony przez Leaflet, który udostępnia rozmaite funkcje (metody) i pozwala na zarządzanie mapą,
- metoda L.map(‘map’) umieści nam mapę w kontenerze o identyfikatorze map (utworzyliśmy go już wcześniej),
- metoda setView([52.13, 21.00], 13) wycentruje nam mapę stworzoną metodą L.map() na koordynaty Warszawy.
Jeśli dodamy ten kod do okna JavaScript, zobaczymy, że tło kontenera o identyfikatorze map zmieniło kolor na szary. W prawym górnym rogu pojawiły się też ikony pozwalające na zmianę skali mapy. Wszystko działa jak trzeba 😎.
Mamy już mapę, w której koordynaty geograficzne tłumaczone są dynamicznie na wartości X i Y w osi 2D. Trudno jednak z niej korzystać - brakuje warstwy, która udostępniałaby określone informacje.
Skorzystajmy z podstawowej warstwy OpenStreetMap:
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);L.tileLayer() to metoda Leaflet, pozwalająca na stworzenie warstw mapy, a metoda addTo() na dodanie ich do mapy (w naszym przypadku do obiektu o nazwie map). Umieśćmy ten kod w oknie JavaScript.
Nasza mapa działa - możemy ją przesuwać w dowolnym kierunku i zmieniać skalę. Pozostaje nam tylko dodać punkty reprezentujące wybrane zabytki architektury lat 90.
Dodajemy informacje o zabytkach
W Leaflet mapa jest obiektem JavaScript, obiektem jest też warstwa tej mapy oraz markery - punkty, które umieszczamy na mapie. Każdy z tych obiektów ma swoje właściwości i swoje metody - dodając punkty na mapie otrzymamy od razu dostęp do funkcji umożliwiających wyświetlanie określonej treści po kliknięciu. Żeby dodać markery, potrzebujemy danych - skorzystajmy z pracy zespołu ARCHIwum Warszawy Lat 90.
W witrynie archiwum dostępna jest lista obiektów - wybierzmy te znajdujące się na Białołęce. Każdy obiekt w archiwum opisany jest metadanymi - znajdziemy tam dane lokalizacyjne. Ponieważ nasza mapa jest tylko ćwiczeniem a nie pełnoprawną prezentacją, skorzystajmy z pięciu wybranych obiektów z listy. Oto one:
| nazwa | id | dlugosc_geogr | szerokosc_geogr |
|---|---|---|---|
| Fort Piontek | 368 | 20.9518 | 52.3448 |
| Budynek biurowo-usługowy | 380 | 20.9694 | 52.3263 |
| Przepompownia Nowodwory | 378 | 20.9449 | 52.3247 |
| Urząd Pocztowy nr 91 | 337 | 20.9549 | 52.3208 |
| Ratusz Białołęka | 278 | 20.9707 | 52.3211 |
Markery dodajemy do mapy za pomocą metody L.marker(), do której jako parametr wprowadzamy tabelę [] zawierającą dane o szerokości i długości geograficznej. Metodą bindPopup() dodajemy treść, która ma się wyświetlać po kliknięciu w marker:
L.marker([ 52.3448,20.9518]).addTo(map).bindPopup('<a href="https://archiwumlat90.pl/obiekty/obiekt/?id=368">Fort Piontek</a>');Ponieważ nasza mapa wycentrowana jest bardziej na południe Warszawy (a Białołęka to północna dzielnica), dodane markery nie będą widoczne po wczytaniu mapy. Dlatego albo zmieńmy koordynaty funkcji setView() na począku kodu (przy definiowaniu obiektu map), albo użyjmy funkcji panTo():
map.panTo([52.3448, 20.9518]);Teraz pozostaje nam dodać wszystkie markery wraz z opisami:
// Kod dla Fortu Piontek
L.marker([52.3448, 20.9518]).addTo(map).bindPopup("<a href='https://archiwumlat90.pl/obiekty/obiekt/?id=368'>Fort Piontek</a>");
// Kod dla Budynku biurowo-usługowego
L.marker([52.3263, 20.9694]).addTo(map).bindPopup("<a href='https://archiwumlat90.pl/obiekty/obiekt/?id=380'>Budynek biurowo-usługowy</a>");
// Kod dla Przepompowni Nowodwory
L.marker([52.3247, 20.9449]).addTo(map).bindPopup("<a href='https://archiwumlat90.pl/obiekty/obiekt/?id=378'>Przepompownia Nowodwory</a>");
// Kod dla Urzędu Pocztowego nr 91
L.marker([52.3208, 20.9549]).addTo(map).bindPopup("<a href='https://archiwumlat90.pl/obiekty/obiekt/?id=337'>Urząd Pocztowy nr 91</a>");
// Kod dla Ratusza Białołęka
L.marker([52.3211, 20.9707]).addTo(map).bindPopup("<a href='https://archiwumlat90.pl/obiekty/obiekt/?id=278'>Ratusz Białołęka</a>");W efekcie otrzymujemy mapę z zaznaczonymi zabytkami:
To oczywiście tylko podstawowa konfiguracja markerów - w Leaflet możemy przygotować rozbudowane interakcje z obiektami publikowanymi na mapie, zmieniać ich estetykę i dodawać narzędzia przeglądania takie jak osi czasu czy filtry.
Podsumowanie
W ramach tej lekcji skorzystaliśmy z OpenStreetMap za pomocą biblioteki Leaflet - na mapie Warszawy umieściliśmy kilka punktów opisujących lokalizację zabytków lat 90. - zaprogramowaliśmy także podstawowe interakcje z tymi punktami. To oczywiście tylko niewielka część możliwości Leaflet.
Warto zwrócić uwagę, że mapa cyfrowa w takiej postaci to zestaw obiektów i interakcji między nimi. Obiektem jest przestrzeń 2D, na którą przeniesiono siatkę geograficzną, obiektem jest warstwa wypełniająca tę przestrzeń (np. mapa fizyczna), obiektami są markery. Budując mapę cyfrową, podobnie jak tworząc wykresy - pracujemy z obiektami.
Wykorzystanie metod
Aby podejrzeć proces pracy z mapą cyfrową, warto zapoznać się z artykułem Wykorzystanie Leaflet i plików GeoJSON do stworzenia interaktywnej mapy internetowej przedprzemysłowego stanu środowiska naturalnego autorstwa Tymoteusza Horbińskiego i Dariusza Lorka (tekst dostępny jest także przez SciHub). Autorzy korzystają ze zdigitalizowanych, XIX-wiecznych map Górnego Śląska. Ponieważ nie są one w pełni kartometryczne (niedokładnie odwzorowują układ geograficzny), należało je odpowiednio zarejestrować w układzie współrzędnych (georeferencja). Następnie zmieniono postać zeskanowanych map z rastrowej na wektrową i dodatkowo wyodrębniono istotne obiekty z tych map, także do postaci wektrowej. Obiekty te (punkty, linie i obszary) opisano za pomocą standardu GeoJSON i umieszczono na stronie internetowej z wykorzystaniem biblioteki Leaflet.
Pomysł na warsztat
Możesz wykorzystać CodePen i przygotowany w ramach tej lekcji kod źródłowy do mniej lub bardziej zaawansowanych eksperymentów z mapami cyfrowymi (dodawanie punktów, zmiana estetyki mapy czy jej warstwy informacyjnej). Możesz też wykorzystać stronę The True Size Of do przeprowadzenia dyskusji na temat ograniczeń map i ich wpływu na to, jak interpretujemy przestrzeń. W planowanych ćwiczeniach użyć można też map o odwróconej orientacji:
Uczestniczki i uczestnicy Twojego warsztatu mogą eksperymentować z orientacją mapy, korzystając z tej strony.
