React-Leaflet adding sign on center of map

Question

I add a sign on map that shows the center.

<MapContainer fullscreenControl={true}
                    center={center} zoom={18}
                    maxNativeZoom = {22}
                    maxZoom={22}
                    className={"sign-of-center-of-map"}>

.sign-of-center-of-map:before {
    position: absolute;
    content: "\271B";
    z-index: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 3rem;
    opacity: 0.7;
}

But when i do that, layers on the map become non-clickable. I changed z-index of layers but this didn't solve the issue. Should i add something to CSS or use different method?

Answer 1

You should use a better method to reach this feature, React-leaflet has Control feature that you can add whatever you want to your map

For Example:

import L from "leaflet";

createDivControl() {
const MapHelp = L.Control.extend({
  onAdd: (map) => {
    const signOfCenterOfMap = L.DomUtil.create("div", "");
    this.signOfCenterOfMap = signOfCenterOfMap;
    // set the inner content from the props
    signOfCenterOfMap.innerHTML = this.props.title; // it can be your icon

    // return the div
    return signOfCenterOfMap;
  }
});
return new MapHelp({ position: "bottomright" })} // 'bottomleft','bottomright', ...

In this example, you must set the position of your div