React leaflet Canvas - leaflet

Question

I am trying to draw about 50K points with the leaflet Marker method and it's impossible du the time rendering and ram needed.
The new method I saw is to use Leaflet-canvas to draw point on-screen ' not in the DOM.
How can I perform this in React leaflet 3.X.
I tried
https://www.npmjs.com/package/react-leaflet-canvas-markers
But it doesn't support the V3 of the leaflet.
Any suggestion?

Answer 1

install and import the library npm i leaflet-canvas-marker
Create a custom component and use a useEffect that will mimic the behavior of vanilla leaflet example
import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-canvas-marker";
import L from "leaflet";
export default function LeafletCanvasMarker() {
const map = useMap();
useEffect(() => {
if (!map) return;
var ciLayer = L.canvasIconLayer({}).addTo(map);
ciLayer.addOnClickListener(function (e, data) {
console.log(data);
});
ciLayer.addOnHoverListener(function (e, data) {
console.log(data[0].data._leaflet_id);
});
var icon = L.icon({
iconUrl: "https://unpkg.com/leaflet#1.7.1/dist/images/marker-icon.png",
iconSize: [20, 18],
iconAnchor: [10, 9],
});
var markers = [];
for (var i = 0; i < 50000; i++) {
var marker = L.marker(
[58.5578 + Math.random() * 1.8, 29.0087 + Math.random() * 3.6],
{ icon: icon }
).bindPopup("I Am " + i);
markers.push(marker);
}
ciLayer.addLayers(markers);
}, [map]);
return null;
}
Include your custom component as a MapContainer child
<MapContainer center={position} zoom={10} style={{ height: "100vh" }}>
<TileLayer
attribution='© OpenStreetMap contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
<LeafletCanvasMarker />
</MapContainer>
You should get a result similar to the following picture: