encyklopedia.space

Mapbox GL JS

Mapbox GL JS (skrót od Mapbox Graphics Library for JavaScript) jest otwarto‑źródłową biblioteką JavaScript umożliwiającą tworzenie interaktywnych map w przeglądarce internetowej przy użyciu technologii WebGL. Biblioteka jest rozwijana i utrzymywana przez firmę Mapbox i pozwala na wyświetlanie wektorowych danych kartograficznych w czasie rzeczywistym, co zapewnia płynne animacje i wysoką wydajność nawet przy dużych ilościach danych.

Historia

Projekt powstał w 2015 roku jako następca wcześniejszych rozwiązań opartych na tradycyjnych rastrach (np. Mapbox.js, który wykorzystywał Leaflet). W pierwszym wydaniu (v0.1) biblioteka pozwalała jedynie na renderowanie wektorowych płytek mapowych, ale już w kolejnych wersjach wprowadzono obsługę warstw GeoJSON, stylowanie przy pomocy języka Mapbox Style Specification oraz integrację z REST API Mapbox.

Architektura

Podstawową jednostką Mapbox GL JS jest map – obiekt reprezentujący mapę. Biblioteka korzysta z trzech warstw abstrakcji:

  1. Renderowanie: WebGL zapewnia dostęp do GPU, umożliwiając płynne rysowanie wektorowych obiektów (linii, wielokątów, symboli).
  2. Stylowanie: Styl mapy definiuje się w formacie JSON (tzw. Mapbox Style Specification), który opisuje warstwy, źródła danych i ich wygląd.
  3. Interakcja: Biblioteka obsługuje zdarzenia myszy i dotyku, a także funkcje takie jak zoom, obrót i nachylenie (pitch).

Funkcje

  • Wektorowe renderowanie w WebGL – brak konieczności pobierania dużych plików rastrowych.
  • Dynamiczne stylowanie mapy w locie (np. zmiana koloru dróg w zależności od natężenia ruchu).
  • Wsparcie dla GeoJSON, TopoJSON oraz własnych źródeł danych (np. serwery TileJSON).
  • Obsługa 3‑D – możliwość wyświetlania budynków i terenów przy użyciu warstw fill-extrusion.
  • Adaptacja do HTML5 i CSS – mapę można osadzić w dowolnym elemencie <div>.
  • Rozbudowany system zdarzeń (kliknięcie, przesunięcie, zmiana zoomu, itp.).
  • Integracja z serwisami Mapbox (np. tilesets, Directions API) oraz innymi dostawcami map

Przykładowe użycie

Poniżej znajduje się minimalny przykład osadzenia mapy przy użyciu Mapbox GL JS:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Mapa z Mapbox GL JS</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
  <style>
    #map { width: 100%; height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
  <script>
    mapboxgl.accessToken = 'TU_WSTAW_TWÓJ_TOKEN_MAPBOX';
    const map = new mapboxgl.Map({
      container: 'map',               // id elementu HTML
      style: 'mapbox://styles/mapbox/streets-v11', // styl mapy
      center: [21.0122, 52.2297],     // współrzędne: Warszawa
      zoom: 10                       // poziom przybliżenia
    });

    // Dodanie prostego znacznika
    new mapboxgl.Marker()
      .setLngLat([21.0122, 52.2297])
      .addTo(map);
  </script>
</body>
</html>

Wersje i licencjonowanie

Do 2020 roku Mapbox GL JS był dostępny na licencji BSD‑2 Clause. W 2022 roku projekt został otwarty na licencję MIT i udostępniony w repozytorium GitHub. Najnowsze wersje (od 2023) wprowadzają modułowy system pakietów oraz wsparcie dla TypeScript.

Porównanie z innymi bibliotekami

W przeciwieństwie do tradycyjnych bibliotek opartych na rastrach, takich jak Leaflet czy OpenLayers, Mapbox GL JS oferuje:

  • Wysoką wydajność dzięki WebGL oraz renderowaniu po stronie klienta.
  • Możliwość wyświetlania danych w 3‑D bez dodatkowych wtyczek.
  • Elastyczne i dynamiczne stylowanie w locie, co jest trudniejsze do osiągnięcia w bibliotece Leaflet bez dodatkowych rozszerzeń.

Jednakże, biblioteki o dłuższej historii, takie jak Leaflet, charakteryzują się mniejszymi wymaganiami sprzętowymi i szerszą kompatybilnością z przeglądarkami starszymi.

Zobacz także

  • Mapbox – platforma mapowa i usługi geolokalizacyjne.
  • WebGL – interfejs API graficzny przeglądarek.
  • Leaflet – lekka biblioteka do wyświetlania map.
  • OpenLayers – biblioteka open‑source do map internetowych.
  • GeoJSON – format wymiany danych geograficznych.

Bibliografia

Informacje w artykule pochodzą z oficjalnej dokumentacji Mapbox GL JS, publikacji technicznych oraz repozytorium GitHub projektu. Wszystkie źródła są dostępne w formie wewnętrznych wpisów encyklopedycznych.