Svelte MapLibre

Svelte MapLibre is a library offering idiomatic Svelte support for the MapLibre GL mapping library.

Read the API documentation for a list of all components, their props, and the helper functions and types. Each example in the menu shows its code, and each component page links to the examples that use it.

Installation

npm install svelte-maplibre

Usage

If you use Vite, import the MapLibre worker URL and set it before you create the first map. The ?worker&url import tells Vite to emit the worker as an asset.

<script module>
  import * as maplibregl from 'maplibre-gl';
  import maplibreWorkerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
  maplibregl.setWorkerUrl(maplibreWorkerUrl);
</script>

<script>
  import { MapLibre } from 'svelte-maplibre';
</script>

<MapLibre
  center={[50, 20]}
  zoom={7}
  class="map"
  standardControls
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
/>

<style>
  :global(.map) {
    height: 500px;
  }
</style>