I've encountered a bit of a weird error with Leaflet and Svelte, and I'm not sure if it is my mistake or not.
I have a component that encapsulates my Leaflet map, in Svelte's $lib
directory. Anytime I attempt to bind a click to the map (so I can return the event), I get the following console error (only on the webpage)
SyntaxError: missing ) after argument list in app.js:16:40
This is a file I don't have access to, and can only assume its generated by Svelte during compilation.
I've tried to bind it after the map is created using
$: if(map){ if(bounds){ map.fitBounds(bounds); }else if(view && zoom){ map.setView(view, zoom); } map.on('click', (/** @type {any} */e) => console.log(e))}
as well as on the map creation
onMount(() => { map = L.map(mapElement) .on('zoom', (/** @type {any} */ e) => dispatch('zoom', e)) .on('popupopen', async (/** @type {any} */ e) => { await tick(); e.popup.update(); }) .on('click', (/** @type {any} */e) => console.log(e)); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);});
It is worth noting both the other .on
's work.
However both attempts above result in the page not loading, an internal server error (500) and the error code shown above.
Does anyone know why this might be?
Appreciate the help, thank you