Change style (background layer) dynamically

[col16]

Thanks a lot for your library—it's really useful!

I'd like to allow the user to change the map type, switching between political (the default), aerial imagery, and a couple of other custom layers. I'm using SolidJS stores. This is what I have so far:

const Map: Component = () => {
    const [store, { setMapLayer }] = useStore();
    const style = () => store.map.styleURL;
    return (
        <MapGL
            class={styles.Map}
            options={{
                accessToken: <my access token here>,
                style: style(),
            }}
            viewport={{
                center: [0, 15],
                zoom: 2,
            }}
        ></MapGL>
    );
};

However when style() changes the map doesn't change. I think that's because it's lost reactivity, i.e. the value is read when the component is loaded but isn't read again.

Is there a way I could achieve this goal at the moment, or would the library need to be modified?

Cheers,
Cam

[KaiHuebner]

Hi Cam,

Thanks for raising the first issue.
After I done some testing on changing map styles via signals and stores, I changed the MapGL component a bit.
Now it keeps all layers added via the Layer component when you change the map style.

Please update to the latest version.

In the Examples you can see how to change the map style via signals.

This is an example on how to use stores:

const Map: Component = () => {
  const [store, setStore] = createStore({ map: { styleURL: 'mapbox://styles/mapbox/dark-v10' } })

  return (
    <>
      <button onClick={() => setStore('map', 'styleURL', 'mapbox://styles/mapbox/light-v10')}>Light</button>
      <button onClick={() => setStore('map', 'styleURL', 'mapbox://styles/mapbox/dark-v10')}>Dark</button>
      <MapGL
        options={{
          accessToken: '<token>',
          style: store.map.styleURL,
        }}
        viewport={{
          center: [0, 15],
          zoom: 2,
        }}></MapGL>
    </>
  )
}

Please let me know if it's working for you now.

[col16]

Thanks Kai, that worked perfectly for me after updating to the latest version. Really appreciate your help, that's fantastic!

Cheers,
Cam