Files
openfreemap/website_astro/src/content/how_to_use/maplibre.md
Zsolt Ero 0ec3285382 astro
2024-06-13 02:50:07 +02:00

700 B

How to load MapLibre?

Include MapLibre GL JS in the <head>. If you are using npm, you can install the maplibre-gl package. Make sure to import the CSS as well.

<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" />

Initialize it to a div like this:

<div id="map" style="width: 100%; height: 500px"></div>
<script>
  const map = new maplibregl.Map({
    style: 'https://tiles.openfreemap.org/styles/liberty',
    center: [13.388, 52.517],
    zoom: 9.5,
    container: 'map',
  })
</script>