Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Svelte and Leaflet plugins not importing correctly

$
0
0

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: '&copy; <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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>