Change and re-draw FillLayer on change of sourceLayer

[bootje]

First of all, thanks for this great library. It enables me as a relatively inexperience (hobbyist) developer to get a lot done with maplibre. Currently I have an issue with drawing FillLayer when i change the layer in a VectorTileSource. I have already tried many things that did not work out and I would really like to know whether I do something wrong, or the thing I want to achieve with svelte-maplibre is not possible.

I have set up a minimal example of my problem here: https://codesandbox.io/p/devbox/musing-hill-rdcwnw

• The Map.svelte file in $lib/Map.svelte contains a maptiler Vector source. This tile database contains 3 layers of the states California, Nevada and Utah.
• /src/routes/+page.svelte contains a basic page with 3 radio buttons. On the change of these buttons i want to grab a different layer in the tile set. Hence, when California is selected I want that layer to appear on the map, and similar for Nevada and Utah.

Among others, I have tried to fiddle with the mapInstance binding in the component and tried to use a writable store to pass the choice value, but without success. I could not find a solution in the other discussion topics either (#86 was closest related). What I did notice is that the layer does re-draw when i select a different radio button and subsequently change something in the Map.svelte file (e.g. the line-width of the lineLayerId). This is why I believe it should be possible, but I'm missing how. The sourceLayer={layer} in line 30 and 37 of Map.svelte is clearly too naive.

Thanks in advance for any help!

[dimfeld]

Looks like Layer.svelte only handles the sourceLayer prop on instantiation, and it needs to change to update the layer reactively when that prop changes.

edit: removed mistaken possible solution

I'm not quite sure what is the proper way to do that yet, but I can look into it more tonight or tomorrow.

Might work to just edit the style? https://stackoverflow.com/questions/70109527/mapbox-change-source-property

[dimfeld]

Created #140 since this looks like an actual bug.

[bootje]

Thanks for your quick response Daniel and I really appreciate you taking a look at this! Based on the Stack Overflow link I also still made an attempt, but without success. As a result there are quite some commented out log messages in the codesandbox.io example that i provided. As far as I can judge, the getStyle() suggestion does not work, because it's not possible to obtain map from the component, in the console logs I get the error:

Uncaught (in promise) Error: <MapLibre>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'

[dimfeld]

You can get the map by binding to the map property or by listening to the load event. Anyway, I tried it and indeed it doesn't seem to work to update the source-layer property using setStyle.

So my recommendation would be to put Svelte's {#key} construct (https://svelte.dev/docs/logic-blocks#key) around any Layer components that need to update their sourceLayer, like this:

{#key layer}
<LineLayer
      id="lineLayerId"
     paint={{
	  'line-opacity': 0.6, 
           'line-color': 'rgb(53, 175, 109)',
	  'line-width': 2
	}}
   sourceLayer={layer}
/>
<FillLayer
	paint={{
		'fill-opacity': 0.6,
		'fill-color': 'rgb(53, 175, 109)',
	}}
	sourceLayer={layer}
  />
{/key}

This tells Svelte to tear down and recreate the Layer components whenever the layer property changes. I tried it out on my computer and it seems to work well. It's unfortunate that I can't support this better, but hopefully this will work for your needs too.

[bootje]

Hi Daniel, thanks so much for this suggestion. It works on my side as well and i actually think that conceptually this is what i want to do, namely remove the old layer and add a new one. Instead of delegating this to MapLibre, Svelte now directly deals with this.

👍