getMapContext() - how does it work ?

[BenOnTrack]

Hi,

I'm trying to access the map object in some child component. For instance, I have a drawer component that contains a button. When the user clicks on the button, I would like the map to flyTo some coordinates. Basically, it's very similar to controls except my child component is not part of the Maplibre component (if that makes sense?)

I've tried with

import { getMapContext } from "svelte-maplibre";
const { map } = $derived(getMapContext());

function handleClick() {
map.flyTo({
    padding: { bottom: 150 },
    center: [10,10],
    zoom: 14,
    essential: true,
    speed: 1.5
  });
  }
...

but got the error TypeError: Cannot read properties of undefined (reading 'map')

Is the getMapContext() exposed outside of the MapLibre component ?
If not, what's best practice and how to access the map object anywhere in the code ?

Thanks in advance for your feedback.

[dimfeld]

It's just a wrapper around getContext, so the context only exists inside the MapLibre component which sets it.

This also came up in #247 which has some ideas on how you could try making this work, but as of right now it would require a small fork/patch to the package.

[BenOnTrack]

Thank you!

So as long as all my components "live" under the MapLibre component, I will have access to the getMapContext (which I confirm is working). The workaround is to createMapContext at the top level of my App, with the potential side effects as described under #247