Structuring MapLibre with Svelte 5 and Custom Map functions

[BenOnTrack]

Hi! I'm currently using maplibre.svelte in my PWA built with Svelte 5. Since I need to develop custom functions that interact with the map instance—and given my limited software engineering background—I’ve been “vibe coding” a bit (sorry 😅). Despite that, I’ve ended up with a working structure that looks like this:

Component Hierarchy

<MapLibre style="..." center="...">
  <MapWrapper>
    <NavigationControl />
    <ScaleControl />
    <VectorTileSource xyz="..." />
  </MapWrapper>
</MapLibre>

MapWrapper.svelte

<script lang="ts">
  import { getMapContext } from "svelte-maplibre/context.svelte.js";
  import { onMount, setContext } from "svelte";
  import { MapManager } from "$lib/utils/map/map.svelte";

  let { children } = $props();

  const { map } = $derived(getMapContext());
  let mapManager: MapManager | undefined = $state(undefined);

  onMount(() => {
    if (map) {
      mapManager = new MapManager(map);
      setContext("mapManager", mapManager);
    }
  });
</script>

{#if mapManager && loaded}
  {@render children()}
{/if}

MapManager (map.svelte.ts)

export class MapManager {
  private map: maplibregl.Map;

  constructor(map: maplibregl.Map) {
    this.map = map;
  }

  getZoom() {
    return this.map.getZoom();
  }

  getMapGeoJSONFeature() {
    this.map.fitBounds(x,y,z)
    ....
  }

  getXYZ() {
   ...
  }
}

How can I write custom functions that use the MapLibre map instance without having to create a dedicated class like MapManager?

I’m looking for simpler or more idiomatic ways to interact with the map directly—ideally something that improves both code readability and execution efficiency. Any tips or best practices for structuring this kind of logic in Svelte 5 would be greatly appreciated!

[dimfeld]

I think the simplest way is to use bind:map on the MapLibre component, and then you can interact with the map. The src/routes/examples/geojson_polygon/+page.svelte file in this repo is one example of doing that.

[BenOnTrack]

Thanks!

It worked with

  let map: maplibregl.Map | undefined = $state()
  let mapManager: MapManager | undefined = $state()
  let loaded = $state(false)

  onMount(() => {
    if (map) {
      mapManager = new MapManager(map)
    }
  })

<MapLibre
  bind:map
  bind:loaded
....