How to change the options of React MarkerClusterGroup when MarkerClusterGroup is a parent element?

Question

Im am using leaflet cluster library (v1.1.8) and i am trying to pass options.

I want the app to stop showing coverage on hover (see picture below).

But whenever i add the options showCoverageOnHover={false} it does not work.

<MarkerClusterGroup  showCoverageOnHover={false}>

  <MarkersLayer
    stationsToDisplay={stationsToDisplay}
    stationsList={stationsList}
    refreshStationsList={this.refreshStationsList}
    StandsToDisplay={StandsToDisplay}
    CARToDisplay={CARToDisplay}
    selectedOption={selectedOption}
  />

  </MarkerClusterGroup >

The documentation shows that the correct code to pass options would be :

<MarkerClusterGroup showCoverageOnHover={false} />

However, i am passing already as a prop :

     <MarkerClusterGroup  >

      <MarkersLayer
        stationsToDisplay={stationsToDisplay}
        stationsList={stationsList}
        refreshStationsList={this.refreshStationsList}
        StandsToDisplay={StandsToDisplay}
        CARToDisplay={CARToDisplay}
        selectedOption={selectedOption}
      />

      </MarkerClusterGroup >

Then how do i pass the option ? I have tried inside the , as below but this does not work

<MarkersLayer
            stationsToDisplay={stationsToDisplay}
            stationsList={stationsList}
            refreshStationsList={this.refreshStationsList}
            StandsToDisplay={StandsToDisplay}
            CARToDisplay={CARToDisplay}
            selectedOption={selectedOption}
            showCoverageOnHover={false}
          />

I am quite a noob in react, so any observation and suggestion would be much appreciated ! thanks a lot

score 1 · Answer 1 · answered Oct 24 '21 at 11:16

1

According to the new API version on 1.1.8, something like this will work:

<MarkerClusterGroup showCoverageOnHover={false} >
  <MarkersLayer
    stationsToDisplay={stationsToDisplay}
    stationsList={stationsList}
    refreshStationsList={this.refreshStationsList}
    StandsToDisplay={StandsToDisplay}
    CARToDisplay={CARToDisplay}
    selectedOption={selectedOption}
  />
</MarkerClusterGroup >

Another example of using markerClusterGroup might be useful:

import MarkerClusterGroup from 'react-leaflet-markercluster';

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>;

answered Oct 24 '21 at 11:16

nima

7,796
12
36
53

1

Thanks for the answer. I tried that that but it does not work . This link shows the same so I think you are right. https://stackoverflow.com/questions/67712024/react-leaflet-clear-marker-cluster-before-rendering-new-markers. But my problem is probably somewhere else – OrganicMustard Oct 24 '21 at 11:27
I'm agreeing with you. You may need to ask another question with details of the error or your expectation and the behavior of the current implementation. @GuillaumeLabs – nima Oct 24 '21 at 11:29

score 0 · Answer 2 · answered Oct 24 '21 at 12:09

By adding the parameters that way in the class itself, fixes the issue :

class MarkerClusterGroup extends MapLayer {
  createLeafletElement(props) {
    const el = new L.markerClusterGroup(
      {
        props,

        showCoverageOnHover:false,
        disableClusteringAtZoom: 13,
    }
      );
    this.contextValue = {
      ...props.leaflet,

      layerContainer: el
    };
    return el;
  }
  
}
export default withLeaflet(MarkerClusterGroup);

How to change the options of React MarkerClusterGroup when MarkerClusterGroup is a parent element?

2 Answers2