Interaktywna mapa w przeglądarce internetowej z Leaflet

W pierwszym wykładzie przygotowujemy naszą pierwszą mapę ze wskazaniem lokalizacji na mapie za pomocą współrzędnych geograficznych.

W lekcji tej usuniemy domyślny przycisk przybliżenia i oddalenia, tzw zoom

W lekcji tej napiszemy kod, który spowoduje, iż po kliknięciu na mapie lewym przyciskiem myszy wyskoczy nam komunikat z informacją o współrzędnych miejsca na którym kliknęliśmy. Natomiast, gdy klikniemy prawym przyciskiem myszy na mapie pojawi się znacznik (markier). Po ponownym kliknięciu na markier, ale tym razem już lewym przyciskiem myszy, pojawi się nam chmurka (popup) z informacją o współrzędnych i aktualnej dacie i godzinie.

Przypiszemy do dowolnego przycisku na klawiaturze lokalizację. Tzn. przyciśnięcie klawisz "l" na klawiaturze spowoduje, że mapa na ekranie naszego komputera czy telefonu przybliży się do miejsca w którym aktualnie się znajdujemy.

Dodajemy plugin przesunięcia mapy

Dodajemy plugin zoom

Wstawimy do mapy plugin pomiaru długości, dzięki któremu będziemy mieli możliwość mierzenia w metrach jak i w milach.

Dodamy do mapy skalę liniową

W filmie tym pokażę jak dodać do mapy różne dostępne podkłady mapowe. Mapy topograficzne, ortofotomapy, mapy czarno-białe. A może chcesz ukazać na mapie ścieżki rowerowe w najbliższej okolicy? Te i wiele innych map jest dostępnych online i wszystkie możesz dodać do swojej mapy.

Wstawimy plugin dzięki któremu będziemy mogli rysować po mapie: linie, poligon (obszar) czy wstawić markier, który oznaczy jakieś ważny punkt na mapie.

Nawiązanie do poprzedniej lekcji. Narysowanym elementom na mapie nadajemy style: kolor, rodzaj linii (ciągła, przerywana itp.) czy wypełnienie.

Dodamy w prawym dolnym rogu mapy głównej mapę poglądową, która pokaże nam położenie względem np Polski. Minimapa  jest elementem interaktywnym, stanowiącym pomniejszoną wersję mapy całego świata i pokazującym tylko ten jego fragment w którym się znajdujemy.

Dodajemy/zmieniamy przypis na dole mapy

Dodajemy miejsca na mapie (warstwy) poprzez zaznaczenie kolorem jakiegoś terenu np. osiedla, ścieżki rowerowej itp. Warstwy po ponownym załadowaniu strony, pozostaną na mapie.

Obiekty (warstwy) narysowane w poprzedniej lekcji przypiszemy do legendy. Warstwy możemy włączać/wyłączać z widoku mapy.

Nadamy mapom/zdjęciom odpowiedniej lokalizacji na kuli ziemskiej (nadawanie współrzędnych). Przypisujemy wstawione mapy do legendy w której będziemy mieli możliwość włączania i wyłączania przypisanych podkładów mapowych z mapy głównej.

Dokładamy do mapy panel, który po kliknięciu w przycisk wysunie się z prawej strony ekranu.

Nauczymy się korzystać z frameworka bootstrap, dzięki któremu szybko i w prosty sposób nadamy wygląd naszym przyciskom znajdującym się na mapie.

Do pojawiającego się panelu dodamy treść: tekst oraz kolejne interaktywne przyciski.

Do przybliżonego w poprzedniej lekcji punktu, dodamy popup, czyli wyskakujące okienko w którym możemy zamieścić dodatkowe informacje: treść, zdjęcie, linki do zewnętrznych stron.

Wstawimy kolejne panele wzbogacając mapę w treść.

Mając dwa panele (lub więcej) po kliknięciu na  przycisk, który otwiera drugi panel automatycznie spowoduje zamknięcie tego pierwszego.

Do jednego z paneli dodajemy slider, czyli pokaz zdjęć.

Do kolejnych paneli dodajemy inne pokazy zdjęciowe.

Ostatnia lekcja w której nauczymy się wstawiać okno z informacją o mapie (okno pomocy).