[question] Caching Issue

[cbaker]

When changing the data in the state that gets rendered to the map our markercluster reference to .getAllChildMarkers() appears to have mixed cache & new data.

When logging the context value, it appears to be 100% correct, however, if I log the value of cluster.getAllChildMarkers() in the iconCreateFunction that I've made, I get a mix between newly added data & stale "cached" data that shouldn't be in there.

I think this is due to updateLeafletElement not being implemented. Our position may not change for some markers, however, the values will, thus resulting in this pseudo caching.

[cbaker]

Some of our code that demonstrates usage.

<MarkerClusterGroup
            onclustermouseover={handleClusterMouseover}
            ref={clusterRef}
            iconCreateFunction={markerClusterIcon}
            removeOutsideVisibleBounds
            chunkedLoading
        >
            {/* this visible array has the good values in it, so its not this. */}
            {visible.map(v => (
                <ComposedMarker
                    key={v.UNIQUE_IDENTIFIER}
                    position={v.location}
                    icon={markerIcon(v)}
                    status={v.status}
                    value={v[map.key]}
                    name={v.name}
                    id={v.UNIQUE_IDENTIFIER}
                />
</MarkerClusterGroup>

[filipomar]

I have faced what I think is a variation of the same issue, from what I understood, from the behaviour and looking at the code, it seems once the function is initially set, the iconCreateFunction will never be updated.

If you change the key on MarkerClusterGroup it will work though, as it will force react to dump the old instance and create the new one.

[cbaker]

I have faced what I think is a variation of the same issue, from what I understood, from the behaviour and looking at the code, it seems once the function is initially set, the iconCreateFunction will never be updated.

If you change the key on MarkerClusterGroup it will work though, as it will force react to dump the old instance and create the new one.

I ended up just using natively built leaflet markers & using the cluster ref to append them.

[mauron85]

the iconCreateFunction will never be updated.

since I don't see any specific handler for iconCreateFunction, isn't this react-leaflet problem?

EDIT: I'll answer this myself. No it isn't. This plugin just doesn't implement updateLeafletElement

[mauron85]

I've came out with following addition. It requires id prop (must be same as key) to be added to the Marker

  updateLeafletElement(fromProps, toProps) {
    const { children: fromChildren } = fromProps;
    const { children: toChildren } = toProps;

    const markers = this.leafletElement.getLayers();
    toChildren.forEach(({ key, props }) => {
      const marker = markers.find(({ options }) => options.id === key);
      if (marker) {
        const { children, ...restProps } = props;
        L.setOptions(marker, restProps);
      }
    });

    this.leafletElement.refreshClusters(markers);
  }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Thiti-Dev]

I've came out with following addition. It requires id prop (must be same as key) to be added to the Marker

  updateLeafletElement(fromProps, toProps) {
    const { children: fromChildren } = fromProps;
    const { children: toChildren } = toProps;

    const markers = this.leafletElement.getLayers();
    toChildren.forEach(({ key, props }) => {
      const marker = markers.find(({ options }) => options.id === key);
      if (marker) {
        const { children, ...restProps } = props;
        L.setOptions(marker, restProps);
      }
    });

    this.leafletElement.refreshClusters(markers);
  }

I need more information on this. For me, the iconCreateFunction is still not updating it still show the same cluster icon color(but the number of the marker in the cluster is showing correctly)

[TimMcCauley]

Related https://github.com/yuzhva/react-leaflet-markercluster/issues/149#issuecomment-854920761