react leaflet 위에 div 표시하기

지도 위에 div 표시하기

div 위 클릭 불가능

position: absolute;
z-index: 1000;
pointer-events: none;

div 위 클릭 가능

position: absolute;
z-index: 1000;
pointer-events: auto;

https://stackoverflow.com/questions/55291179/how-to-overlay-content-on-react-leaflet-z-index-problem

div 위치 조정

Leaflet 에서 제공해주는 class 사용하면 position과 z-index 주지 않아도 위치 조정 가능
div 위를 클릭하고 싶다면 제공해주는 class에 pointer-events: none; 속성이 들어가 있기 때문에
pointer-events: auto;로 덮어 씌워줘야함

leaflet-bottom
leaflet-top
leaflet-left
leaflet-right

style 정의
.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
 }

<div css={lefletbutton} className="leaflet-bottom leaflet-right">
</div>

const lefletbutton = css`
  pointer-events: auto;
`

https://stackoverflow.com/questions/17942889/how-to-put-buttons-on-the-leaflet-map
https://gis.stackexchange.com/questions/311945/making-button-clickable-to-perform-function-in-leaflet