[React.js] react-leaflet Tooltip에 EventHandler 구현하기(interactive Option)

react-leaflet의 Marker는 기본적으로 Interactive Layer로 동작하여, 클릭하면 PopUp 메세지를 띄울 수 있다.

Tooltip은 보통 Marker를 설명하는 말풍선 느낌으로 사용하는데, Tooltip을 클릭할 시 다른 화면을 띄우고 싶었다.

 

 

React API를 참고하면 Tooltip에 아래와 같은 Option을 확인할 수 있다.

이 중 interactive의 값을 true로 하면 해당 컴포넌트를 Interactive Layer로 적용한다.

 

아래는 React API에 설명되어 있는 Interactive Layer에 대한 설명으로, Interactive Layer는 click이나 mouseover와 같은 마우스 이벤트를 다룰 수 있는 레이어이다. 사용할 수 있는 이벤트 종류는 사진을 참고한다.

 

 

react-leaflet Setting 하기

아래의 설치방법을 참고한다.

Installation | React Leaflet

 

code 수정하기

사용방법은 아래와 같다.

먼저 Marker의 Event Handler에 아래와 같이 이벤트를 등록한다.

 

function Map() {
    let tooltipClick = (message) => {
        console.log(message);
    }
    return (
        <MapContainer.. >
            <TileLayer.. />
            <Marker eventHandlers={{ click: tooltipClick.bind(this, 'TEST Message') }}>
            </Marker>
    	</MapContainer>
    )
}

 

Marker안에 사용할 Tooltip을 interactive Option을 사용하여 정의한다.

 

function Map() {
    let tooltipClick = (message) => {
        console.log(message);
    }
    return (
        <MapContainer.. >
            <TileLayer.. />
            <Marker eventHandlers={{ click: tooltipClick.bind(this, 'TEST Message') }}>
                <Tooltip direction="top" opacity={1} permanent interactive>
                    <span>Tooltip Massage</span>
                </Tooltip>
            </Marker>
    	</MapContainer>
    )
}

 

위와 같은 Option을 사용하면 Tooltip은 Marker의 상단에(direction="top") 투명도 없이(opacity={1}) 상시 존재하는 형태로(permanent) Interactive Layer(interactive) 속성을 가진다.

 

 

에러 및 버그 발생

1. Tooltip에 eventHandler 등록 안되는 현상

 

위의 코드를 이용하면 Marker와 Tooltip을 클릭했을 때 모두 'tooltipClick' 이벤트를 동작하게 된다.

처음에는 Tooltip 태그 안에 eventHandlers를 정의해보았으나 그러면 Tooltip에 마우스 이벤트가 먹히지 않았다.. 이유는 모르겠다.

react-leaflet API를 살펴봐도 Props에 eventHandlers가 나와있지만, 동작은 안한다..(버그인가)

나는 Marker와 Tooltip 둘 다 같은 이벤트를 줘도 상관없어서 그대로 뒀다.

 

 

2. interactive Tooltip remove 시(unmount 시점) TypeError: Cannot read property '_targets' of null 발생

 

하루종일 버그잡다가 github issue에서 발견 :)

아직 해결안된 문제인 듯..

useEffect를 사용해서 UnMount 직전에 interactive Option을 false로 바꾸면 해결이 되려나..

일단은 개발 환경에서만 에러 페이지가 뜨니 그냥 무시하고 개발 진행했다. 

아래의 github issue 참고

 

Tooltip returns error after "removing" it · Issue #415 · PaulLeCam/react-leaflet

 

Error TypeError: Cannot read property '_targets' of null when updating list of map markers · Issue #831 · PaulLeCam/react-leaf

 

Dynamically making tooltip interactive and changing polygon key causes error. · Issue #842 · PaulLeCam/react-leaflet