How can I update the source and layer data on the rendered map?

[sbutler-gh]

Is there any way to programatically update the source and layer data on the rendered map?

For example, on map initialization, including code like this:

    map.addSource("selectedLocation", {
        type: "geojson",
        data: selectedLocationData
    });
    map.addLayer({
        id: "selectedLocationHighlight",
        type: "fill",
        source: "selectedLocation",
        paint: {
            "fill-color": "blue"
        }
    });

And when the location changes (via Geocoder), I would fetch a geojson for that location and update the map's source and layers liks this:

var selectedLocation = mapComponent.getSource('selectedLocation')
selectedLocation.setData(newLocationGeojson)

My code is similar to the demos in the readme, and I've tried a few ways -- for example, mapComponent.getSource('selectedLocation')

But everything is returning errors thus far.

Any help/advice would be much appreciated!

[sylvain75]

Hi, I am having the same issue, did you find any solution ?

[sbutler-gh]

Hi, I am having the same issue, did you find any solution ?

In the SvelteMapbox example, there's a component called "Earthquakes" which is where the local data is set. You can see how the source and layers are configured in there.

For my case, I changed the Earthquakes.svelte component to Geometries.svlete. This is how I'm loading it in my __layout.svelte file:

  <Map
accessToken="XXXX"
    bind:this={mapComponent}
    on:recentre={e => { console.log(e.detail); } }
    {center}
    on:click={handleMapClick}
    bind:zoom
    style={style}
  >

  {#if geometries}
  <Geometries geometries={geometries} />
  {/if}
  
</Map>

Whenever the data changes, I set geometries = false — which destroys the <Geometries> component.

I then set geometries = {new map data}. This re-creates the <Geometries> component, with the new map data — so the updated data renders as expected.

P.S. I also had to move the svelte-mapbox folder from the modules into src/lib and import them from there, so I could edit the components as desired, and for those changes to work into production.

[sbutler-gh]

Sorry, I realized I shouldn't have closed the issue, although the solution above worked well for me

[sylvain75]

Thanks to put me on the track, the Earthquakes example misled me and I did not think it was a custom marker.

[boraerden]

thanks to everyone on this thread for helping with a similar issue.

Sharing my solution because @sbutler-gh 's solution above did not work for me: I'm not able to set geometries = false in such a way to destroy the <Geometries> component.

However wrapping <Geometries> in a key block did the trick for me, as below:

{#if geometries}
    {#key geometries}
        <Geometries geometries={geometries} />
    {/key}
{/if}