Updating a leaflet map with new markers on click

[enricojr01]

I'm trying to build a small map-based application with svelte, and sveaflet and I'm not sure if the problem I'm having is with one or the other so I'm starting here -

I've got a map that I'd like to update with markers every time the user clicks on it. The idea here is that when someone clicks on the map, the lat/lng coordinates of that click gets sent to PostGIS via a backend, which then queries for all the rows that are within a certain radius of those coordinates. I'd then generate a for each one and place it on the map.

My problem is that, after fetch()ing from the backend, the markers are never drawn on the map. I've tried map.invalidateSize(), and I've tried wrapping the in a {#key ...} to force redraw but markers never display.

I've already checked the backend (no errors), and made sure that data is actually coming down (it's showing up in the console), its just that the markers aren't being drawn. How are you supposed to do this? Or is this kind of use case not supported?

<script lang="ts">
    import { Map, TileLayer, Popup, Marker, Control } from "sveaflet";
    import PopupInfoDisplay from "./PopupInfoDisplay.svelte";

    class Place {
        name: string;
        address: string;
        lat: number;
        long: number;

        constructor(name: string, address: string, lat: number, long: number) {
            this.name = name;
            this.address = address;
            this.lat = lat;
            this.long = long;
        }

        latlong() {
            return [this.lat, this.long];
        }
    }

    let popup;
    let attribution: string =
        "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>";
    let map: Map;
    let markers: Place[] = [];

    $: popupLatLng = [22.297340713458187, 114.17219638824464];

    function getNearest(lat: number, long: number) {
        let searchParams: Record<string, string> = {
            lat: lat.toString(),
            long: long.toString(),
            radius_meters: "200",
        };
        let paramString: string = new URLSearchParams(searchParams).toString();

        fetch(`http://localhost:8000/enrico/nearest?${paramString}`)
            .then((r) => r.json())
            .then((data) => {
                // do I need to cast this to Place?
                // markers = data["results"];
                for (let i = 0; i < data["results"].length; i++) {
                    let item = data["results"][i];
                    let x = new Place(
                        item.name,
                        item.address,
                        item.latitude,
                        item.longitude,
                    );
                    markers.push(x);
                }
                console.log(
                    `Found ${markers.length} restaurants near specified position.`,
                );
                console.log(markers);
                map.invalidateSize();
            })
            .catch((err) => {
                console.log("An error occurred while fetching: " + err);
                return [];
            });
    }

    function onMapClick(e) {
        // need to clear the list so it works from fresh entries
        markers = [];
        console.log(e);
        popupLatLng = [e.latlng.lat, e.latlng.lng];
        getNearest(popupLatLng[0], popupLatLng[1]);
    }
</script>

<div id="mapContainer">
    <Map
        options={{
            center: [popupLatLng[0], popupLatLng[1]],
            zoom: 20,
        }}
        onclick={onMapClick}
        bind:instance={map}
    >
        <TileLayer
            url={"https://tile.openstreetmap.org/{z}/{x}/{y}.png"}
            {attribution}
        />
        <Marker latLng={popupLatLng}>
            <Popup>
                <div>{popupLatLng.toString()}</div>
            </Popup>
        </Marker>
        {#each markers as m}
            <Marker latLng={m.latlong()}>
                <Popup>
                    <PopupInfoDisplay
                        name={m.name}
                        address={m.address}
                        lat={m.lat}
                        long={m.long}
                    />
                </Popup>
            </Marker>
        {/each}
    </Map>
</div>

<style>
    * {
        box-sizing: border-box;
    }

    #mapContainer {
        width: 100%;
        height: 100%;
    }
</style>

[enricojr01]

Ok I figured it out - moving markers = [] into one of the .then() calls did the trick. I'm guessing that the {#each} doesn't trigger unless markers is updated, and markers probably wasn't being updated correctly where it originally was. Sorry for the trouble!