I want to add various plugins to leaflet, such as: leaflet.markercluster.
On the internet I found an example to make leaflet work on svelte and I noticed that leaflet is imported via an asynchronous function.
This is my Map.svelte component:
<script> import { onMount, onDestroy } from 'svelte'; import { browser } from '$app/environment'; let mapElement; let map; let markers = [ { lat: 51.5, lng: -0.09, popupText: 'a' }, { lat: 51.51, lng: -0.1, popupText: 'b' }, ]; onMount(async () => { if (browser) { const leaflet = await import('leaflet'); await import('leaflet.markercluster'); map = leaflet.map(mapElement).setView([51.505, -0.09], 13); leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // Create marker cluster group const markerClusterGroup = leaflet.markerClusterGroup(); // Loop through the markers array and create individual markers markers.forEach(marker => { const { lat, lng, popupText } = marker; const individualMarker = leaflet.marker([lat, lng]).bindPopup(popupText); markerClusterGroup.addLayer(individualMarker); }); // Add the cluster group to the map map.addLayer(markerClusterGroup); } }); onDestroy(async () => { if (map) { console.log('Unloading Leaflet map.'); map.remove(); } });</script><main><div bind:this={mapElement}></div></main><style> @import 'leaflet/dist/leaflet.css'; @import 'leaflet.markercluster/dist/MarkerCluster.css'; @import 'leaflet.markercluster/dist/MarkerCluster.Default.css'; main div { height: 800px; }</style>
When I try to do the same thing with leaflet.markercluster it doesn't work. What am I doing wrong?
Edit:
I tried inserting the {#await} block but it doesn't change anything.Now the +page.svelt
<script> import Map from "./Map.svelte";</script><h1>Mappona</h1>{#await Map} Loading...{:then Map}<Map />{/await}
Error:Uncaught (in promise) TypeError: leaflet.markerClusterGroup is not a functionat Map.svelte:25:48