react leaflet cluster

[LeilaEb]

hi,
have error: 0 , react__WEBPACK_IMPORTED_MODULE_0__.use) is not a function
when use MarkerClusterGroup get above error .

react-leaflt v 4.2.1
leaflet v 1.9.4
react-leaflet-cluster v 2.1.0
react v 18

`export default function LocationContainer(props) {
const [t] = useTranslation();
const [locations, setLocations] = useState([]);
const [recId, setRecId] = useState();
const [recData, setRecData] = useState();
const responseRecord = useGetIORecordById(recId);
const locationIcon = L.icon({
iconUrl: location,
iconRetinaUrl: location,
iconSize: [20, 20],
});

useEffect(() => {
if (responseRecord) {
setRecData(responseRecord);
}
}, [responseRecord]);

useEffect(() => {
if (props.locations) setLocations(props.locations);
else setLocations([]);
}, [props.locations]);

const createClusterCustomIcon = function (cluster) {
return new divIcon({
html: <span class="cluster-icon">${cluster.getChildCount()}</span>,
className: "custom-marker-cluster",
iconSize: point(33, 33, true),
});
};

return (

<div
style={{
padding: "5px",
margin: "5px",
}}
>
<MapContainer
scrollWheelZoom={true}
bounds={props.markers}
style={{
height: "400px",
width: "100%",
position: "inherit",
margin: "0 auto",
zIndex: 1,
}}
dragging={true}
placeholder
>


{locations !== undefined &&
locations !== null &&
locations?.length > 0 &&
locations.map((item, index) => (
<>
<Marker
key={index}
position={[Number(item?.Latitude), Number(item?.Longitude)]}
icon={locationIcon}
eventHandlers={{
click: (e) => {
setRecId(item.Id);
},
}}
>

<div style={{ with: 500 }}>




</>
))}

{/* /}
{/ /}
{/ */}



);
}`

[linear]

ENG-4761 react leaflet cluster

[HamidRezaAttar]

Hi @LeilaEb, I had the same problem, I found about a package called folium which basically ports everything from leafletjs. Here is a sample code that I used for clusters.

import reflex as rx
import folium
from folium.plugins import MarkerCluster


def index() -> rx.Component:

    map = folium.Map(tiles="cartodbpositron", max_bounds=True)
    marker_cluster = MarkerCluster().add_to(map)
    folium.CircleMarker(
        location=[51.505, -0.09], radius=15, fill=True, tooltip="Test 1"
    ).add_to(marker_cluster)
    folium.CircleMarker(
        location=[51.505, -0.09], radius=15, fill=True, tooltip="Test 2"
    ).add_to(marker_cluster)
    folium.CircleMarker(
        location=[51.505, -0.09], radius=15, fill=True, tooltip="Test 3"
    ).add_to(marker_cluster)

    return rx.container(rx.html(map._repr_html_()))


app = rx.App()
app.add_page(index)

[LeilaEb]

fix problem.

1. uninstall react-leaflet
2. uninstall react-leaflet-cluster
3. delete node.Module folder
4. npm i --legacy-peer-deps
5. npm i [email protected] --legacy-peer-deps
6. npm i react-leaflet-cluster --legacy-peer-deps

above steps fix my problem .

[adhami3310]

is this still happening in latest release? we did upgrade to react 19 in that