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?
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