CODEWITHSUNDEEP
reactjsreact-leafletleaflet.markercluster
zweistein
zweistein

Reputation: 108

How can I open a markercluster programmatically

I want to be able to click on a list and make the map flyTo the position of a marker and open its popup. I'm able to do so as long as the marker has an identical position (not spiderfied). I've made a script to find the markerCluster which contains the marker, but I can't trigger its click method, to make the marker accessable.

// if marker is not accessible
Object.values(mapRef.current._targets).forEach(_target => {                                     
                                        if (_target._markers) {
                                            const wantedMarker = _target._markers.find(_marker => {
                                                
                                                return (
                                                    _marker.options.id === someId
                                                );
                                            });
                                            if (wantedMarker) {
                                                _target.click() // _target.click() is not a function

Upvotes: 0

Views: 737

Answers (2)

zweistein
zweistein

Reputation: 108

Solved it by looking for "_icon" in all parent elements. Elements hidden by markerCluster does not have this property. The _icon element has click events, so I used that to open the marker clusters.


const openMarkerClustersAndMarkerPopup = (allMarkersRef, markerId) => {
    const markerElementRef = allMarkersRef.current[markerId];

    if (markerElementRef._icon) {
        markerElementRef._icon.click();
    } else {
        const clusters = [];

        let _currentElement = markerElementRef;
        while (_currentElement.__parent) {
            clusters.push(_currentElement);

            if (_currentElement._icon) {
                break;
            }
            _currentElement = _currentElement.__parent;
        }
        // Trigger markercluster and marker by starting with top markercluster
        for (let i = clusters.length - 1; i >= 0; i--) {
            const _icon = clusters[i]._icon;
            _icon && _icon.click();
        }
    }
};

Upvotes: 1

Seth Lutske
Seth Lutske

Reputation: 10772

Without a living code example, I can't confirm that wantedMarker is indeed the instance of the marker you want. But if its, .click() is indeed not a function on that. However, you can get the marker's popup, if there is one, and open that programatically:

const popup = wantedMarker.getPopup();
if (popup){
  popup.openOn(map) // you'll need a reference to the L.map instance for this
}

Upvotes: 1

Related Questions