Uncaught (in promise) TypeError: L.MarkerClusterGroup is not a constructor at L.markerClusterGroup (MarkerClusterGroup.js:1397:9)
ajaythakkar opened this issue · comments
- I'm reporting a bug, not asking for help
- I'm sure this is a Leaflet.MarkerCluster code issue, not an issue with my own code nor with the framework I'm using (Nuxt 3)
- I've searched through the issues to make sure it's not yet reported
How to reproduce
- Leaflet version I'm using: "^1.9.3"
- Leaflet.MarkerCluster version I'm using: "^1.5.3"
- OS/Platform (with version) I'm using: Windows 11
- Framework : Nuxt 3
- step 1 : Load first time index.vue
- step 2 : Change page horses/index.vue (/horses) and back to index.vue (/)
##code
First time working after switch to page it is not working
// Initialize the map
const map = L.map('map').setView([0,0], 13);
L.tileLayer('https://map.fit-q.net/osm/{z}/{x}/{y}.png', {
attribution: '',
maxZoom: 18,
zoom: 2,
}).addTo(map);
map.setZoom(4);
const circleWithText = (markers,latLng, txt, circleOptions) => {
let pMarker = new L.Marker(latLng);
pMarker = new L.Marker(latLng, {
title: "txt",
radius: 24.5,
color: '#FFFFFF',
weight: 3,
fillOpacity: 1,
fillColor: circleOptions.fillColor || 'green',
icon: L.divIcon({html: `<b style="background-color: ${circleOptions.fillColor || "#964B00"}; color: white; border-radius: 50%; width: 50px; height: 50px; line-height: 20px; padding-top: 15px; display: inline-block; text-align:center;"> 1 </b>` })
});
markers.addLayer(pMarker);
const group = L.layerGroup(markers);
return(group);
}
//const markers = L.markerClusterGroup();
const markers = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true,
iconCreateFunction: function (cluster) {
return L.divIcon({html: '<b style="background-color: #964B00; color: white; border-radius: 50%; width: 50px; height: 50px; line-height: 20px; padding-top: 15px; display: inline-block; text-align:center;">' + (cluster.getChildCount() == 0 ? 1 : cluster.getChildCount()) + '</b>'});
}
});
horsesLocation?.value?.value.forEach((horse, index) => {
//console.log("horse single ",horse);
if (horse.latitude && horse.longitude) {
circleWithText(markers,
[horse.latitude, horse.longitude], 1,
{
radius: 30, color: '#964B00',
fillOpacity: 0.8, fillColor: '#964B00'
}).addTo(map);
}
});
console.log("markers : ",markers)
map.addLayer(markers);
}```
This is worked for me.
nuxt.config.js
plugins: [ // Other plugins... { src: '~/plugins/leaflet-markercluster.js', ssr: false } ],
lugins/leaflet-markercluster.js
import L from 'leaflet';
import "leaflet.markercluster";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import "leaflet/dist/leaflet.css";
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(L);
})