react-kakao-maps-sdk/esm/components/MarkerClusterer.js

React components for using kakao map api

import React, { useMemo, useImperativeHandle, useLayoutEffect, useContext } from 'react';
import { useKakaoEvent } from '../hooks/useKakaoEvent.js';
import { useMap } from '../hooks/useMap.js';
import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
import { useKakaoMapsSetEffect } from '../hooks/useKakaoMapsSetEffect.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const KakaoMapMarkerClustererContext = /*#__PURE__*/React.createContext(undefined);
const MarkerClusterer = /*#__PURE__*/React.forwardRef(function MarkerClusterer(_ref, ref) {
  let {
    onClusterclick,
    onClusterdblclick,
    onClustered,
    onClusterout,
    onClusterover,
    onClusterrightclick,
    onCreate,
    ...props
  } = _ref;
  const {
    children,
    averageCenter,
    calculator,
    clickable,
    disableClickZoom,
    gridSize,
    hoverable,
    minClusterSize,
    minLevel,
    styles,
    texts
  } = props;
  const map = useMap(`MarkerClusterer`);
  const markerClusterer = useMemo(() => {
    if (!window.kakao.maps.MarkerClusterer) {
      console.warn("clusterer 라이브러리를 별도 로드 해야 사용 가능합니다. `https://apis.map.kakao.com/web/guide/#loadlibrary`");
      return;
    }
    return new kakao.maps.MarkerClusterer({
      averageCenter,
      calculator,
      clickable,
      disableClickZoom,
      gridSize,
      hoverable,
      minClusterSize,
      minLevel,
      styles,
      texts
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useImperativeHandle(ref, () => markerClusterer, [markerClusterer]);
  useLayoutEffect(() => {
    if (!markerClusterer) return;
    markerClusterer.setMap(map);
    return () => {
      markerClusterer.setMap(null);
    };
  }, [map, markerClusterer]);
  useLayoutEffect(() => {
    if (markerClusterer && onCreate) onCreate(markerClusterer);
  }, [markerClusterer, onCreate]);
  useKakaoMapsSetEffect(markerClusterer, "setGridSize", gridSize);
  useKakaoMapsSetEffect(markerClusterer, "setMinClusterSize", minClusterSize);
  useKakaoMapsSetEffect(markerClusterer, "setAverageCenter", averageCenter);
  useKakaoMapsSetEffect(markerClusterer, "setMinLevel", minLevel);
  useKakaoMapsSetEffect(markerClusterer, "setTexts", texts);
  useKakaoMapsSetEffect(markerClusterer, "setCalculator", calculator);
  useKakaoMapsSetEffect(markerClusterer, "setStyles", styles);
  useKakaoEvent(markerClusterer, "clustered", onClustered);
  useKakaoEvent(markerClusterer, "clusterclick", onClusterclick);
  useKakaoEvent(markerClusterer, "clusterover", onClusterover);
  useKakaoEvent(markerClusterer, "clusterout", onClusterout);
  useKakaoEvent(markerClusterer, "clusterdblclick", onClusterdblclick);
  useKakaoEvent(markerClusterer, "clusterrightclick", onClusterrightclick);
  if (!markerClusterer) {
    return null;
  }
  return /*#__PURE__*/jsxs(KakaoMapMarkerClustererContext.Provider, {
    value: markerClusterer,
    children: [children, /*#__PURE__*/jsx(MarkerClustererRedraw, {
      ...props
    })]
  });
});
const MarkerClustererRedraw = () => {
  const markerClusterer = useContext(KakaoMapMarkerClustererContext);
  useIsomorphicLayoutEffect(() => {
    markerClusterer.redraw();
  });
  return null;
};

export { KakaoMapMarkerClustererContext, MarkerClusterer };