react-leaflet-markercluster | React wrapper of the official Leaflet | Map library

Let me summarize the app I am working on :

I am creating a React app for finding a soccer club depending on your age, gender and the city where you live.

It works fine for now, but I want the map to center the view on the new markers when they appear in the results.

I've read that we have to initialize the center with {WhenCreated} on the MapContainer, and use useMapEvents to handle the update of the view but I can't manage to nest it or I loose the range of my array of marker..

Here is my code :

TLDR; Is there a way to clear all markers from a marker cluster using react-leaflet and react-leaflet-markercluster?

EDIT: Yes, there is! I just added a key prop to the MarkerClusterGroup, as @SethLutske recommended. Now, every time there is a re-render of the map, the previous markers are removed and only the new ones remain.

I am using React Leaflet and react-leaflet-markercluster. I have a lot of markers and if parent's state is changed, marker cluster rerendering takes longer time. For this reason, cluster components are memoized.

When I click on a polygon, I want to delete it's marker from map and markercluster. I am looking for a way to do it without rerendering markercluster. I tried this code, but it doesn't work:

I am not sure if this is an issue of react-leaflet-markercluster, react-leaflet, leaflet, react, or my code.

I have a map with several thousand markers and I am using react-leaflet-markercluster for marker clustering. If I need to update a global state of MapComponent, there is 1-3 seconds delay when this change is reflected.

I created a codesandox with 5000 markers and you can see there 2 use cases with performance issues:

1.) MapComponent is inside react-reflex element, that allows resizing panel and propagates new dimensions (width, height) to MapComponent. If width and height are changed, mapRef.invalidateSize() is called to update map dimensions. Resizing is extremely slow.

2.) If user clicks on Marker, global state selected is updated. It is a list of clicked marker ids. Map calls fitBounds method to focus on clicked marker and also marker icon is changed. There is around 1 second delay.

In my project, if I need to change a MapComponent state, it takes 2-3 seconds in dev mode when changes are reflected and it is just a single rerender of MapComponent and its elements (markers).

I took a look at Chrome performance profile and it seems like most time is spent in internal React methods.

It is possible to fix this by preventing rerendering using memo, which is similar to shouldComponentUpdate, but it makes whole code base too complicated. preferCanvas option doesn't change anything. I am wondering what is a good way to fix these issues.

I tried to pass property with

by let markerclusterOptions but i think it is not a good way, because it does not work!

in documentation (# React leaflet markercluster v2.0.0): Since now you don't need to use options prop to pass Leaflet.markercluster option into .

I do not understand how do to that.

My React Typescript app is displaying a Leaflet map with marker clusters using react-leaflet & react-leaflet-markerclusterer.

However, I am unable to get the map to show all cluster markers inside the map view. I am attempting to convert this JS solution to Typescript.

One of the errors shown in the. JS console is

React Hook "useMap" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

In VSCode, there is also a Typescript error

Object is possibly 'undefined'.ts(2532)

on the line

I have a React Leaflet map that needs to change its center and zoom when given a set of markers. The zoom should be changed such that all the markers are visible.

This change of view is currently being attempted using the function ChangeView.

Using my code below, I am able to move the map view, but not able to let the map fit to the bounds. Running the code gives the error:

Error: Bounds are not valid.

on the line

i'm trying to authenticate in keycloak in nextjs using @react-keycloak/nextjs but once i pass the login it keep sending me back to keycloak server and returning to the main page until it gives me an error because my token key is expired. This is my _app.js:

I have a Leaflet map in a react app, and I'm using react-leaflet-markercluster in order to cluster markers that are on the exact same coordinates.

I also have a request I make every 5 seconds to get the markers, mostly they are the same markers, but still, when clicking on a cluster marker, after that 5 seconds, all markers are re-rendered, and the spider closes.

You can try and see it in this demo (click and wait, the spider closes): https://stackblitz.com/edit/cluster-keeps-rerendering

Does anyone have an idea of how this can be solved?