Thank you - the above has been fixed. I have now created a second cluster however it is placed on the same coordinates and is now hiding behind the first. Does anyone know how to move this? Thank you!
var markers = new L.MarkerClusterGroup();
var secondmarkers = new L.MarkerClusterGroup();
markers.addLayer(populationMarker = L.marker([currentLatitude, currentLongitude], { icon: populationIcon }).bindPopup(`The population of ${thisCountry.countryName} is ${thisCountry.countryPopulation}.`));
markers.addLayer(capitalMarker = L.marker([currentLatitude, currentLongitude], { icon: cityIcon }).bindPopup(`The capital city of ${thisCountry.countryName} is ${thisCountry.countryCapital}.`));
secondmarkers.addLayer(carMarker = L.marker([currentLatitude, currentLongitude], { icon: carIcon }).bindPopup(`They drive on the ${thisCountry.carSide} of the road in ${thisCountry.countryName}.`));
secondmarkers.addLayer(currencyMarker = L.marker([currentLatitude, currentLongitude], { icon: dollarIcon }).bindPopup(`They use the ${thisCountry.currencyName} in ${thisCountry.countryName}.`));
//add cluster to map
mymap.addLayer(markers);
//add second cluster to map
mymap.addLayer(secondmarkers);
CodePudding user response:
You are adding the created marker to the map too and this is wrong (icon: carIcon }).addTo(mymap).bindPopup(
).
Change
markers.addLayer(carMarker = L.marker([currentLatitude, currentLongitude], { icon: carIcon })
.addTo(mymap)
.bindPopup(`They drive on the ${thisCountry.carSide} of the road in ${thisCountry.countryName}.`));
to
markers.addLayer(carMarker = L.marker([currentLatitude, currentLongitude], { icon: carIcon })
.bindPopup(`They drive on the ${thisCountry.carSide} of the road in ${thisCountry.countryName}.`));