Highlighting tilemap elements when using the Marker Cluster plugin
I am using Leaflet along with Marker Cluster plugin in AngularJS app.
When selecting a map element, I need to highlight it. Since I am using divIcons I add or remove a class and also set the color if the element is not a marker.
To do this, I keep the last clicked item in memory, so that when the next item is selected, I can deselect the previous item and highlight the current one.
// De-highlight previous item
if (lastClickedLayer) {
if (lastClickedLayer instanceof L.Marker) {
lastClickedLayer._icon.classList.remove('marker-highlighted');
}
else {
lastClickedLayer.setStyle({
color: (lastClickedLayer.feature.status === 'active') ? '#43A7E0' : '#EB7938'
});
}
}
// Highlight item on the map
lastClickedLayer = e.layer;
if (e.layer instanceof L.Marker) {
e.layer._icon.classList.add('marker-highlighted');
}
else {
e.layer.setStyle({
color: '#32C9AC'
});
}
Everything would be fine if it weren't for the Marker cluster! When I zoom out and get a cluster of the current markers (say I first select one marker) and then zoom back to that cluster, my selected marker did not assign the marker highlighted class.
Also, if I'm at the end of the zoom and clusters window, you will see spiderwebweb markers (or whatever they call them), when the cluster where the selected marker is selected is closed, I can't seem to unclass that layer - it just gets undefined.
How can I solve my problems?
Oh, and my map objects are saved as a new L.MarkerClusterGroup ().
source to share
You can try removing the marker from the cluster when you select it ...
markerCluster.removeLayer(selectedMarker);
map.addLayer(selectedMarker);
and put it back in the cluster when it's canceled ...
map.removeLayer(selectedMarker);
markerCluster.addLayer(selectedMarker);
Here you can see an example that shows a single selection.
Every time you create a marker you add this click handler ...
m.on('click', function(e) {
if(selectedMarker != false) {
map.removeLayer(selectedMarker);
markerCluster.addLayer(selectedMarker);
selectedMarker.setIcon(unselectedIcon);
if(selectedMarker == e.target) {
console.log('clear selection');
selectedMarker = false;
}
else {
console.log('change selection');
selectedMarker = e.target;
selectedMarker.setIcon(selectedIcon);
markerCluster.removeLayer(selectedMarker);
map.addLayer(selectedMarker);
}
}
else {
console.log('new selection');
selectedMarker = e.target;
selectedMarker.setIcon(selectedIcon);
markerCluster.removeLayer(selectedMarker);
map.addLayer(selectedMarker);
}
});
However, I see 2 cons:
- You need to use another event if you want the popup
- Marker movements as they are retrieved or added to the cluster can interfere with the user
source to share