Svelte 5 Quickstart

Install

npm install maplibre-gl

Component

<script>
  import { onMount } from 'svelte';
  import maplibregl from 'maplibre-gl';
  import 'maplibre-gl/dist/maplibre-gl.css';

  let el;
  let map;

  onMount(() => {
    map = new maplibregl.Map({
      container: el,
      style: `https://api.mapsfordevs.com/styles/standard.json?key=${import.meta.env.VITE_MFD_PUB_KEY}`,
      center: [28.04, -26.20],
      zoom: 11
    });
    return () => map.remove();
  });
</script>

<div bind:this={el} class="w-full h-screen"></div>

Reusable wrapper

<!-- MapLibreMap.svelte -->
<script>
  import { onMount } from 'svelte';
  import maplibregl from 'maplibre-gl';

  let { styleUrl, center = [0, 0], zoom = 2, oninit } = $props();
  let el;
  let map;

  onMount(() => {
    map = new maplibregl.Map({ container: el, style: styleUrl, center, zoom });
    oninit?.(map);
    return () => map.remove();
  });
</script>

<div bind:this={el} class="w-full h-full"></div>

Usage:

<script>
  import MapLibreMap from './MapLibreMap.svelte';

  const STYLE = `https://api.mapsfordevs.com/styles/standard.json?key=${import.meta.env.VITE_MFD_PUB_KEY}`;

  function handleInit(map) {
    new maplibregl.Marker().setLngLat([28.04, -26.20]).addTo(map);
  }
</script>

<MapLibreMap styleUrl={STYLE} center={[28.04, -26.20]} zoom={11} oninit={handleInit} />

Language switcher with rune state

<script>
  let lang = $state('en');

  $effect(() => {
    if (!map || !map.isStyleLoaded()) return;
    ['place_label', 'transportation_name', 'poi_label'].forEach(layer => {
      map.setLayoutProperty(layer, 'text-field', [
        'coalesce',
        ['get', `name:${lang}`],
        ['get', 'name:latin'],
        ['get', 'name']
      ]);
    });
  });
</script>

<select bind:value={lang}>
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="ja">日本語</option>
</select>

SvelteKit SSR

MapLibre is browser-only. Wrap in {#if browser}:

<script>
  import { browser } from '$app/environment';
</script>

{#if browser}
  <MapLibreMap ... />
{/if}

Or use onMount (only runs on client) — recommended approach above.