@deltabreen/maps-svelte

A Svelte action for Maps by DeltaBreen, for Svelte 3, 4 and 5 and SvelteKit: MapLibre maps on our tiles, with the key and its short-lived token handled for you. Free to start, flat plans, and never an overage bill.

npm install @deltabreen/maps-svelte maplibre-gl

<script lang="ts">
  import { deltabreenMap } from '@deltabreen/maps-svelte'
  import 'maplibre-gl/dist/maplibre-gl.css'
  import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
  let zoom = 12
</script>

<div style="height: 480px" use:deltabreenMap={{ apiKey: 'pk_…', workerUrl, center: [-6.26, 53.35], zoom,
  markers: [{ lngLat: [-6.26, 53.35], popup: 'Our shop' }], onLoad: (map) => {} }}></div>

• apiKey is a publishable key from your dashboard, listing the sites that may use it (or give tokenUrl).
• Actions run in the browser only, so a server render needs nothing extra. The map is made once per key; changing mapStyle, language, center, zoom or markers changes the same map, so none of that counts another map load.
• onLoad hands you the live MapLibre map; options takes anything else createMap from @deltabreen/maps takes.

Docs: https://maps.deltabreen.eu/docs#vue-svelte-angular