Anyone know how to dynamically add data to the map AFTER component creation?

[wx007]

Anyone know how to dynamically add data to the map AFTER component creation?

[dimfeld]

You just update the data that you’re passing into the GeoJSON source. Keep in mind that normal Svelte reactivity rules apply so just doing an array push won’t trigger an update.

[wx007]

Thank you for your quick response! It's working now.
I forgot Svelte reactivity is triggered by assignment, not array / object mutation.

For the benefit of anyone new to Svelte and SK (like me), this is what worked:

<script>

    let heatmapData = {
        type: "FeatureCollection",
        features: []
     }

    . . .
   
    // Your function to receive a single geolocation record from the server 
    // and assign it to the "inbound" variable goes here
   
    . . .


    // drop new data into a Feature template
    let newHeatmapDataPoint = {
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [ inbound.lon, inbound.lat ]  // required
        },
        properties: {
            id: inbound.id,
            time: inbound.date,
            mag: inbound.magnitude  // required
         }
     }

    heatmapData.features.push( newHeatmapDataPoint )  // all records kept here
    heatmapData = heatmapData  // <---- force Svelte to push updated heatmapData to GeoJSON component  

</script>

<MapLibre ... >
    <GeoJSON id="myheatmap" bind:data={ heatmapData }>

[dimfeld]

Glad you got it working! :)