add div to map leaflet reactjs

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='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> 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;