Mapy internetowe

Prowadzący: dr Michał Rzeszewski, pokój 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. 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

Przykład 1

Przykład 2

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

Możesz także zobaczyć na Twiterze wykorzystując hashtag#BuiltWithMapbox

ZADANIE 1:

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.

ZADANIE 2:

Ściągnij pliki:
- Poligony województw (zip, 0,4 MB)
- Nazwy województw (csv, 0,1 MB)
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.

ZADANIE 3:

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"></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:
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:

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)

ZADANIE 5:

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

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