Svelte MapLibre GL

https://svelte-maplibre-gl.mierune.dev
Admin
Svelte MapLibre GL is a Svelte 5 wrapper for MapLibre GL JS that enables developers to build...
Tokens:36,255
Snippets:92
Trust Score:5.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Custom Protocol with PMTiles and RasterTileSource

Source: https://svelte-maplibre-gl.mierune.dev/examples/custom-protocol

Adds a custom resource loading function to handle URLs that start with a custom URL scheme. The example defines a load function that generates a checkered PNG tile for each requested z/x/y coordinate, registers it with the Protocol component, and uses it in a RasterTileSource. It also demonstrates using PMTilesProtocol for a VectorTileSource with PMTiles.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import {
    MapLibre,
    RasterTileSource,
    VectorTileSource,
    RasterLayer,
    LineLayer,
    FillLayer,
    Protocol
  } from 'svelte-maplibre-gl';
  import { PMTilesProtocol } from '@svelte-maplibre-gl/pmtiles';
  import type * as maplibregl from 'maplibre-gl';

  const myProtocolLoadFn: maplibregl.AddProtocolAction = async (params) => {
    const zxy = params.url.replace('myprotocol://', '');
    const [z, x, y] = zxy.split('/').map((v) => parseInt(v, 10));

    const png = await new Promise((resolve) => {
      const canvas = document.createElement('canvas');
      canvas.width = 512;
      canvas.height = 512;
      const context = canvas.getContext('2d')!;

      // checkered pattern
      context.fillStyle = (z + x - y) % 2 === 0 ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.4)';
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = 'white';
      context.font = '32px sans-serif';
      context.fillText(`${z}/${x}/${y}`, 32, 64);

      // canvas -> Blob (png) -> ArrayBuffer
      canvas.toBlob(async (blob) => {
        resolve(await blob!.arrayBuffer());
      });
    });

    return { data: png };
  };
</script>

<!-- Adds a custom resource loading function to handle URLs that start with a custom URL scheme. -->
<PMTilesProtocol />
<Protocol scheme="myprotocol" loadFn={myProtocolLoadFn} />

<!-- Use custom protocols -->
<MapLibre class="h-[55vh] min-h-50" zoom={6} center={{ lng: 140.0, lat: 37.5 }}>
  <VectorTileSource url="pmtiles://https://tile.openstreetmap.jp/static/planet.pmtiles">
    <LineLayer sourceLayer="transportation" paint={{ 'line-color': 'orange' }} />
    <FillLayer sourceLayer="water" paint={{ 'fill-color': 'dodgerblue' }} />
    <LineLayer sourceLayer="building" paint={{ 'line-color': 'lime' }} />
  </VectorTileSource>
  <RasterTileSource tiles={['myprotocol://{z}/{x}/{y}']} tileSize={256}>
    <RasterLayer />
  </RasterTileSource>
</MapLibre>
```

--------------------------------

### Launch a SvelteKit Project

Source: https://svelte-maplibre-gl.mierune.dev/docs/quickstart

Create a new SvelteKit project using the official CLI and install dependencies. Ensure the Tailwind CSS add-on is enabled for styling.

```bash
npx sv create myapp
# Make sure to enable the Tailwind CSS add-on,
# as our examples use it for styling.

cd myapp
npm install
```

--------------------------------

### Install Svelte MapLibre GL

Source: https://svelte-maplibre-gl.mierune.dev/

Use npm to add the svelte-maplibre-gl package as a development dependency to your project.

```bash
npm install --save-dev svelte-maplibre-gl
```

--------------------------------

### PMTiles Protocol with Svelte MapLibre GL

Source: https://svelte-maplibre-gl.mierune.dev/examples/pmtiles

Use the PMTiles plugin and custom protocol to present a map. Requires the PMTilesProtocol component and the pmtiles:// URL scheme. The example fetches layer specifications from an OSM style and filters them for the openmaptiles source.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import { MapLibre } from 'svelte-maplibre-gl';
  import { PMTilesProtocol } from '@svelte-maplibre-gl/pmtiles';
  import type { LayerSpecification } from 'maplibre-gl';

  // Extract the layers spec from the OSM style
  let layers: LayerSpecification[] = $state.raw([]);
  $effect(() => {
    fetch('https://tile.openstreetmap.jp/styles/openmaptiles/style.json')
      .then((response) => response.json())
      .then((data) => {
        layers = data['layers'].filter(
          (layer: LayerSpecification) => !('source' in layer) || layer.source === 'openmaptiles'
        );
      });
  });
</script>

<!-- Add pmtiles:// Protocol globally -->
<PMTilesProtocol />

<!-- Use the pmtiles:// protocol -->
<MapLibre
  class="h-[55vh] min-h-50"
  zoom={10}
  center={[12.484151635086198, 41.8960910478323]}
  style={{
    version: 8,
    glyphs: 'https://tile.openstreetmap.jp/fonts/{fontstack}/{range}.pbf',
    sprite: 'https://tile.openstreetmap.jp/styles/openmaptiles/sprite',
    sources: {
      openmaptiles: {
        type: 'vector',
        url: 'pmtiles://https://tile.openstreetmap.jp/static/planet.pmtiles',
        attribution: 'OSM Japan © OpenMapTiles © OpenStreetMap contributors'
      }
    },
    layers
  }}
></MapLibre>
```

--------------------------------

### Custom Control with arbitrary HTML and IControl injection

Source: https://svelte-maplibre-gl.mierune.dev/examples/custom-control

This example shows how to use the CustomControl component to inject an IControl instance (useful for plugins) and to place arbitrary HTML content. It also demonstrates grouping controls and using Svelte state to toggle layers and change control positions.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import { HillshadeLayer, MapLibre, RasterDEMTileSource, Terrain, CustomControl } from 'svelte-maplibre-gl';
  import type * as maplibregl from 'maplibre-gl';
  import Sun from '@lucide/svelte/icons/sun';
  import Moon from '@lucide/svelte/icons/moon';
  import ArrowUpLeft from '@lucide/svelte/icons/arrow-up-left';
  import ArrowUpRight from '@lucide/svelte/icons/arrow-up-right';
  import ArrowDownLeft from '@lucide/svelte/icons/arrow-down-left';
  import ArrowDownRight from '@lucide/svelte/icons/arrow-down-right';
  import { MyControl } from './MyControl.js';

  let isHillshadeVisible = $state(true);
  let isTerrainVisible = $state(true);
  let isDarkMode = $state(false);
  const mapStyle = $derived(
    isDarkMode
      ? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
      : 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'
  );
  let center = $state({ lng: 11.09085, lat: 47.3 });
  let controlPosition: maplibregl.ControlPosition = $state('top-left');

  const myControl = new MyControl({
    toggleHillshade: () => (isHillshadeVisible = !isHillshadeVisible),
    toggleTerrain: () => (isTerrainVisible = !isTerrainVisible)
  });
</script>

<MapLibre class="h-[55vh] min-h-50" style={mapStyle} zoom={12} pitch={40} maxPitch={85} bind:center>
  <!-- inject IControl (useful for plugin) -->
  <CustomControl position="top-left" control={myControl} />

  <!-- Control / Group / Icon -->
  <CustomControl position="bottom-left">
    <button onclick={() => (isDarkMode = !isDarkMode)} class="flex! items-center justify-center text-gray-900">
      {#if isDarkMode}
        <Moon class="w-5" />
      {:else}
        <Sun class="w-5" />
      {/if}
    </button>
  </CustomControl>

  <!-- Group -->
  <CustomControl position={controlPosition} class="text-gray-900">
    <button class="flex! items-center justify-center" onclick={() => (controlPosition = 'top-left')}
      ><ArrowUpLeft class="w-5" /></button
    >
    <button class="flex! items-center justify-center" onclick={() => (controlPosition = 'top-right')}
      ><ArrowUpRight class="w-5" /></button
    >
    <button class="flex! items-center justify-center" onclick={() => (controlPosition = 'bottom-right')}
      ><ArrowDownRight class="w-5" /></button
    >
    <button class="flex! items-center justify-center" onclick={() => (controlPosition = 'bottom-left')}
      ><ArrowDownLeft class="w-5" /></button
    >
  </CustomControl>

  <!-- Control / Group / any svelte elements -->
  <CustomControl position="top-right">
    <div class="p-2 text-yellow-700">Arbitrary HTML</div>
    <div class="border-t border-t-[#ddd] p-2 text-center text-yellow-700">
      ({center.lat.toFixed(4)}, {center.lng.toFixed(4)})
    </div>
  </CustomControl>

  <RasterDEMTileSource url="https://tiles.mapterhorn.com/tilejson.json">
    {#if isTerrainVisible}
      <Terrain />
    {/if}
  </RasterDEMTileSource>
  <RasterDEMTileSource url="https://tiles.mapterhorn.com/tilejson.json">
    {#if isHillshadeVisible}
      <HillshadeLayer />
    {/if}
  </RasterDEMTileSource>
</MapLibre>
```

--------------------------------

### Render Contour Lines with MapLibreContourSource

Source: https://svelte-maplibre-gl.mierune.dev/examples/contour

This example shows the implementation of a MapLibre map with contour lines, hillshading, and elevation labels using the MapLibreContourSource component. It requires the @svelte-maplibre-gl/contour package and configures thresholds for different zoom levels.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import {
    HillshadeLayer,
    MapLibre,
    RasterDEMTileSource,
    LineLayer,
    SymbolLayer,
    TerrainControl
  } from 'svelte-maplibre-gl';
  import { MapLibreContourSource } from '@svelte-maplibre-gl/contour';
</script>

<MapLibre
  class="h-[55vh] min-h-75"
  style="https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json"
  zoom={12}
  minZoom={5}
  center={{ lng: 11.35, lat: 47.3 }}
>
  <MapLibreContourSource
    url={'https://tiles.mapterhorn.com/{z}/{x}/{y}.webp'}
    encoding="terrarium"
    maxzoom={14}
    tileOptions={{
      // multiplier: 1,
      thresholds: {
        // zoom: [minor, major]
        5: [500, 2000],
        8: [250, 1000],
        11: [100, 500],
        12: [50, 200],
        13: [20, 100],
        14: [10, 50]
      },
      // optional, override vector tile parameters:
      contourLayer: 'contours',
      elevationKey: 'ele',
      levelKey: 'level'
    }}
    attribution="<a href='https://mapterhorn.com/attribution/'>Mapterhorn</a>"
  >
    {#snippet children(demSource)}
      <RasterDEMTileSource tiles={[demSource.sharedDemProtocolUrl]} maxzoom={14} tileSize={256}>
        <TerrainControl />
      </RasterDEMTileSource>
      <RasterDEMTileSource tiles={[demSource.sharedDemProtocolUrl]} maxzoom={14} tileSize={256}>
        <HillshadeLayer
          paint={{
            'hillshade-exaggeration': 0.5,
            'hillshade-illumination-anchor': 'map',
            'hillshade-shadow-color': '#3080b0'
          }}
        />
      </RasterDEMTileSource>
      <LineLayer
        sourceLayer="contours"
        paint={{
          'line-color': 'rgba(90, 20, 0, 1)',
          'line-width': ['match', ['get', 'level'], 1, 1.5, 0.5]
        }}
      />
      <SymbolLayer
        sourceLayer="contours"
        filter={['>', ['get', 'level'], 0]}
        layout={{
          'symbol-placement': 'line',
          'text-size': 12,
          'text-field': ['number-format', ['get', 'ele'], {}]
        }}
        paint={{
          'text-halo-color': 'white',
          'text-halo-width': 1
        }}
      />
    {/snippet}
  </MapLibreContourSource>
</MapLibre>
```

--------------------------------

### Svelte script with MapLibre imports and reactive state

Source: https://svelte-maplibre-gl.mierune.dev/examples/complex

Svelte 5 runes setup for the map component. Imports required modules and PMTiles protocol, then declares reactive state for map options, layer toggles, colors, sizes, and control position. The `map` variable is a raw state holding the MapLibre map instance.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import type * as maplibregl from 'maplibre-gl';
  import {
    MapLibre,
    RasterTileSource,
    RasterDEMTileSource,
    VectorTileSource,
    GeoJSONSource,
    BackgroundLayer,
    RasterLayer,
    FillLayer,
    LineLayer,
    CircleLayer,
    FillExtrusionLayer,
    NavigationControl,
    FullScreenControl,
    ScaleControl,
    LogoControl,
    GeolocateControl,
    AttributionControl,
    HeatmapLayer,
    TerrainControl,
    Hash,
    HillshadeLayer,
    Terrain,
    Sky,
    Projection,
    Light,
    Marker,
    Popup,
    GlobeControl
  } from 'svelte-maplibre-gl';
  import { PMTilesProtocol } from '@svelte-maplibre-gl/pmtiles';

  let map: maplibregl.Map | undefined = $state.raw();
  let hash = $state(true);
  let sky = $state(true);
  let globe = $state(true);
  let showCities = $state(true);
  let hillshade = $state(true);
  let extrude = $state(false);
  let heatmap = $state(false);
  let pointColor = $state('#ffff00');
  let lineColor = $state('#ff00dd');
  let lineWidth = $state(1.5);
  let circleRadius = $state(3);
  let center: [number, number] = $state([137.3543, 37.062]);
  let zoom = $state(6.0);
  let pitch = $state(0);
  let bearing = $state(0);
  let controlPosition: maplibregl.ControlPosition | undefined = $state('bottom-right');
  let markerLnglat = $state({ lng: 139.767052, lat: 35.681167 });
  let popupOpen = $state(false);
</script>
```

--------------------------------

### GPU-Animated Image with Svelte MapLibre GL

Source: https://svelte-maplibre-gl.mierune.dev/examples/dynamic-image

Renders an animated icon directly into the style image atlas using a WebGL shader. Requires the 'svelte-maplibre-gl/vite' import for GL JS v6+. The example defines a custom StyleImageInterface with a renderWithWebGL callback that draws a neon ring and spark on a framebuffer, and uses a GeoJSONSource with a SymbolLayer to display the icon on the map.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import type * as maplibregl from 'maplibre-gl';
  import { MapLibre, Image, GeoJSONSource, SymbolLayer } from 'svelte-maplibre-gl';

  const SIZE = 128;
  const CITIES = [
    [141.35, 43.06],
    [139.69, 35.68],
    [136.91, 35.18],
    [135.5, 34.69],
    [132.46, 34.4],
    [130.4, 33.59]
  ];

  const VERTEX_SHADER = `#version 300 es
  const vec2 p[3] = vec2[3](vec2(-1, -1), vec2(3, -1), vec2(-1, 3));
  out vec2 uv;
  void main() { gl_Position = vec4(p[gl_VertexID], 0, 1); uv = p[gl_VertexID] * .5 + .5; }`;

  const FRAGMENT_SHADER = `#version 300 es
  precision highp float;
  in vec2 uv; uniform float time; out vec4 color;
  void main() {
    vec2 p = uv * 2. - 1.; float r = length(p), a = atan(p.y, p.x);
    float ring = .02 / abs(r - .48 - .07 * sin(a * 6. - time * 2.));
    float spark = .015 / abs(length(p - .55 * vec2(cos(time), sin(time))) - .06);
    float alpha = smoothstep(1., .72, r) * clamp(.08 + ring + spark, 0., 1.);
    vec3 neon = .5 + .5 * cos(time + r * 7. + vec3(0., 2., 4.));
    color = vec4(neon * alpha, alpha);
  }`;

  let map: maplibregl.Map | undefined;
  let gl: WebGL2RenderingContext | undefined;
  let program: WebGLProgram | null;
  let framebuffer: WebGLFramebuffer | null;
  let timeLocation: WebGLUniformLocation | null;

  function compileShader(context: WebGL2RenderingContext, type: number, source: string) {
    const shader = context.createShader(type)!;
    context.shaderSource(shader, source);
    context.compileShader(shader);
    return shader;
  }

  function setup(context: WebGL2RenderingContext) {
    gl = context;
    program = context.createProgram();
    context.attachShader(program!, compileShader(context, context.VERTEX_SHADER, VERTEX_SHADER));
    context.attachShader(program!, compileShader(context, context.FRAGMENT_SHADER, FRAGMENT_SHADER));
    context.linkProgram(program!);
    timeLocation = context.getUniformLocation(program!, 'time');
    framebuffer = context.createFramebuffer();
  }

  function destroy() {
    if (!gl) return;
    gl.deleteProgram(program);
    gl.deleteFramebuffer(framebuffer);
    gl = undefined;
    program = framebuffer = timeLocation = null;
  }

  const gpuImage: maplibregl.StyleImageInterface = {
    width: SIZE,
    height: SIZE,
    onAdd(value) {
      map = value;
    },
    render() {
      map?.triggerRepaint();
      return true;
    },
    data: {
      renderWithWebGL(target) {
        if (gl !== target.gl) setup(target.gl);
        target.gl.bindFramebuffer(target.gl.FRAMEBUFFER, framebuffer);
        target.gl.framebufferTexture2D(
          target.gl.FRAMEBUFFER,
          target.gl.COLOR_ATTACHMENT0,
          target.gl.TEXTURE_2D,
          target.texture,
          0
        );
        target.gl.viewport(target.x, target.y, target.width, target.height);
        target.gl.useProgram(program);
        target.gl.uniform1f(timeLocation, performance.now() / 1000);
        target.gl.drawArrays(target.gl.TRIANGLES, 0, 3);
      }
    },
    onRemove: destroy
  };
</script>

<MapLibre
  class="h-[55vh] min-h-75"
  style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
  zoom={4}
  center={{ lng: 136.5, lat: 37.5 }}
>
  <Image id="gpu-signal" image={gpuImage} options={{ pixelRatio: 2 }} />
  <GeoJSONSource
    data={{
      type: 'FeatureCollection',
      features: CITIES.map((coordinates) => ({
        type: 'Feature' as const,
        geometry: { type: 'Point' as const, coordinates },
        properties: {}
      }))
    }}
  >
    <SymbolLayer layout={{ 'icon-image': 'gpu-signal', 'icon-allow-overlap': true }} />
  </GeoJSONSource>
</MapLibre>
```

--------------------------------

### Locate the User with GeolocateControl in Svelte MapLibre GL

Source: https://svelte-maplibre-gl.mierune.dev/examples/geolocate

The example displays a log area and a MapLibre map with a GeolocateControl. The control logs events such as trackuserlocationstart, trackuserlocationend, and geolocate with coordinates. The initial log message is 'Press the GeolocateControl button.' and the map uses the CartoDB Voyager style.

```text
Press the GeolocateControl button.

```

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import { MapLibre, GeolocateControl } from 'svelte-maplibre-gl';

  let logString = $state('Press the GeolocateControl button.\n');
  function log(s: string) {
    logString += '» ' + s + '\n';
  }
</script>

<div class="flex h-[55vh] min-h-75 overflow-hidden rounded-md">
  <pre class="m-0! h-full flex-1 rounded-none">{logString}</pre>
  <MapLibre class="h-full flex-1" style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json">
    <GeolocateControl
      position="top-left"
      positionOptions={{ enableHighAccuracy: true }}
      trackUserLocation={true}
      showAccuracyCircle={true}
      ontrackuserlocationstart={() => log('trackuserlocationstart')}
      ontrackuserlocationend={() => log('trackuserlocationend')}
      ongeolocate={(ev) => log(`geolocate ${JSON.stringify(ev.coords, null, 2)}`)}
    />
  </MapLibre>
</div>

```

--------------------------------

### Query source and rendered features with svelte-maplibre-gl

Source: https://svelte-maplibre-gl.mierune.dev/examples/query-features

Query source and rendered features from a MapLibre GL map to place markers and display a list. Uses QuerySourceFeatures and QueryRenderedFeatures components with bind:features to update the features array. The example includes a tabbed interface to switch between source and rendered modes, and requires Tailwind CSS and shadcn-svelte.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import {
    MapLibre,
    GeoJSONSource,
    CircleLayer,
    Marker,
    GlobeControl,
    QuerySourceFeatures,
    QueryRenderedFeatures
  } from 'svelte-maplibre-gl';
  import type * as maplibregl from 'maplibre-gl';
  import * as Tabs from '$lib/components/ui/tabs/index.js';

  let features: maplibregl.MapGeoJSONFeature[] = $state.raw([]);
  let mode: 'source' | 'rendered' = $state('source');
</script>

<div class="flex h-[55vh] min-h-75 gap-x-3">
  <MapLibre
    class="h-[55vh] min-h-75 grow"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3}
    center={{ lng: 120, lat: 20 }}
  >
    <GlobeControl />
    <GeoJSONSource
      id="earthquakes"
      data="https://maplibre.org/maplibre-gl-js/docs/assets/significant-earthquakes-2015.geojson"
      promoteId="ids"
    >
      {#if mode == 'source'}
        <!-- map.querySourceFeatures() -->
        <QuerySourceFeatures bind:features>
          {#snippet children(feature: maplibregl.MapGeoJSONFeature)}
            {#if feature.geometry.type === 'Point'}
              <Marker lnglat={feature.geometry.coordinates as [number, number]} />
            {/if}
          {/snippet}
        </QuerySourceFeatures>
      {/if}
      <CircleLayer paint={{ 'circle-color': 'red', 'circle-radius': 4 }}>
        {#if mode == 'rendered'}
          <!-- map.queryRenderedFeatures() -->
          <QueryRenderedFeatures bind:features>
            {#snippet children(feature: maplibregl.MapGeoJSONFeature)}
              {#if feature.geometry.type === 'Point'}
                <Marker lnglat={feature.geometry.coordinates as [number, number]} />
              {/if}
            {/snippet}
          </QueryRenderedFeatures>
        {/if}
      </CircleLayer>
    </GeoJSONSource>
  </MapLibre>

  <!-- List of earthquakes -->
  <div class="relative basis-[10em]">
    <Tabs.Root bind:value={mode} class="flex h-full flex-col">
      <Tabs.List class="grid w-full grid-cols-2">
        <Tabs.Trigger value="source">Source</Tabs.Trigger>
        <Tabs.Trigger value="rendered">Rendered</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="source" class="min-h-0 shrink overflow-scroll">
        <ul class="m-0 ml-2 overflow-scroll px-3 text-xs">
          {#each features as feature (feature.id)}
            <li>{feature.properties.title}</li>
          {/each}
        </ul>
      </Tabs.Content>
      <Tabs.Content value="rendered" class="min-h-0 shrink overflow-scroll">
        <ul class="m-0 ml-4 overflow-scroll px-3 text-xs">
          {#each features as feature (feature.id)}
            <li>{feature.properties.title}</li>
          {/each}
        </ul>
      </Tabs.Content>
    </Tabs.Root>
  </div>
</div>
```

--------------------------------

### Svelte MapLibre GL 3D Terrain and Sky Example

Source: https://svelte-maplibre-gl.mierune.dev/examples/terrain

Svelte component that renders a MapLibre GL map with 3D terrain and sky. It includes a RasterDEMTileSource for terrain and hillshade, a Sky component, and UI controls for adjusting terrain exaggeration, hillshade settings, and sky colors. The script defines reactive state for all adjustable properties, including hillshade method options and anisotropic filter pitch.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import {
    HillshadeLayer,
    MapLibre,
    RasterDEMTileSource,
    Sky,
    Terrain,
    TerrainControl,
    GlobeControl,
    Light
  } from 'svelte-maplibre-gl';
  import { Checkbox } from '$lib/components/ui/checkbox/index.js';
  import { Label } from '$lib/components/ui/label/index.js';
  import { Slider } from '$lib/components/ui/slider/index.js';
  import * as Tabs from '$lib/components/ui/tabs/index.js';

  // 'hillshade-method' option is available since Maplibre GL JS v5.5.0
  // Note that 'multidirectional' method doesn't work as intended in this
  // example because it requires multiple directions and colors. For the
  // details, please refer to the spec: https://maplibre.org/maplibre-style-spec/layers/#hillshade-method
  const HILLSHADE_METHODS = ['standard', 'basic', 'combined', 'igor', 'multidirectional'] as const;
  type HillshadeMethod = (typeof HILLSHADE_METHODS)[number];

  let mode: 'terrain' | 'sky' = $state('terrain');
  // Terrain
  let exaggeration = $state(1.0);
  let hillshade = $state(0.7);
  let hillshadeMethod: HillshadeMethod = $state(HILLSHADE_METHODS[0]);
  let shadowColor = $state('#004050');
  let accentColor = $state('#aaff00');
  let highlightColor = $state('#ffffff');
  let direction = $state(0.0);
  let altitude = $state(45.0);
  // 'anisotropicFilterPitch' option is available since MapLibre GL JS v5.19.0
  let anisotropicFilterPitch = $state(20);
  // Sky
  let skyEnabled = $state(true);
  let skyColor = $state('#001560');
  let horizonColor = $state('#0090c0');
  let fogColor = $state('#ffffff');
  let skyHorizonBlend = $state(0.5);
  let horizonFogBlend = $state(0.7);
  let fogGroundBlend = $state(0.5);
</script>
```

```svelte
<MapLibre
  class="h-[55vh] min-h-75"
  style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
  zoom={12}
  pitch={72}
  maxPitch={85}
  center={{ lng: 11.39085, lat: 47.3 }}
  {anisotropicFilterPitch}
>
  <GlobeControl />
  <Light anchor="map" />
  {#if skyEnabled}
    <Sky
      sky-color={skyColor}
      horizon-color={horizonColor}
      fog-color={fogColor}
      sky-horizon-blend={skyHorizonBlend}
      horizon-fog-blend={horizonFogBlend}
      fog-ground-blend={fogGroundBlend}
      atmosphere-blend={0.5}
    />
  {/if}
  <!-- Terrain -->
  <RasterDEMTileSource id="terrain" url="https://tiles.mapterhorn.com/tilejson.json">
    <TerrainControl position="top-right" />
    <Terrain {exaggeration} />
  </RasterDEMTileSource>
  <!-- Hillshade -->
  <RasterDEMTileSource url="https://tiles.mapterhorn.com/tilejson.json">
    <HillshadeLayer
      paint={{
        'hillshade-method': hillshadeMethod,
        'hillshade-exaggeration': hillshade,
        'hillshade-shadow-color': shadowColor,
        'hillshade-accent-color': accentColor,
        'hillshade-highlight-color': highlightColor,
        'hillshade-illumination-anchor': 'map',
        'hillshade-illumination-altitude': altitude,
        'hillshade-illumination-direction': direction
      }}
    />
  </RasterDEMTileSource>

  <div
    class="absolute top-3 left-3 z-10 flex min-w-50 flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur-sm"
  >
    <Tabs.Root bind:value={mode} class="flex h-full flex-col">
      <Tabs.List class="grid w-full grid-cols-2">
        <Tabs.Trigger value="terrain">Terrain</Tabs.Trigger>
        <Tabs.Trigger value="sky">Sky</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="terrain" class="min-h-0 shrink overflow-scroll pt-1">
        <div class="mb-4 flex flex-col items-center space-y-2 px-2">
          <Label for="pitch" class="leading-none">Exaggeration ({exaggeration.toFixed(2)})</Label>
          <Slider type="single" id="pitch" bind:value={exaggeration} min={0} max={2} step={0.01} />
        </div>
        <div class="mb-3 flex flex-col items-center space-y-2 px-2">
          <Label for="hillshade" class="leading-none">Hillshade ({hillshade.toFixed(2)})</Label>
          <Slider type="single" id="hillshade" bind:value={hillshade} min={0} max={1} step={0.01} />
        </div>
        <div class="mb-2 flex items-center justify-between space-x-2">
          <Label for="shadow-method" class="leading-none">Method</Label>
          <select bind:value={hillshadeMethod} id="hillshade-method" class="text-center">
            {#each HILLSHADE_METHODS as method (method)}
              <option value={method}>{method}</option>
            {/each}
          </select>
```

--------------------------------

### Control panel and map state display

Source: https://svelte-maplibre-gl.mierune.dev/examples/complex

UI controls for toggling layers, adjusting colors and sizes, selecting control position, and flying to the marker. Includes checkboxes for Cities, Hillshade, Sky, Extrude, Heatmap, and Globe; color pickers for point and line colors; number inputs for circle radius and line width; a select for control position; and a Fly to button that calls `map?.flyTo` with the marker coordinates. Also displays live map state and marker coordinates, plus inputs for zoom, popup open, and hash.

```svelte
<div class="flex items-center gap-x-2 p-1 text-sm">
  <label>
    <input class="rounded border p-1 leading-none" type="checkbox" bind:checked={showCities} />
    Cities
  </label>
  <label>
    <input class="rounded border p-1 leading-none" type="checkbox" bind:checked={hillshade} />
    Hillshade
  </label>
  <label>
    <input class="rounded border p-1 leading-none" type="checkbox" bind:checked={sky} />
    Sky
  </label>
  <label>
    <input class="rounded border p-1 leading-none" type="checkbox" bind:checked={extrude} />
    Extrude
  </label>
  <label>
    <input class="rounded border p-1 leading-none" type="checkbox" bind:checked={heatmap} />
    Heatmap
  </label>
  <label>
    <input class="rounded border p-1 leading-none" type="checkbox" bind:checked={globe} />
    Globe
  </label>
  <label>
    pC:
    <input type="color" bind:value={pointColor} class="inline-block w-7 rounded border leading-none" />
  </label>
  <label>
    pR:
    <input
      type="number"
      min="0"
      max="10"
      step="0.5"
      bind:value={circleRadius}
      class="w-12 rounded border p-1 leading-none"
    />
  </label>
  <label>
    lC:
    <input type="color" bind:value={lineColor} class="w-7 rounded border leading-none" />
  </label>
  <label>
    lW:
    <input
      type="number"
      min="0"
      max="10"
      step="0.5"
      bind:value={lineWidth}
      class="w-12 rounded border p-1 leading-none"
    />
  </label>
  <select bind:value={controlPosition}>
    <option value="top-left">top-left</option>
    <option value="top-right">top-right</option>
    <option value="bottom-left">botom-left</option>
    <option value="bottom-right">bottom-right</option>
    <option value={undefined}>auto</option>
  </select>
  <button
    class="rounded border p-1 leading-none"
    onclick={() => {
      map?.flyTo({ center: markerLnglat, zoom: 15 });
    }}>Fly to</button
  >
</div>
<div class="flex items-center gap-x-4 text-sm">
  <pre
    class="my-1 grow">{`lat: ${center[1].toFixed(3)}, lng: ${center[0].toFixed(3)}, z: ${zoom.toFixed(1)}, pitch: ${pitch.toFixed(1)}, bearing: ${bearing.toFixed(1)}`}</pre>
  <pre class="my-1 grow">marker: {`${markerLnglat.lat.toFixed(3)}, ${markerLnglat.lng.toFixed(3)}`}</pre>
  <label>
    z:
    <input type="number" min="0" max="24" step="0.5" bind:value={zoom} class="w-12 rounded border p-1 leading-none" />
  </label>
  <label>
    <input type="checkbox" bind:checked={popupOpen} /> Popup Open
  </label>
  <label>
    <input type="checkbox" bind:checked={hash} /> Hash
  </label>
</div>
```

--------------------------------

### Change cursor on hover with MapLibre and CircleLayer

Source: https://svelte-maplibre-gl.mierune.dev/examples/cursor

Changes the map cursor on hover by binding the cursor prop to a state variable updated by CircleLayer mouse events. Requires the 'svelte-maplibre-gl/vite' import for GL JS v6+. The example uses Tailwind CSS and shadcn-svelte.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import { MapLibre, GeoJSONSource, CircleLayer } from 'svelte-maplibre-gl';
  import type GeoJSON from 'geojson';

  const CURSORS = [
    'cell',
    'col-resize',
    'context-menu',
    'copy',
    'crosshair',
    'default',
    'grab',
    'help',
    'move',
    'not-allowed',
    'pointer',
    'progress',
    'row-resize',
    'text',
    'vertical-text',
    'wait',
    'zoom-in',
    'zoom-out'
  ];
  const center = [0, 0];
  const data: GeoJSON.FeatureCollection = {
    type: 'FeatureCollection',
    features: CURSORS.map((cursor, i) => ({
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [
          center[0] + Math.cos((i / CURSORS.length) * Math.PI * 2) * 15,
          center[1] + Math.sin((i / CURSORS.length) * Math.PI * 2) * 15
        ]
      },
      properties: { cursor }
    }))
  };

  let cursor: string | undefined = $state();
</script>

<MapLibre
  class="h-[55vh] min-h-75"
  style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
  zoom={2}
  center={{ lng: 0, lat: 0 }}
  {cursor}
>
  <GeoJSONSource {data}>
    <CircleLayer
      onmousemove={(e) => (cursor = e.features![0].properties.cursor)}
      onmouseleave={() => (cursor = undefined)}
      paint={{
        'circle-radius': 12,
        'circle-color': '#007cbf',
        'circle-stroke-color': '#fff',
        'circle-stroke-width': 3
      }}
    />
  </GeoJSONSource>
</MapLibre>
```

--------------------------------

### Put a Marker on the Map

Source: https://svelte-maplibre-gl.mierune.dev/docs/quickstart

Configure the initial zoom and center coordinates, then add a Marker component inside the MapLibre component.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import { MapLibre, Marker } from 'svelte-maplibre-gl';
</script>

<MapLibre
  zoom={5}
  center={[142, 43]}
  class="h-[400px]"
  style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
>
  <Marker lnglat={[141.692222, 42.775]} />
</MapLibre>
```

--------------------------------

### Add the Simplest Map

Source: https://svelte-maplibre-gl.mierune.dev/docs/quickstart

Import the Vite adapter for GL JS v6 compatibility and add the MapLibre component to your page. A height must be defined for the map container.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import { MapLibre } from 'svelte-maplibre-gl';
</script>

<!-- Height must be set, otherwise the map size will be zero! -->
<!-- Our examples use Tailwind CSS classes for styling. -->
<MapLibre class="h-[400px]" style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json" />
```

--------------------------------

### 3D Floor Plan with FillExtrusionLayer

Source: https://svelte-maplibre-gl.mierune.dev/examples/3d-extrusion-floorplan

Creates a 3D indoor map using the fill-extrude-height paint property. Requires the svelte-maplibre-gl/vite import for GL JS v6+. Uses a GeoJSON source with properties for color, height, and base_height to drive the fill-extrusion layer.

```svelte
<script lang="ts">
  import 'svelte-maplibre-gl/vite'; // Required only for GL JS v6+
  import {
    MapLibre,
    RasterTileSource,
    BackgroundLayer,
    RasterLayer,
    GeoJSONSource,
    FillExtrusionLayer
  } from 'svelte-maplibre-gl';
</script>

<MapLibre class="h-[50vh] min-h-75" zoom={16.5} center={[-87.61694, 41.86625]} pitch={40} bearing={30}>
  <BackgroundLayer paint={{ 'background-color': '#e0dfdf' }} />
  <RasterTileSource tiles={['https://tile.openstreetmap.org/{z}/{x}/{y}.png']} tileSize={256} minzoom={0} maxzoom={19}>
    <RasterLayer />
  </RasterTileSource>
  <GeoJSONSource data="https://maplibre.org/maplibre-gl-js/docs/assets/indoor-3d-map.geojson">
    <FillExtrusionLayer
      paint={{
        // Get the fill-extrusion parameters from the source GeoJSON properties.
        //
        // See the MapLibre Style Specification for details on data expressions.
        // https://maplibre.org/maplibre-style-spec/expressions/
        'fill-extrusion-color': ['get', 'color'],
        'fill-extrusion-height': ['get', 'height'],
        'fill-extrusion-base': ['get', 'base_height'],
        'fill-extrusion-opacity': 0.5
      }}
    />
  </GeoJSONSource>
</MapLibre>
```
Tokens:
Raw