svelte-maplibre

To add svelte-maplibre to your project, use the following npm command:

npm install svelte-maplibre

To use ESLint with Svelte in this project, call createConfig(true). This enables the following:

• eslint-plugin-svelte recommended rules (flat/recommended).
• Svelte-Prettier compatibility (flat/prettier).
• Parsing of **/*.svelte files using the TypeScript parser.
• Disables svelte/valid-compile to prevent duplicate warnings in editors.

Note: The configuration automatically includes globals.browser and globals.node.

import { createConfig } from './eslint.config.js';

export default createConfig(true);

To render a map, import the MapLibre component from svelte-maplibre. You can configure the map's center, zoom level, and style URL via props. Note that you must provide a height for the map container via CSS (using :global if the class is applied to the component).

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

The removeSource function safely removes a source from the map. It uses Svelte's tick() to wait for any associated layers to have a chance to remove themselves before attempting to remove the source. To prevent accidental removal of a newly added source that might have reused the same ID, it verifies that the source currently on the map is the exact same object (sourceObj) that was intended for removal.

Parameters:

• map: The MapLibre Map instance.
• sourceId: The ID of the source to remove.
• sourceObj: The original source object that was added, used for identity verification before removal.

import { removeSource } from './path-to-source';

// Assuming 'originalSource' is the object returned or stored from the addition
removeSource(mapInstance, 'my-source-id', originalSource);

The boundsEqual utility compares a provided LngLatBoundsLike parameter against the current map bounds, accounting for floating-point precision.

export function boundsEqual(
  param: LngLatBoundsLike,
  mapBounds: MapLibre.LngLatBounds | undefined
): { equal: boolean; bounds: MapLibre.LngLatBounds }

Use getViewportHash(map) to generate a string representation of the current MapLibre GL map state (zoom, center, bearing, and pitch). This hash can be used to store or share a specific map view via a URL fragment. The resulting string starts with a # and follows the format #zoom/lat/lng[/bearing][/pitch].

import type { Map } from 'maplibre-gl';
import { getViewportHash } from 'svelte-maplibre';

// Assuming 'map' is an instance of MapLibre GL Map
const hash = getViewportHash(map);
console.log(hash); // e.g., "#12/52.52/13.40/0/45"

You can restrict the zoom range for specific components or groups of components using setZoomLimits(min, max). This creates a ZoomRange context that layers can inherit. If a layer has its own zoom settings, they will override the parent's settings, but will still be constrained by the parent's bounds.

import { setZoomLimits, getZoomLimits } from 'svelte-maplibre';

// Set limits for a specific section of your map
setZoomLimits(5, 15);

// Retrieve current limits
const limits = getZoomLimits();
// limits.minzoom and limits.maxzoom

The zoomTransition function creates a MapLibre interpolate expression that changes a value based on the map's current zoom level using a ['linear'] interpolation method. This is commonly used for scaling icon sizes, opacity, or line widths as the user zooms in or out.

import { zoomTransition } from 'svelte-maplibre/expressions';

// Example: Scale icon size from 10 to 30 between zoom levels 5 and 15
const iconSize = zoomTransition(5, 10, 15, 30);

const layer = {
  type: 'symbol',
  layout: {
    'icon-size': iconSize
  }
};

The isTextLayer utility checks if a given maplibregl.LayerSpecification is a symbol layer that contains a text-field layout property. You can optionally restrict the check to a specific source name.

import { isTextLayer } from 'svelte-maplibre/filters';

const layer = {
  type: 'symbol',
  source: 'my-source',
  layout: { 'text-field': '{name}' }
};

const isText = isTextLayer(layer, 'my-source'); // true
const isWrongSource = isTextLayer(layer, 'other-source'); // false

The convertBoundsToUserFormat function converts MapLibre.LngLatBounds into a user-friendly LngLatBoundsLike format (such as a flat array of 4 numbers or nested arrays), depending on the provided param structure.

export function convertBoundsToUserFormat(
  bounds: MapLibre.LngLatBounds,
  param: LngLatBoundsLike | undefined
): LngLatBoundsLike