How to create a legend from geojson data with react-leaflet - legend

Question

I've got some data represented in my map and I want to create a legend that has the same image of my data and name.
My data are Geojson files.
My map looks like this :
Map without Legend
I want to develop a legend like this :
Map with Legend
This is my code that represents data to the Map :
import React from "react";
import L from "leaflet";
import {
MapContainer,
TileLayer,
GeoJSON,
Marker,
Popup,
LayersControl,
} from "react-leaflet";
import noeud from "./../data/Noeud.json";
import section from "./../data/section.json";
import casier from "./../data/casier.json";
function Macarte() {
const noeud_icon = L.icon({
iconUrl: noeud_image,
iconSize: [10, 10],
});
function casier_style() {
return {
fillColor: "transparent",
color: "red",
};
}
function section_style() {
return {
color: "black",
};
}
return (
<MapContainer className="map" center={[45.7133, 5.52826]} zoom={11}>
<LayersControl position="topright" />
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{noeud.features.map((data_noeud) => (
<Marker
icon={noeud_icon}
position={{
lat: data_noeud.geometry.coordinates[1],
lng: data_noeud.geometry.coordinates[0],
}}
>
<Popup>
<div>
{/*<h1> {"Nom modèle : " + data_noeud.properties.Nom_modele} </h1>*/}
<h1> {"Noeud : " + data_noeud.properties.NOM} </h1>
</div>
</Popup>
</Marker>
))}
<GeoJSON
style={section_style}
data={section.features}
/>
<GeoJSON
style={casier_style}
data={casier.features}
/>
</MapContainer>
);
}
export default Macarte;
Please Help :)

Answer 1

A similar question has been answered here.
Legend component
function Legend({ map }) {
console.log(map);
useEffect(() => {
if (map) {
const legend = L.control({ position: "bottomright" });
legend.onAdd = () => {
const div = L.DomUtil.create("div", "legend");
div.innerHTML =
"<h4>Legend</h4>"
return div;
};
legend.addTo(map);
}
}, [map]); //here add map
return null;
}
in a .css file you can establish rules for the legend then import it into your legend component.
.legend {
padding: 6px 8px;
font: 14px Arial, Helvetica, sans-serif;
background: rgb(255, 255, 255);
line-height: 24px;
color: rgb(0,0,0)
}
.legend h4 {
text-align: center;
font-size: 16px;
margin: 2px 12px 8px;
color: rgb(0,0,0)
}
Then you can simply put the Legend component wherever you want.