Kartografia internetowa

Prowadzący: dr Michał Rzeszewski, poków 145, tel.: +48 61 8296171,
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. Innymi słowy - jeśli opuścisz zajęcia, Twoim obowiązkiem jest samodzielne nadrobienie zaległości.

Otrzymanie pozytywnej oceny z zajęć wymaga dwóch rzeczy - obecności na 80% zajęć oraz wykonania, samodzielnie lub grupowo, projektu zaliczeniowego. Projekty oceniane będą na ostatnich zajęciach.

Zaczynamy od podstaw środowiska Mapbox.

ZADANIE 1:
  1. Załóż darmowe konto Mapbox
  2. Zapoznaj się z interfejsem Mapbox Studio
  3. Stwórz własny styl w Mapbox Studio

II. 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 wojedzówdztw w formacie Shapefile. 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.

ZADANIE 2:
  1. Ściągnij plik: Dane dla województw (zip, 0,4 MB)
  2. Zapoznaj się zawartością i tabelą atrybutów
  3. Dodaj plik jako tilesest na swoim koncie Mapbox
  4. 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 warstyw podkładowe. Zadbaj o czytelność i przekaz mapy.

III. 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 trzy zestawy danych, a Waszym zadaniem jest stworzenie przy ich pomocy jak najlepszej interaktywnej mapy. Szczegóły zadania poniżej w ramce. UWAGA - są to "prawdziwe" dane. Oznacza to, że chociaż wstępnie je przygotowałem zawierają błędy, są nieposortowane, wymagąją filtrowania etc. Aby je we właściwy sposób przedstawić konieczne jest przetworzenie przy pomocy posiadanych już przez Was umiejętności i zgodnie z Waszym pomysłem na mapę. I pamiętajcie - da się z nich zrobić więcej niż jedną wizualizację!

Dane do wizualizacji

  1. 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.
  2. 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.
  3. 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ń.
ZADANIE 3:
  1. Zapoznaj sie z plikami danych.
  2. 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.
  3. Stwórz i opublikuj mapę w środowisku Mapbox Studio
  4. Prześlij mailem link do mapy wraz z krótkim opisem treści mapy i tytułem. Koniecznie umieść w tytule maila następujący zwrot [KI-ZADANIE 3]. Nie zapomnij się podpisać.

IV. 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:

  1. W obrębie znaczników należy używać małych liter
  2. Należy zamykać znaczniki
  3. Wartości parametrów powinny znajdować się w cudzysłowiu
  4. Znaczniki należy zamykać w takiej samej kolejności w jakiej zostały otwarte
  5. 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.

  1. 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;
      }
    
  2. 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;
      }
    
  3. Podstawowym elementem, klockiem budującym stronę, dla którego określane są strony jest div:
    
    <div id="map"><!--Tutaj wstawiona zostanie mapa--></div>
    
    
  4. 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:
    1. Styl określony dla pojedynczego elementu
    2. Wewnętrzny arkusz stylów (w nagłówku)
    3. Zewnętrzny arkusz stylów
    4. Domyślny styl przeglądarki
    Oznacza to, że jeśli dany element ma deklaracje w kilku miejscach, to zostaną one zebrane w jednym miejscu, przy czym przy sprzecznych wartościach jako ostateczna zostanie przyjęta deklaracja stojąca najwyżej w hierarchii.
ZADANIE 4:
  1. Utwórz prostą stronę internetową - nazwij plik index.html
  2. Dodaj tytuł swojej mapy
  3. Dodaj krótki opis mapy - co zawiera, jak zostało to stworzone
  4. Stwórz na stronie miejsce na mapę formie bloku (div) o określonych wymiarach.

Javascript w kodzie strony

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:

  1. 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!
  2. Wyrażenia (pojedyncze operacje) należy kończyć znakiem średnika ";"
      
      var suma = 2 + 5;
    
    
  3. 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ść
    
    
  4. 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); */
    
    
  5. Javascript rozróżnia wielkość znaków.
  6. 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.
  7. 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.
  8. 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
    
    
  9. 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
    
    
  10. 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.
  11. 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() 
    
    
  12. 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) 
    
    
ZADANIE 5:
  1. Dodaj własny styl z Mapbox Studio do własnej strony internetowej.

Biblioteka Mapbox GL JS

ZADANIE 6: Wykorzystując dokumentacje biblioteki Mapbox GL JS
  1. Dodaj kontrolę powiększenia i nachylenia mapy
  2. Dodaj skalę
  3. Dodaj popup do jednej z warstw wyświetlający zawartość kolumny atrybutów
  4. Dodaj do mapy i ostyluj jeden z Tilesetow z poziomu skryptu