email: mrz (at) amu.edu.pl
I. Wprowadzenie
Podczas tego kursu dowiecie się jak zaprojektować, skonstruować i opublikować mapę online. Nasze działania oprzemy o platformę Mapbox, zaczynając od wprowadzenia do jej interefejsy sieciowego - Mapbox Studio. Następnym etapem będzie konstrukcja strony internetowej i dodanie bardziej zaawansowanych funkcjonalności.
Na tej stronie będą umieszczone materiały niezbędne do wykonania zadań, a także treść samych zadań - w zależności do naszych postępów w pracy. Zadania należy traktować nie jako elementy oceny ale znaczniki postępu oraz podpowiedzi w samodzielnej nauce.
Zaczynamy od podstaw środowiska Mapbox...ale najpierw zaprojektujmy mapę!
Zanim siądziesz przed ekranem:
- Mapa internetowa to historia, która opowiadasz za pomocą danych i interaktywnego interfejsu użytkownika.
- Interfejs należy zaprojektować, a projektowanie to proces iteracyjny.
- Najlepsze projekty zaczyna się od podstaw – kartki lub tablicy. W ten sposób nie jesteśmy ograniczeni przez technologię, a kolejne iteracje można podrzeć lub zmazać, szybko i bez żalu.
- W projektowaniu muszą uczestniczyć użytkownicy i to najlepiej od samego początku – nikt nie jest w stanie być w pełni obiektywnym w stosunku do własnego projektu.
Etapy procesu projektowania:
- Wyrzuć wszystko to co niepotrzebne
- Ulepsz wszystko to co pozostało
- Przetestuj dla różnych skal i regionów
Zasady projektowania mapy internetowej:
- Obowiązuje większość podstawowych zasad kartografii: mapa winna być jak najprostsza, czytelna, zachowywać dobrą kompozycję i wizualną hierarchię obiektów.
- Specyfika środowiska interaktywnej mapy wymusza dodatkowo: dbałość o dostępność technologiczną, konieczność poznania użytkownika końcowego i kontekstu funkcjonowania mapy, elastyczność formy, większą generalizację obiektów, ograniczenia czcionek.
- Mapa internetowa funkcjonuje w ramach ekonomii opartej na uwadze użytkownika – musi walczyć o uwagę i atencję. Pierwszy rzut oka bywa decydujący.
- Mapa internetowa nie powinna stwarzać wrażenia cyfrowej wersji mapy papierowej – inne wymagania odnośnie interakcji.
- Lepiej zrobić kilka prostych map niż jedną nadmiernie skomplikowaną.
Przykłady roboczych projektów map
II. Mapbox Studio
Mapbox Studio to graficzny interfejs pozwalający na projektowanie map oraz przechowywanie i prostą edycję danych. Informacje o środowisku Mapbox można znaleźć pod poniższymi linkami.
O platformie Mapbox
Mapy skonstruowane przy pomocy Mapboxa
- Partycypacja na Jeżycach - wizualizacja wyników geoankiety
- Wizualizacja 3D skarg na restauracje w NY
- Dane o pożarach w U.S.A na żywo
- Mapa hałasu w Moskwie
- Cyfrowa Archeologoa - mapa skasowanych serwisów platformy Geocities
- Wizualizacja podróży Uberem i Lyftem w San Francisco
- Publiczne toalety w Waszyngtonie.
Możesz także zobaczyć na Twiterze wykorzystując hashtag#BuiltWithMapbox
- Załóż darmowe konto Mapbox
- Zapoznaj się z interfejsem Mapbox Studio
- Stwórz własny styl w Mapbox Studio
III. Tilesets - zestawy kafelków
Zestawy kafelków (tilesets) są podstawowym budulcem map w Mapboxie. Zawierają wektorowe dane podzielone na równą siatkę kwadratów na każdym z 22 poziomów skali dostępnych na mapach online. W momencie tworzenia stylu przypisujemy im pożądany styl - są analogiem warstw w oprogramowaniu GIS. Są też dostępne z poziomu skryptu Mapbox GL JS i bibliotek mobilnych.
Mechanizm działania tilesets będziemy poznawać na przykładzie prostej warstwy z poligonami województw w formacie Shapefile oraz dodatkowego pliku z . W momencie dodania pliku jako tileset na serwerze Mapboxa nie ma znaczenia format pliku źródłowego. Każda zmiana danych wymaga ich ponownego wgrania. Dane można podmieniać wykorzystująć funkcję Replace.
- Ściągnij pliki:
- Zapoznaj się zawartością i tabelą atrybutów
- Dodaj plik jako tilesest na swoim koncie Mapbox
- Utwórz kartogram ukazujący zróżnicowanie wybranego zjawiska (wykorzystując tabelę atrybutów przykładowego pliku) pomiędzy województwami. Opublikuj go w postaci stylu. Dobierz w odpowiedni sposób warstwy podkładowe. Zadbaj o czytelność i przekaz mapy.
IV. Wizualizacja danych cz.1
Dotychczas na zajęciach poznaliśmy kilka technik wizualizacji danych - sposóbów ich dodawania i stylowania. Następnym etapem jest sprawdzenie tych umiejętności w praktyce. Poniżej przykładowe zestawy danych - Waszym zadaniem jest stworzenie przy ich pomocy jak najlepszej interaktywnej mapy. I pamiętajcie - da się z nich zrobić więcej niż jedną wizualizację!
Dane do wizualizacji
- Dwa tygodnie z życia studenta Zapis z lokalizatora GPS, noszonego przez dwa tygodnie przez studenta naszego Wydziału. Są to prawie surowe dane z urządzenia. Dodałem wyekstrahowane kolumny wartości daty i czasu dla ułatwienia.
- Poznań w serwisie Flickr w 2013 r. Punkty pozyskane przy pomocy Flickr API w 2013. Plik zawiera wszystkie metadane zdjęć z oznaczoną lokalizacją. Baza danych to podstawowe informacje o zdjęciu, opis, tagi, identyfikator etc. Jak każdy rezultat automatycznego scrapingu danych wymaga obróbki.
- Przemieszczenia studentów w Poznaniu Zbiorcza baza danych z eksperymentu podobnego do tego w pkt.1. Z uwagi na ochronę oryginalnych danych nie jest to baza całościowa ale losowa próba. Nie ma też możliwości identyfikacji poszczególnych osób. Można za jej pomocą pokazać jednak bardziej ogólne prawidłowości przemieszczeń.
- Dane ze spisu powszechnego 2011 dla województwa wielkopolskiego Liczba osób, przedział wiekowy oraz płeć w siatce 1km x 1km
- Pomniki przyrody - Poznań i okolice Dane z GDOŚ - punkty i poligony
- Obszary funkcjonalne Studium uwarunkowań i kierunków zagospodarowania przestrzennego miasta Poznania Poligony wraz z atrybutem klasy - opis klas w studium, w bazie jedynie kod klasy.
- Zapoznaj sie z plikami danych.
- Zaprojektuj mapę prezentującą dowolne zagadnienie, wykorzystując jeden (lub więcej) powyższych zestawów danych. Możesz też dodać dodatkowe zestawy danych i warstwy wedle uznania. Pamietaj o odpowiednim dobraniu tła.
- Stwórz i opublikuj mapę w środowisku Mapbox Studio
V. Podstawy HTML i CSS
HTML
Aby unaocznić efekty działania aplikacji mapowej potrzebne są chociaż podstawowe umiejętności i wiadomości związane z budową stron www oraz językiem HTML (Hypertext Markup Language).
Plik HTML jest zwyczajnym plikiem tekstowym, różniącym się jedynie zastosowanie odpowiedniego rozszerzenia (.html, możliwe są jednak i inne np. .htm lub .php), który następnie jest odpowiednio interpretowany przez przeglądarke. Podstawą języką są tzw. znaczniki (tagi) czyli ciągi znaków objęte nawiasami ostrymi, przykładowo tutuł tego rozdziału wyglądą następująco:
- <h3>Podstawy HTML</h3>
- gdzie h3 oznacza tytuł trzeciego rzędu. <h3> jest to tzw. znacznik otwierający a </h3> znacznik zamykający. W ramach tego pierwszego istnieje ponadto możliwość dodawania różnego rodzaju parametrów np.
- <h3 name="rozdzial1" >
- nadaje temu znacznikowi etykietę "rozdzial1", do której można się później odwoływac w ramach dokumentu za pomocą odsyłaczy
Przy konstruowaniu stron warto przestrzegać kilku zasad:
- W obrębie znaczników należy używać małych liter
- Należy zamykać znaczniki
- Wartości parametrów powinny znajdować się w cudzysłowiu
- Znaczniki należy zamykać w takiej samej kolejności w jakiej zostały otwarte
- W przypadku większych i bardziej skomplikowanych stron dobrze jest stosować komentarze za pomocą znaku <!--
Szkielet strony
Kod HTML winien być zamknięty w pewnych ramach tzw. szkielecie strony. Jest to zestaw znaczników wewnątrz których znajduje się właściwa treść strony. Wygląda on w poniższy sposób:
- <html>
- <head>
- Tutaj znajduje się treść nagłówka strony
- </head>
- <body>
- Ta część zawiera właściwą treść strony
- </body>
- </html>
Wysoce wskazane jest umieszczenie dodatkowo trzech informacji: prologu, czyli przeznaczonej dla przeglądarki informacji jakiej wersji HTML używamy. I tak dla wersji 5 jest to np. :
- <!DOCTYPE html >
Dodatkowo przydatna będzie informacja o kodowaniu znaków:
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- powinna się znaleźć w nagłówku strony. Można stosować również kodowanie "iso-8859-2", natomiast 'Windows-1250" jest nie zalecane.
oraz tytuł strony np.
- <title>Jakiś tytuł</title>
- zaleca się umieszczenie go na samym początku nagłówka strony
Podstawowe znaczniki
Poniżej podstawowe tagi języka HTML wraz z niezbędnymi parametrami (w rzeczywistości można dodać ich znacznie więcej).
- <p>
- znacznik akapitu
- <h1><h2><h3><h4><h5><h6>
- tytuły, różniące się wielkością znaków oraz a może nawet przede wszystkim miejscem w hierarchii
- <strong>
- tekst zawarty w jego obrębie jest pogrubiany
- <em>
- emfaza, tekst zawarty w jego obrebie jest pochylony
- <a href="adres strony internetowej">tekst lub obrazek</a>
- odsyła pod wskazany adres www
- <img src="nazwa pliku obrazka">
- wyświetla obraz z danego pliku, adres ustalany jest w relacji do strony
CSS - Kaskadowe arkusze stylów
Kaskadowe arkusze stylów (Cascading Style Sheet - CSS) służą definiowaniu sposobu wyświetlania elementów HTML. Rozdzialają treść strony od jej wyglądu i umożliwiają łatwe zmiany. Podobnie jak w przypadku skryptów Javascript istnieje kilka sposobów użycia CSS w kodzie strony.
W postaci zewnętrznego arkusza stylów - czyli pliku tekstowego z rozszerzeniem .css, do którego odsyłacz znajduje się w nagłówku strony:
<head> (...) <link rel="stylesheet" type="text/css" href="/style/style_mapy.css"> (...) </head>
Kod CSS można umieścić też jako tzw. wewnętrzy arkusz stylów. Są one w tym momencie zebrane w jednym miejscu (przeważnie w nagłówku) w kodzie strony pomiędzy znacznikami <style> </style>
<head> (...) <style> body { background-color: white; } h1 { color: black; margin-left: 10px; font-size: 1.1em; } </style> (...) </head>
Trzecią możliwością jest nadanie stylu bezpośrednio pojedynczemu elementowi HTML np.
<h1 style="color:red; font-size=2em;">Witaj przybyszu!</h1>
Przy czym ostatniego ze sposobów należy używać jak najrzadziej - prowadzi do braku czytelności kodu i utrudnia rozdział treści od wyglądu.
Składnia CSS
Poniżej podstawowe elementy składni CSS.
- Pojedynczy element CSS składa się z selektora określającego element HTML, którego ma dotyczyć dany styl, oraz deklaracji stylu podanych w parach właściwość:wartość.
p {color:red;text-align:center;text-size=12pt;} /*powyższy styl dotyczy wszystkich paragrafów*/ /*czytelniejszy zapis dla wielu właściwości:*/ p { color:red; text-align:center; text-size=12pt; }
-
Selektory CSS mogą wskazywać na dany typ elementów HTML, identyfikator lub klasę:
/* selektor elementu */ h1 { color:black; } /* selektor unikalnego identyfikatora np. <p id="pierwszy_akapit"> */ #pierwszy_akapit { color:blue; } /* selektor klasy - może być nadawana wielu obiektom np. <h1 class="wazne"> */ .wazne { color:red; }
- Podstawowym elementem, klockiem budującym stronę, dla którego określane są strony jest div:
<div id="map"><!--Tutaj wstawiona zostanie mapa--></div>
-
Kaskadowość stylów oznacza, że łączą się one kaskadowo w jedną definicję stylu dla strony nawet jeśli pochodzą z róznych żródeł. Przy czym jeśli deklaracje się powielają w róznych miejscach to stosowana jest hierchia ważności, taka, ze najważniejsze są deklaracje najbardziej szczegółowe:
- Styl określony dla pojedynczego elementu
- Wewnętrzny arkusz stylów (w nagłówku)
- Zewnętrzny arkusz stylów
- Domyślny styl przeglądarki bb
- Utwórz prostą stronę internetową - nazwij plik index.html
- Dodaj tytuł swojej mapy
- Dodaj krótki opis mapy - co zawiera, jak zostało to stworzone
- Stwórz na stronie miejsce na mapę formie bloku (div) o określonych wymiarach.
V.Podstawy Javascript
Istnieją dwa sposoby na wprowadzenie skryptu Javascript. Pierwszym z nich jest załączenie osobnego pliku z kodem w nagłówku strony np.
<script language="javascript" src="skrypty/jquery.js"></script>
Powyższy sposób pozwala na rozdzielenie kodu i polepszenie jego czytelności, szczególnie kiedy skrypty są bardzo rozbudowane. Drugim sposobem jest umieszczenie skryptu wewnątrz kodu stronu, z użyciem znaczników <script></script>. Tradycyjnym miejscem jest nagłówek strony - pomiędzy znacznikami <head></head>. Jednak istnieją nieraz powody aby kod Javascript znajdowała się tuż przed zamykającym znacznikim </body> - na przykład musimy poczekać na wczytanie wszystkich pozostałych elementów strony:
<body> (...) <script> var powitanie="Witaj przybyszu!"; //alert(powitanie); naglowek.innerHTML=powitanie; </script> </body>
W toku tworzenia strony będziemy korzystać z obu możliwości, jednak sam kod Mapbox umieścimy wykorzystując drugi ze sposobów.
Składnia Javascript
Poniżej kilka podstawowych zasad składni Javascript - nie wszystkie z nich muszą być kategorycznie przestrzegane, jednak ich stosowanie ułatwia tak czytanie kodu (szczególnie przydatne dla prowadzącego...) jak i znajdowanie błędów. I tak:
- Białe znaki (spacje, tabulatory) nie mają znaczenia przy interpretacji kodu - to znaczy służą wyłącznie rozdzieleniu poleceń ale nie ma znaczenia czy będzię to 1 spacja czy 10. Należy jednak stosować je dla poprawy czytelności - wcinanie bloków kodu twoim najlepszym przyjacielem!
- Wyrażenia (pojedyncze operacje) należy kończyć znakiem średnika ";"
var suma = 2 + 5;
- Zmienne deklarowane są za pomocą polecenia var, a przypisanie wartości nastepuje przy pomocy operatora =
var foo; //tworzy zmienną o nazwie foo foo = 10.2; //przypisuje zmiennej wartość liczbową var bar = 122; //tworzy zmienną i przypisuje jej wartość
- Komentarze w kodzie można wstawiać na dwa sposoby. Znaki // zamieniają w komentarz jedną linię tekstu za nimi, natomiast wieloliniowy komentarz tworzony jest klamrami /* i */
var foo = 10; //jednoliniowy komentarz //to też jest komentarz var bar = 22; /* wieloliniowy komentarz może słuzyć czasowego wyłączania bloków kodu np. alert(foo+bar); */
- Javascript rozróżnia wielkość znaków.
- Separatorem dziesiętnym jest kropka. Liczby mogą być zapisywane zarówno z miejscami dziesiętnymi jak i bez. Ciągi znaków (string) mogą być ujęte w podwójny lub pojedynczy cudzysłów.
- Nazwy zmienny muszą zaczynać się literą (w specyficznych wypadkach będzie to również $ lub _ ) i mogą zawierać znaki alfanumeryczne, podkreślenia oraz znak dolara.
- Tablice (arrays) deklarowane są pomocą nawiasów kwadratowych, a ich indeks rozpoczyna się od 0.
var studenci = ["dobry", "zły", "brzydki", 112]; //tablice moga przechować dane różnych typów alert(studenci[0]); //wyświetli komunikat: dobry
- Funkcje tworzone są przy pomocy słowa kluczowego function, nazwy oraz parametrów wewnątrz nawiasu zwykłego. Nawias klamrowy zawiera instrukcje wykonywane przez daną funkcję:
function Dodawanie(a,b){ return a+b; } var suma = Dodawanie(1,2); // zmienna suma przyjmie wartość 3
- Obiekty w Javascript tworzone są przy pomocy nawiasów klamrowych, a ich właściwości (property) podawane są w postaci par nazwa:wartość
var kowalski = {imie:"Jan", nazwisko:"Kowalski", rok_studiow:3}; //dostęp do właściwości obiektu można uzyskać na dwa sposoby: var imie = kowalski.imie; //lub var imie = kowalski[imie];
Tablica jest również specjalnym typem obiektu. - Obiekty oprócz właściwości posiadają również metody - są to funkcje przechowawane jako właściwości obiektu. Odwołać się do nich można wykorzystując notacje kropkową:
var kowalski = { imie:"Jan", nazwisko:"Kowalski", rok_studiow:3, ImieNazwisko:function() {return this.imie + " " + this.nazwisko;}}; var dane_osobowe = kowalski.ImieNazwisko()
- W Javascript obiekty nie mają klasy(...) - wszystko jest obiektem, a do użycia funkcjonalności klas używa się nomen omen funkcji do tworzenia konstruktorów.
var function Student (imie, nazwisko, rok_studiow) { this.imie = imie, this.nazwisko = nazwisko, this.rok_studiow = rok_studiow, this.ImieNazwisko = function() {return this.imie + " " + this.nazwisko;}}; var kowalski = new Student("Jan", "Kowalski",3)
- Dodaj własny styl z Mapbox Studio do własnej strony internetowej.
Biblioteka Mapbox GL JS
- Dodaj kontrolę powiększenia i nachylenia mapy
- Dodaj skalę
- Dodaj popup do jednej z warstw wyświetlający zawartość kolumny atrybutów
- Dodaj do mapy i ostyluj jeden z Tilesetow z poziomu skryptu