add div to map leaflet reactjs - css

Question

Good morning
I would like to add a block div on my leaflet card with text in the div Reactjs.
but it does not show on the map. It is displayed under the map, I tried with z-index but I did not succeed
anyone have a solution please?
<div >
<MapContainer center={center} zoom={zoom} style={{ height: "90vh", opacity: 'O,33' }}>
<TileLayer attribution='&copy OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Markers marker={mark} />
<div>Test</div>
</MapContainer >
</div>);```

Answer 1

You can use z-index, however you will also have to set position to something other than default static. e.g. position: absolute
I would recommend to look into the built in leaflet-control classes. I use a custom controller to add stuff above the map:
import L from "leaflet";
import React, { useEffect, useRef } from "react";
const ControlClasses = {
bottomleft: "leaflet-bottom leaflet-left",
bottomright: "leaflet-bottom leaflet-right",
topleft: "leaflet-top leaflet-left",
topright: "leaflet-top leaflet-right",
};
type ControlPosition = keyof typeof ControlClasses;
export interface LeafLetControlProps {
position?: ControlPosition;
children?: React.ReactNode;
offset?: [number, number];
}
const LeafletControl: React.FC<LeafLetControlProps> = ({
position,
children,
offset = [0, 0],
}) => {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current) {
L.DomEvent.disableClickPropagation(divRef.current);
L.DomEvent.disableScrollPropagation(divRef.current);
}
});
return (
// #ts-ignore
<div
style={{
marginLeft: offset[0],
marginTop: offset[1],
}}
ref={divRef}
className={position && ControlClasses[position]}
>
<div className={"leaflet-control"}>{children}</div>
</div>
);
};
export default LeafletControl;