Dynamic update of GeoJSON layers

[matthalstead]

I would like to be able to add and remove GeoJSON layers dynamically, initially I thought I could represent each of the layers I want to work with in either an array of layers or as specific explicitly defined layers within the <Maplibre> element.

e.g.

{#each data as d}
    <GeoJSON id="{d.id}" bind:data={d.layer} promoteId="fid">
        <FillLayer
        paint={{
          'fill-color': "red",
          'fill-opacity': 0.5,
        }}
      />
        <LineLayer
          layout={{ 'line-cap': 'round', 'line-join': 'round' }}
          paint={{ 'line-color': "black", 'line-width': 3 }}
        />
    </GeoJSON>
{/each}

or (which I am using at the moment - the following contains the whole script, data is provided by the parent through props)

<script>
    import { MapLibre, GeoJSON, LineLayer, FillLayer, Marker } from 'svelte-maplibre';
	
    export let data;
    export let center;
    let map;

    $: {
        console.log(data)
        console.log(map)
    }
    
    const lngLat = [174.863783, -36.871099]
</script>

<MapLibre
	bind:center={center}
	zoom={14}
	class="map"
    bind:map
	standardControls
	style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json">

    {#if data?.layer_1}
    <GeoJSON id="layer_1" bind:data={data.layer_1} promoteId="fid">
        <FillLayer
        paint={{
          'fill-color': "red",
          'fill-opacity': 0.5,
        }}
      />
        <LineLayer
          layout={{ 'line-cap': 'round', 'line-join': 'round' }}
          paint={{ 'line-color': "black", 'line-width': 3 }}
        />
    </GeoJSON>
    {/if}
    {#if data?.layer_2}
    <GeoJSON id="layer_2" bind:data={data.layer_2} promoteId="fid">
        <FillLayer
        paint={{
          'fill-color': "green",
          'fill-opacity': 0.5,
        }}
      />
        <LineLayer
          layout={{ 'line-cap': 'round', 'line-join': 'round' }}
          paint={{ 'line-color': "yellow", 'line-width': 3 }}
        />
    </GeoJSON>
    {/if}
    {#if data?.layer_3}
    <GeoJSON id="layer_3" bind:data={data.layer_3} promoteId="fid">
        <FillLayer
        paint={{
          'fill-color': "white",
          'fill-opacity': 0.4,
        }}
      />
        <LineLayer
          layout={{ 'line-cap': 'round', 'line-join': 'round' }}
          paint={{ 'line-color': "red", 'line-width': 3 }}
        />
    </GeoJSON>
    {/if}
</MapLibre>

<style>
	:global(.map) {
		height: 800px;
	}

	h1 {
		color: purple;
	}
</style>

This works ok for rendering them and then hiding them based on an update to the layers defined in data, but when I add one back in, e.g. set data.layer_1 back to a Geo JSON object, I get the following error:

style.ts:773 Uncaught (in promise) Error: Source "layer_1" already exists.
    at ae.addSource (style.ts:773:19)
    at Ua.Map.addSource (map.ts:1928:20)
    at $$self.$$.update (GeoJSON.svelte:22:10)
    at init (Component.js:144:5)
    at new GeoJSON (GeoJSON.svelte:58:31)
    at create_if_block_2 (Map.svelte:47:56)
    at Object.update [as p] (Map.svelte:46:25)
    at update_slot_base (utils.js:203:8)
    at Object.update [as p] (MapLibre.svelte:208:26)
    at Object.update [as p] (MapLibre.svelte:207:30)

I suspect that I need to remove GeoJSON layers through an API call instead to a bound map instance, but I don't seem to be able to find out how. Are there any examples of dynamically adding and removing layers?

[dimfeld]

This is actually a bug. I'm working on a fix though it's turning out to be a bit tricky. Should hopefully have some good news for you tomorrow!

[dimfeld]

Filed #87 and opened PR #88. I want to give it another look before merging but expect it some time tomorrow :)

[matthalstead]

That's awesome, thank you.

[dimfeld]

Published v0.5.3 which should fix this. Please feel free to file an issue if you still have problems!

[matthalstead]

Have just tested it and it works perfectly for my use-case. Thanks again.