MapLibre to biblioteka JavaScript typu open-source, która używa WebGL do renderowania interaktywnych map.
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" />
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,
})