Dynamically updating LineLayer paint properties

[wx007]

Can someone tell me if it's possible to dynamically update the paint properties of a LineLayer?

For example, if I have this layer:

 <GeoJSON id="outlines" data={continentalOutlineData}>
    <LineLayer
        id="continentalOutlines"
        layout={{ "line-cap": "round", "line-join": "round" }}
        bind:paint={outlineOptions}
    />
 </GeoJSON>

And the outlineOptions object looks like this:

  let outlineOptions = {
     "line-color": "#cccccc",
     "line-width": 1,
     "line-opacity": 1.0,
   }
   $: if(outlineOptions["line-color"]) {
        outlineOptions = outlineOptions  // is this correct way to force an update to the bound property?
        console.log('outlineOptions: ', outlineOptions)
    }

When my site changes color themes there's a function that inserts a new color into the line-color property of outlineOptions.
The reactivity block below it triggers correctly when this update occurs but the color change does not propagate to the LineLayer.

Can someone please tell me if I'm missing something or approaching this the wrong way?
Thanks!

[dabreegster]

1. You don't need bind:paint, because LineLayer doesn't reassign that variable
2. I don't think you need the reactive block you posted at all. Instead, the piece of code that inserts or changes "line-color" should do the outlineOptions = outlineOptions to tell Svelte about the update. The if outlineOptions["line-color"] block would only run if Svelte thinks outlineOptions is updated elsewhere

[wx007]

Thanks for your quick reply.
I removed the bind:paint and moved outlineOptions = outlineOptions to the block that actually changed the color.
Based on logs, line-color is updating correctly in the data structure but the paint options are still not updating on the LineLayer.

One thing I noticed is that if I use bind:paint={outlineOptions} I get a style change event from the map after the outlineOptions object is updated. If I use just paint={outlineOptions} no such style event is triggered.
Digging in to the event object, I found the line layer that should be changing color and it's RGBA values are consistent with what I see on the screen (ie. the non-updated color).

Dynamically changing the color of a line seems like it would be a pretty commonly-used operation. The official Maplibre website even has an example of how to do it: https://maplibre.org/maplibre-gl-js/docs/examples/color-switcher/
They use map.setPaintProperty to accomplish the task but I've not yet had any luck trying to implement it in svelte-mapibre.

I must be missing something,
Does the layer have to be destroyed and replaced? Is my assumption that I can just update the paint properties wrong?
I'll keep digging for answers but I was hoping it might be something simple I haven't heard about yet.

[wx007]

Finally figured it out. After revisiting the setPaintProperty method I'm able to change the outline color on the map using the format:

myMap.setPaintProperty('layerId', 'paintPropertyName', newColorValue] )

Just be sure the map instance exists first.
And no need to bind the data object to the paint property in LineLayer. Just use paint={myPaintPropertyObject}
Thanks dabreegster for you suggestions that helped find the answer.

[dimfeld]

FWIW you should have been able to just update outlineOptions and have it apply, so long as Svelte picks up on the change. I've written code that does this and it works fine.

Without seeing the full app code it's hard to guess why it wasn't working. Glad you figured something out though :)