Kawałek Kodu

Każda mapa, o ile jest poprawna, doprowadzi Cię do celu. Tyle, że najpierw musisz ją zdobyć. Wszystko jest dobrze dopóki sprzedawca w kiosku nie zażąda od Ciebie okazania karty kredytowej w celu spisania Twoich danych, abyś mógł z takiej mapy korzystać. A jeśli jeszcze będzie pobierał dodatkową opłatę za to, że często otwierasz mapę i wodzisz po niej palcem, to już w ogóle bezsens. Czasem warto się rozejrzeć po okolicy, bo być może znajdzie się ktoś, kto udostępni swoją dawno narysowaną mapę za darmo.

Co ma piernik do wiatraka?

Jeśli nie słyszałeś o Leaflet.js, to podpowiem Ci, że biblioteka jest czymś podobnym do JS SDK Google Maps. Tyle, że ta druga obsługuje wyłącznie swoje mapy, natomiast Leaflet potrawi obsługiwać wiele różnych serwisów dostarczających mapy. Google Maps też, choć trochę "na okrętkę". Możemy więc podłączyć Open Street Map, Bing czy też HERE. Z tych serwisów będziemy pobierać obrazki mapy, bo Leaflet.js ich nie dostarcza. Jako, że Open Street Map są darmowe, to właśnie dziś pokażę Ci jak wykorzystać wspomnianą bibliotekę do współpracy z nimi.

Punkt startowy.

Zaczniemy od kodu, który zaraz wyjaśnię.

<div id="map"></div>

#map{
  width: 100vw;
  height: 100vh;
}

const map = new L.Map(document.getElementById('map'));
const tilesUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const mapAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';

const layer = new L.TileLayer(tilesUrl, {
  minZoom: 8,
  maxZoom: 20,
  attribution: mapAttrib
});

map.setView(new L.LatLng(51.745835, 19.461556), 15);
map.addLayer(layer);

HTML i CSS nie wymagają wyjaśnienia - wstawiamy po prostu mapę na całą stronę. Na swojej stronie możesz użyć oczywiście innych styli i innego kodu HTML. Ciekawszy jest kod JS. Aha. Aby skorzystać z Leaflet.js musisz dołączyć bibliotekę oraz arkusz CSS do swojej strony. Pliki dostępne są na stronie domowej biblioteki.

Na początek ustalamy element, który będzie służył jako kontener i inicjujemy mapę. Metodą setView ustawiamy współrzędne geograficzne, które będą wskazywać na punkt startowy mapy, czyli centrum naszego domyślnego widoku. Drugi parametr to powiększenie. Teraz możemy zacząć coś wyświetlać. Tworzymy więc warstwę kawałków - TileLayer i podłączamy za pomocą addLayer. Tworząc warstwę ustalamy minimalny i maksymalny rozmiar powiększenia oraz notkę prawną. Notka prawna nie jest wymaganym parametrem, ale być może wymaga jej serwis, z której pozyskujemy mapy. To co wydaje się dziwne, to URL do mapy. Przede wszystkim należy wyjaśnić, że prowadzi on do serwera dostarczającego kawałki map. Ale nie do całej mapy świata, lecz jest sprametryzowany. Mamy następujące parametry:

{s} - nazwa subdomeny, nie jest wymagana, ale może przyspieszyć ładowanie fragmentów w przypadku kilku żądań w danej chwili (Leaflet podstawia sobie wartości: a,b,c.
{z} - powiększenie,
{x} oraz {y} to współrzędne wymaganego do wyświetlenia wycinka mapy.

Nie jest to właściwie URL, a szablon, który w trakcie konkretnego żądania jest uzupełniany i wywoływany. W czasie naszego nawigowania po mapie, Leaflet podstawi odpowiednie parametry i stworzy URL.

I mapa w działaniu:

Jeśli w tej chwili lub przed przeczytaniem tego wpisu pojawiły się nurtujące Ciebie pytania dotyczące Leaflet.js lub Open Street Map (np. "czy można?" albo "jak zrobić?"), to zapraszam Cię na kontynuację tematu niebawem. Do przeczytania!

Przydatne linki:
Biblioteka Leaflet.js
Strona ułatwiająca znalezienie współprzędnych geograficznych