🌲Svelte + 🍃Leaflet + 📍 Clusters

For a personal project, I had to use Leaflet with Svelte, and I faced some problems during development.

In this article, I will list each point that required finding a solution.

Integrating Leaflet into a SvelteKit project

I highly recommend that you read the article Using Leaflet with SvelteKit written by Stanislav Khromov.

He explains an effective way to add Leaflet to a project made with SvelteKit. It was my starting point in my project.

Install Leaflet.markercluster plugin

You can retrieve this plugin from its official repo on Github : Leaflet.markercluster.

I used npm to add it to my project.

npm install leaflet.markercluster 

Now, it needs to be integrated into the code of the file LeafletMap.svelte.

onMount(async () => { if (browser) { const leaflet = await import('leaflet'); const { MarkerClusterGroup }: any = await import('leaflet.markercluster'); 

Afterwards, we can declare the variable lower in the file, and add each marker to the markers element. Finally, add all the markers to the map.

// L.MarkerClusterGroup extends L.FeatureGroup // by clustering the markers contained within let markers = new MarkerClusterGroup(); // create feature group // for each marker, add it to markers markers.addLayer(marker); // Add all markers to map map.addLayer(markers); 

Of course, don’t forget to add the CSS style.

@import 'leaflet.markercluster/dist/MarkerCluster.Default.css'; 

Bug of icons in production environment

The Leaflet framework can give an error once the project is deployed, the path to the icon causes a 404 (not found) error. To remedy this, one of the solutions is to manually define the icon with an image available in the project’s assets.

const iconRetinaUrl = './images/leaflet/marker-icon-2x.png'; const iconUrl = './images/leaflet/marker-icon.png'; const shadowUrl = './images/leaflet/marker-shadow.png'; const iconDefault = leaflet.icon({ iconRetinaUrl, iconUrl, shadowUrl, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], tooltipAnchor: [16, -28], shadowSize: [41, 41] }); 

Afterwards, you need to use the iconDefault variable in the marker definition, for example:

leaflet.marker(coords, { icon: iconDefault }) 

By using the iconDefault variable in the marker definition, you can ensure that all markers use the same default icon.

Et voilà 🎉

These are the only errors I had to correct during my development, I hope this article will be useful to you.