tmap에서 marker에 최적화하여 map의 bound 설정하는 hook 만들기

marker 리스트의 lat, lng을 활용해서 최적의 bound를 설정해주는 hook

import { useEffect } from "react";

/* Tmap의 handleCreate를 활용해서 map 객체를 부모로 올린 다음 활용 */
export const useFitEdge = (
  map: any,
  data: any,
  coordList: number[][],
  margin?: { left: number, top:number, right:number, bottom:number }
) => {
  useEffect(() => {
    if (!coordList || coordList.length === 0) return;

    const latLngBounds = new (window as any).Tmapv2.LatLngBounds();

    coordList.forEach((coord) => {
      latLngBounds.extend(
        new (window as any).Tmapv2.LatLng(coord[0], coord[1])
      );
    });
    map && map.fitBounds(latLngBounds, margin);
  }, [map, data, coordList]);
};

 

 

만든 hook을 내가 사용하고 싶은 map에서 활용한다. 이 때 Tmap의 handlecreate를 활용해서 부모와 hook이 동일한 map 상태값을 사용하는 것이 중요하다

const fitEdgeMargin = {
  left : 100, // 지도의 왼쪽과의 간격(단위 : px) 
  top : 100, // 지도의 위쪽과의 간격(단위 : px) 
  right : 100, // 지도의 오른쪽과의 간격(단위 : px) 
  bottom : -100 // 지도의 아래쪽과의 간격(단위 : px) 
}

  // FitEdge 위한 MarkerList
  const markerList = [...coordArray.map((x: any) => [x.lat, x.lng])];
  useFitEdge(map, coordArray, markerList, fitEdgeMargin);
  
  
  const [map, setMap] = useState<any>(null);
  
  return (
  	<Tmap
        id={"example"}
        zoom={15}
        handleCreate={setMap}
        }}>
        
        <Marker .../>
    </Tmap>
  )