Integracja z MapLibre

MapLibre to biblioteka JavaScript typu open-source, która używa WebGL do renderowania interaktywnych map.

Instalacja

Dołącz MapLibre w sekcji <head>. Jeśli używasz npm, możesz zainstalować pakiet maplibre-gl. Pamiętaj, aby zaimportować również CSS.

<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />

Użycie

Utwórz element <div>, określ rozmiar i nadaj identyfikator map. 

<div id="map" style="height:500px;width:500px"></div>

Zainicjuj MapLibre podając odpowiedni URL do stylu.

new maplibregl.Map({
    container: 'map',
    style: 'https://basemap.registry.cx/style/basic',
    // style: 'https://basemap.registry.cx/style/streets',
    // style: 'https://basemap.registry.cx/style/roads',
    center: [21.01, 52.23],
    zoom: 11,
    minZoom: 5,
})

Basic

Streets

Roads

Przykład implementacji