@mint-ui/map 1.1.2 → 1.2.0-test.1

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { __awaiter, __generator, __spreadArray, __assign, __extends, __rest } from 'tslib';
-import React, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { __extends, __awaiter, __generator, __spreadArray, __assign, __rest } from 'tslib';
+import React, { createContext, useContext, useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
 import { v4 } from 'uuid';
@@ -649,6 +649,286 @@ var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relati
 var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
 styleInject(css_248z$1);
 
+var Drawable =
+/** @class */
+function () {
+  function Drawable() {}
+
+  return Drawable;
+}();
+
+var Marker =
+/** @class */
+function (_super) {
+  __extends(Marker, _super);
+  /**
+   * 지도에 표시할 마커정보
+   */
+
+
+  function Marker(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Marker;
+}(Drawable);
+
+var Polyline =
+/** @class */
+function (_super) {
+  __extends(Polyline, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polyline(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Polyline;
+}(Drawable);
+
+var Polygon =
+/** @class */
+function (_super) {
+  __extends(Polygon, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polygon(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+  /**
+   * 폴리곤의 중점을 구한다.
+   */
+
+
+  Polygon.prototype.getCenter = function () {
+    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+      var paths = this.options.position.map(function (elem) {
+        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+      });
+      return PolygonCalculator.getCenter(paths);
+    }
+
+    throw new Error('center 를 찾을 수 없습니다.');
+  };
+
+  return Polygon;
+}(Drawable);
+
+// export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
+// export type MapUIEvent = 'click'|'dblclick'|''
+var MapEvent =
+/** @class */
+function () {
+  function MapEvent() {
+    this.BOUNDS_CHANGED = 'bounds_changed';
+    this.CENTER_CHANGED = 'center_changed';
+    this.IDLE = 'idle';
+    this.ZOOM_CHANGED = 'zoom_changed';
+    this.ZOOMSTART = 'zoomstart';
+  }
+
+  MapEvent.prototype.get = function (eventName) {
+    var value = this[eventName];
+
+    if (typeof value === 'string') {
+      return value;
+    }
+  };
+
+  return MapEvent;
+}();
+
+var MapUIEvent =
+/** @class */
+function () {
+  function MapUIEvent() {
+    this.CLICK = 'click';
+    this.DBLCLICK = 'dblclick';
+    this.MOUSEDOWN = 'mousedown';
+    this.MOUSEUP = 'mouseup';
+    this.MOUSEOUT = 'mouseout';
+    this.MOUSEMOVE = 'mousemove';
+    this.MOUSEOVER = 'mouseover';
+    this.DRAG = 'drag';
+    this.DRAGSTART = 'dragstart';
+    this.DRAGEND = 'dragend';
+    this.RIGHTCLICK = 'rightclick';
+    this.CONTEXTMENU = 'contextmenu';
+  }
+
+  MapUIEvent.prototype.get = function (eventName) {
+    var value = this[eventName];
+
+    if (typeof value === 'string') {
+      return value;
+    }
+  };
+
+  return MapUIEvent;
+}();
+
+var KonvaMarkerContext = createContext(null);
+var KonvaMarkerProvider = function (_a) {
+  var children = _a.children;
+  var controller = useMintMapController(); // Refs
+
+  var componentsRef = useRef([]);
+  var currentHoveredRef = useRef(null);
+  var currentHoveredDataRef = useRef(null);
+  var draggingRef = useRef(false);
+  /**
+   * 컴포넌트 등록 (zIndex 내림차순 정렬)
+   * 높은 zIndex가 먼저 처리됨
+   */
+
+  var registerComponent = useCallback(function (instance) {
+    componentsRef.current.push(instance);
+    componentsRef.current.sort(function (a, b) {
+      return b.zIndex - a.zIndex;
+    });
+  }, []);
+  /**
+   * 컴포넌트 등록 해제
+   */
+
+  var unregisterComponent = useCallback(function (instance) {
+    // Hover 중이던 컴포넌트면 초기화
+    if (currentHoveredRef.current === instance) {
+      currentHoveredRef.current = null;
+      currentHoveredDataRef.current = null;
+    }
+
+    componentsRef.current = componentsRef.current.filter(function (c) {
+      return c !== instance;
+    });
+  }, []);
+  /**
+   * 전역 클릭 핸들러 (zIndex 우선순위)
+   */
+
+  var handleGlobalClick = useCallback(function (event) {
+    var _a;
+
+    if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+    var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
+
+    for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
+      var component = _b[_i];
+      var data = component.findData(clickedOffset);
+
+      if (data) {
+        component.handleLocalClick(data);
+
+        if (component.onClick) {
+          component.onClick(data, component.getSelectedIds());
+        }
+
+        return; // 첫 번째 히트만 처리
+      }
+    }
+  }, [controller]);
+  /**
+   * 전역 마우스 이동 핸들러 (zIndex 우선순위)
+   */
+
+  var handleGlobalMouseMove = useCallback(function (event) {
+    var _a;
+
+    if (draggingRef.current || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+    var mouseOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회하여 Hover 대상 찾기
+
+    var newHoveredComponent = null;
+    var newHoveredData = null;
+
+    for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
+      var component = _b[_i];
+      var data = component.findData(mouseOffset);
+
+      if (data) {
+        newHoveredComponent = component;
+        newHoveredData = data;
+        break; // 첫 번째 히트만 처리
+      }
+    } // Hover 상태 변경 감지 (최적화: 별도 ref로 직접 비교)
+
+
+    if (currentHoveredRef.current !== newHoveredComponent || currentHoveredDataRef.current !== newHoveredData) {
+      // 이전 hover 해제
+      if (currentHoveredRef.current) {
+        currentHoveredRef.current.setHovered(null);
+
+        if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
+          currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
+        }
+      } // 새 hover 설정
+
+
+      if (newHoveredComponent && newHoveredData) {
+        newHoveredComponent.setHovered(newHoveredData);
+
+        if (newHoveredComponent.onMouseOver) {
+          newHoveredComponent.onMouseOver(newHoveredData);
+        }
+      }
+
+      currentHoveredRef.current = newHoveredComponent;
+      currentHoveredDataRef.current = newHoveredData;
+    }
+  }, [controller]);
+  /**
+   * 줌/드래그 시작 (마우스 이동 이벤트 무시)
+   */
+
+  var handleZoomStart = useCallback(function () {
+    draggingRef.current = true;
+  }, []);
+  /**
+   * 지도 idle (마우스 이동 이벤트 재개)
+   */
+
+  var handleIdle = useCallback(function () {
+    draggingRef.current = false;
+  }, []); // 이벤트 리스너 등록
+
+  useEffect(function () {
+    controller.addEventListener('CLICK', handleGlobalClick);
+    controller.addEventListener('MOUSEMOVE', handleGlobalMouseMove);
+    controller.addEventListener('ZOOMSTART', handleZoomStart);
+    controller.addEventListener('IDLE', handleIdle);
+    return function () {
+      controller.removeEventListener('CLICK', handleGlobalClick);
+      controller.removeEventListener('MOUSEMOVE', handleGlobalMouseMove);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('IDLE', handleIdle);
+    };
+  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // Context value 메모이제이션
+
+  var contextValue = useMemo(function () {
+    return {
+      registerComponent: registerComponent,
+      unregisterComponent: unregisterComponent
+    };
+  }, [registerComponent, unregisterComponent]);
+  return React.createElement(KonvaMarkerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
 var cn$3 = classNames.bind(styles$1);
 function MintMapCore(_a) {
   var _this = this;
@@ -731,7 +1011,7 @@ function MintMapCore(_a) {
   }, [center]);
   return React.createElement("div", {
     className: cn$3('mint-map-root')
-  }, mapInitialized && children, React.createElement("div", {
+  }, mapInitialized && React.createElement(KonvaMarkerProvider, null, children), React.createElement("div", {
     className: cn$3('mint-map-container'),
     style: {
       visibility: visible ? 'inherit' : 'hidden'
@@ -1428,59 +1708,6 @@ function () {
   return MapZoomInfo;
 }();
 
-// export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
-// export type MapUIEvent = 'click'|'dblclick'|''
-var MapEvent =
-/** @class */
-function () {
-  function MapEvent() {
-    this.BOUNDS_CHANGED = 'bounds_changed';
-    this.CENTER_CHANGED = 'center_changed';
-    this.IDLE = 'idle';
-    this.ZOOM_CHANGED = 'zoom_changed';
-    this.ZOOMSTART = 'zoomstart';
-  }
-
-  MapEvent.prototype.get = function (eventName) {
-    var value = this[eventName];
-
-    if (typeof value === 'string') {
-      return value;
-    }
-  };
-
-  return MapEvent;
-}();
-
-var MapUIEvent =
-/** @class */
-function () {
-  function MapUIEvent() {
-    this.CLICK = 'click';
-    this.DBLCLICK = 'dblclick';
-    this.MOUSEDOWN = 'mousedown';
-    this.MOUSEUP = 'mouseup';
-    this.MOUSEOUT = 'mouseout';
-    this.MOUSEMOVE = 'mousemove';
-    this.MOUSEOVER = 'mouseover';
-    this.DRAG = 'drag';
-    this.DRAGSTART = 'dragstart';
-    this.DRAGEND = 'dragend';
-    this.RIGHTCLICK = 'rightclick';
-    this.CONTEXTMENU = 'contextmenu';
-  }
-
-  MapUIEvent.prototype.get = function (eventName) {
-    var value = this[eventName];
-
-    if (typeof value === 'string') {
-      return value;
-    }
-  };
-
-  return MapUIEvent;
-}();
-
 var MintMapCanvasRenderer =
 /** @class */
 function () {
@@ -1534,86 +1761,6 @@ function SVGCircle(_a) {
   }, children));
 }
 
-var Drawable =
-/** @class */
-function () {
-  function Drawable() {}
-
-  return Drawable;
-}();
-
-var Marker =
-/** @class */
-function (_super) {
-  __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
-   */
-
-
-  function Marker(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-
-  return Marker;
-}(Drawable);
-
-var Polyline =
-/** @class */
-function (_super) {
-  __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
-   */
-
-
-  function Polyline(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-
-  return Polyline;
-}(Drawable);
-
-var Polygon =
-/** @class */
-function (_super) {
-  __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
-   */
-
-
-  function Polygon(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-  /**
-   * 폴리곤의 중점을 구한다.
-   */
-
-
-  Polygon.prototype.getCenter = function () {
-    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
-      var paths = this.options.position.map(function (elem) {
-        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
-      });
-      return PolygonCalculator.getCenter(paths);
-    }
-
-    throw new Error('center 를 찾을 수 없습니다.');
-  };
-
-  return Polygon;
-}(Drawable);
-
 function SVGPolygon(_a) {
   var path = _a.path,
       _b = _a.innerPath,
@@ -2676,6 +2823,1585 @@ function CanvasMarker(_a) {
   })), divElement);
 }
 
+// Lightweight Geohash encoder and neighbor utilities
+var BASE32 = '0123456789bcdefghjkmnpqrstuvwxyz';
+var NEIGHBORS = {
+  n: {
+    even: {
+      border: 'prxz',
+      neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
+    },
+    odd: {
+      border: 'bcfguvyz',
+      neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
+    }
+  },
+  s: {
+    even: {
+      border: '028b',
+      neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
+    },
+    odd: {
+      border: '0145hjnp',
+      neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
+    }
+  },
+  e: {
+    even: {
+      border: 'bcfguvyz',
+      neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
+    },
+    odd: {
+      border: 'prxz',
+      neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
+    }
+  },
+  w: {
+    even: {
+      border: '0145hjnp',
+      neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
+    },
+    odd: {
+      border: '028b',
+      neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
+    }
+  }
+};
+function geohashEncode(lat, lon, precision) {
+  if (precision === void 0) {
+    precision = 6;
+  }
+
+  var idx = 0;
+  var bit = 0;
+  var evenBit = true;
+  var geohash = '';
+  var latMin = -90,
+      latMax = 90;
+  var lonMin = -180,
+      lonMax = 180;
+
+  while (geohash.length < precision) {
+    if (evenBit) {
+      var lonMid = (lonMin + lonMax) / 2;
+
+      if (lon >= lonMid) {
+        idx = idx * 2 + 1;
+        lonMin = lonMid;
+      } else {
+        idx = idx * 2;
+        lonMax = lonMid;
+      }
+    } else {
+      var latMid = (latMin + latMax) / 2;
+
+      if (lat >= latMid) {
+        idx = idx * 2 + 1;
+        latMin = latMid;
+      } else {
+        idx = idx * 2;
+        latMax = latMid;
+      }
+    }
+
+    evenBit = !evenBit;
+
+    if (++bit == 5) {
+      geohash += BASE32.charAt(idx);
+      bit = 0;
+      idx = 0;
+    }
+  }
+
+  return geohash;
+}
+
+function adjacent(hash, dir) {
+  var lastChr = hash[hash.length - 1];
+  var type = hash.length % 2 ? 'odd' : 'even'; // @ts-ignore
+
+  var border = NEIGHBORS[dir][type].border; // @ts-ignore
+
+  var neighbor = NEIGHBORS[dir][type].neighbor;
+  var base = hash.substring(0, hash.length - 1);
+
+  if (border.indexOf(lastChr) !== -1) {
+    base = adjacent(base, dir);
+  }
+
+  var pos = neighbor.indexOf(lastChr);
+  var nextChr = BASE32.charAt(pos);
+  return base + nextChr;
+}
+
+function geohashNeighbors(hash) {
+  var n = adjacent(hash, 'n');
+  var s = adjacent(hash, 's');
+  var e = adjacent(hash, 'e');
+  var w = adjacent(hash, 'w');
+  return [hash, n, s, e, w, adjacent(n, 'e'), adjacent(n, 'w'), adjacent(s, 'e'), adjacent(s, 'w')];
+}
+
+function CanvasMarkerHanquf(_a) {
+  var renderer = _a.renderer,
+      data = _a.data,
+      onMouseOver = _a.onMouseOver,
+      onMouseOut = _a.onMouseOut,
+      onClick = _a.onClick,
+      options = __rest(_a, ["renderer", "data", "onMouseOver", "onMouseOut", "onClick"]); //controller
+
+
+  var controller = useMintMapController(); //element
+
+  var divRef = useRef(document.createElement('div'));
+  var divElement = divRef.current; //canvas container ref
+
+  var containerRef = useRef(null); //canvas ref
+
+  var canvasRef = useRef(null); //canvas context
+
+  var contextRef = useRef(); //marker
+
+  var markerRef = useRef(); // interaction states
+
+  var hoveredRef = useRef(null);
+  var clickedRef = useRef(null); // geohash index: hash -> items
+
+  var geoIndexRef = useRef(new Map());
+  var geoPrecisionRef = useRef(6); // drag translate state
+
+  var prevCenterOffsetRef = useRef(null);
+  var accumTranslateRef = useRef({
+    x: 0,
+    y: 0
+  });
+  var draggingRef = useRef(false); //create object
+
+  useEffect(function () {
+    divElement.style.width = 'fit-content';
+    divElement.style.pointerEvents = 'none';
+    return function () {
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined;
+      }
+    };
+  }, []); //create / update object
+
+  useEffect(function () {
+    if (options) {
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = __assign({
+        position: bounds.nw
+      }, options);
+
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, markerOptions);
+      } else {
+        markerRef.current = new Marker(markerOptions);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = 'none';
+          divElement.parentElement.style.pointerEvents = 'none';
+        } //z-index 처리
+
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        }
+      }
+    }
+  }, [options]);
+
+  var handleIdle = function () {
+    // 클리어
+    clearRect(canvasRef.current, contextRef.current); // 표시 복구 (드래그/줌 중 숨김 처리 복원)
+
+    containerRef.current && (containerRef.current.style.visibility = ''); // 드래그 종료 처리: 변환 초기화 및 기준 위치 갱신
+
+    draggingRef.current = false;
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    };
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+    } // 마커 이동
+
+
+    var bounds = controller.getCurrBounds();
+
+    var markerOptions = __assign({
+      position: bounds.nw
+    }, options);
+
+    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링 (hover/click item last)
+
+    renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+  };
+
+  var handleZoomStart = function () {
+    containerRef.current && (containerRef.current.style.visibility = 'hidden');
+  };
+
+  var handleZoomEnd = function () {
+    containerRef.current && (containerRef.current.style.visibility = '');
+  }; //initialize
+
+
+  useEffect(function () {
+    var resizeObserver; // hover/out 공통 처리기 (mouse 좌표 기반)
+
+    var updateHoverByMouseXY = function (mouseX, mouseY) {
+      var hit = hitTest(mouseX, mouseY);
+
+      if ((hit === null || hit === void 0 ? void 0 : hit.item) !== hoveredRef.current) {
+        if (hoveredRef.current && onMouseOut) {
+          onMouseOut(hoveredRef.current);
+        }
+
+        hoveredRef.current = (hit === null || hit === void 0 ? void 0 : hit.item) || null;
+
+        if ((hit === null || hit === void 0 ? void 0 : hit.item) && onMouseOver) {
+          onMouseOver(hit.item);
+        }
+
+        clearRect(canvasRef.current, contextRef.current);
+        renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+      }
+    };
+
+    var handleMouseLeave = function () {
+      console.log('handleMouseLeave');
+
+      if (hoveredRef.current && onMouseOut) {
+        onMouseOut(hoveredRef.current);
+      }
+
+      hoveredRef.current = null;
+      clearRect(canvasRef.current, contextRef.current);
+      renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+    }; // 지도 이벤트 → 화면 좌표 변환
+
+
+    var parseEventToOffset = function (e) {
+      var mapType = controller.getMapType();
+      var latlng = (e === null || e === void 0 ? void 0 : e.latlng) || (e === null || e === void 0 ? void 0 : e.latLng);
+
+      if (!latlng) {
+        return null;
+      }
+
+      var pos = {
+        lat: 0,
+        lng: 0
+      }; //@ts-ignore
+
+      if (mapType === 'naver') {
+        pos.lat = latlng._lat;
+        pos.lng = latlng._lng; //@ts-ignore
+      } else if (mapType === 'google') {
+        pos.lat = latlng.lat();
+        pos.lng = latlng.lng(); //@ts-ignore
+      } else if (mapType === 'kakao') {
+        pos.lat = latlng.Ma;
+        pos.lng = latlng.La;
+      } else {
+        return null;
+      }
+
+      var offset = controller.positionToOffset(pos);
+      return offset;
+    };
+
+    var handleMapMouseMove = function (e) {
+      if (draggingRef.current) {
+        return;
+      }
+
+      var offset = parseEventToOffset(e);
+      if (!offset) return;
+      updateHoverByMouseXY(offset.x, offset.y);
+    };
+
+    var handleMapClick = function (e) {
+      console.log('handleClick');
+      var offset = parseEventToOffset(e);
+      if (!offset) return;
+      var hit = hitTest(offset.x, offset.y);
+
+      if (hit === null || hit === void 0 ? void 0 : hit.item) {
+        clickedRef.current = hit.item;
+        onClick && onClick(hit.item);
+        clearRect(canvasRef.current, contextRef.current);
+        renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+      }
+    };
+
+    if (canvasRef.current && containerRef.current) {
+      // 리사이즈 처리
+      resizeObserver = new ResizeObserver(function () {
+        // 클리어
+        clearRect(canvasRef.current, contextRef.current); // 스케일링
+
+        canvasRef.current && contextRef.current && scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링 (respect hover/click ordering)
+
+        renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+      });
+      resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
+
+      controller.addEventListener('IDLE', handleIdle); // 줌 처리
+
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
+
+      contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
+
+      if (contextRef.current) {
+        scaleCanvas(controller, canvasRef.current, contextRef.current);
+      } // 지도 이벤트 구독 (부모 pointer-events:none 이어도 동작)
+
+
+      var map = controller.getMap();
+
+      if (map) {
+        //@ts-ignore
+        map.addListener('mousemove', handleMapMouseMove); //@ts-ignore
+
+        map.addListener('click', handleMapClick); //@ts-ignore
+
+        map.addListener('center_changed', function () {
+          // 드래그 중에는 리렌더 대신 transform 으로만 추종
+          var center = controller.getCurrBounds().getCenter();
+          var curr = controller.positionToOffset(center);
+          var prev = prevCenterOffsetRef.current;
+
+          if (!prev) {
+            prevCenterOffsetRef.current = {
+              x: curr.x,
+              y: curr.y
+            };
+            draggingRef.current = true;
+            return;
+          }
+
+          var dx = prev.x - curr.x;
+          var dy = prev.y - curr.y;
+          accumTranslateRef.current = {
+            x: accumTranslateRef.current.x + dx,
+            y: accumTranslateRef.current.y + dy
+          };
+          prevCenterOffsetRef.current = {
+            x: curr.x,
+            y: curr.y
+          };
+          draggingRef.current = true;
+
+          if (containerRef.current) {
+            containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+          }
+        }); //@ts-ignore
+
+        map.addListener('idle', handleIdle);
+      } // 마우스가 지도 영역을 벗어나는 경우 처리
+
+
+      controller.mapDivElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+      controller.mapDivElement && controller.mapDivElement.removeEventListener('mouseleave', handleMouseLeave);
+      controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+    };
+  }, []); // data ref
+
+  var dataRef = useRef(data);
+  useEffect(function () {
+    dataRef.current = data; // rebuild geohash index
+
+    var map = new Map();
+    var precision = geoPrecisionRef.current;
+
+    for (var _i = 0, _a = data || []; _i < _a.length; _i++) {
+      var item = _a[_i];
+      var pos = item.position && item.position[0];
+      if (!pos) continue;
+      var hash = geohashEncode(pos.lat, pos.lng, precision);
+      var list = map.get(hash) || [];
+      list.push(item);
+      map.set(hash, list);
+    }
+
+    geoIndexRef.current = map;
+  }, [data]); // renderer ref
+
+  var rendererRef = useRef(renderer);
+  useEffect(function () {
+    rendererRef.current = renderer;
+  }, [renderer]); // Build ordered list so hovered/clicked items render last (on top) within this canvas layer
+
+  var buildOrderedData = function () {
+    var base = dataRef.current || [];
+    var result = [];
+    var hoverItem;
+    var clickItem;
+
+    for (var _i = 0, base_1 = base; _i < base_1.length; _i++) {
+      var item = base_1[_i];
+
+      if (clickedRef.current && item === clickedRef.current) {
+        clickItem = item;
+      } else if (hoveredRef.current && item === hoveredRef.current) {
+        hoverItem = item;
+      } else {
+        result.push(item);
+      }
+    }
+
+    if (hoverItem) result.push(hoverItem);
+    if (clickItem) result.push(clickItem);
+    return result;
+  }; // Geohash-accelerated hit-test
+
+
+  var hitTest = function (mouseX, mouseY) {
+    // convert mouse offset -> lat/lng then geohash it
+    var pos = controller.offsetToPosition({
+      x: mouseX,
+      y: mouseY
+    });
+    var precision = geoPrecisionRef.current;
+    var baseHash = geohashEncode(pos.lat, pos.lng, precision);
+    var buckets = geohashNeighbors(baseHash); // collect candidates from buckets (preserve ordering for top-most first)
+
+    var set = new Set();
+    var ordered = buildOrderedData();
+
+    for (var _i = 0, buckets_1 = buckets; _i < buckets_1.length; _i++) {
+      var b = buckets_1[_i];
+      var list = geoIndexRef.current.get(b);
+      if (!list) continue;
+
+      for (var _a = 0, list_1 = list; _a < list_1.length; _a++) {
+        var it = list_1[_a];
+        set.add(it);
+      }
+    } // iterate from top-most
+
+
+    for (var i = ordered.length - 1; i >= 0; i--) {
+      var item = ordered[i];
+      if (!set.has(item)) continue;
+      if (item.visible === false) continue;
+      var p = item.position && item.position[0];
+      if (!p) continue;
+      var off = controller.positionToOffset(p);
+      var r = Math.max(2, item.hitRadius || 20);
+      var dx = mouseX - off.x;
+      var dy = mouseY - off.y;
+
+      if (dx * dx + dy * dy <= r * r) {
+        return {
+          item: item
+        };
+      }
+    }
+
+    return null;
+  }; // Initial render
+
+
+  renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+  return createPortal(React.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  }, React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  })), divElement);
+}
+
+var defaultPolygonRenderer = function (_a) {
+  var context = _a.context,
+      offsets = _a.offsets,
+      innerOffsets = _a.innerOffsets,
+      polygon = _a.polygon,
+      isHovered = _a.isHovered,
+      defaultBackground = _a.defaultBackground,
+      defaultStrokeColor = _a.defaultStrokeColor,
+      defaultStrokeWidth = _a.defaultStrokeWidth,
+      hoverBackground = _a.hoverBackground,
+      hoverStrokeColor = _a.hoverStrokeColor;
+  if (offsets.length < 3) return; // 외부 폴리곤 그리기
+
+  context.beginPath();
+  context.moveTo(offsets[0].x, offsets[0].y);
+
+  for (var i = 1; i < offsets.length; i++) {
+    context.lineTo(offsets[i].x, offsets[i].y);
+  }
+
+  context.closePath(); // 내부 폴리곤 (구멍) 그리기
+
+  if (innerOffsets) {
+    innerOffsets.forEach(function (innerOffset) {
+      if (innerOffset.length < 3) return;
+      context.moveTo(innerOffset[0].x, innerOffset[0].y);
+
+      for (var i = 1; i < innerOffset.length; i++) {
+        context.lineTo(innerOffset[i].x, innerOffset[i].y);
+      }
+
+      context.closePath();
+    });
+  } // 스타일 설정
+
+
+  var fillColor = isHovered ? hoverBackground : polygon.background || defaultBackground;
+  var lineColor = isHovered ? hoverStrokeColor : polygon.strokeColor || defaultStrokeColor;
+  var lineWidth = polygon.strokeWidth || defaultStrokeWidth;
+  context.fillStyle = fillColor;
+  context.strokeStyle = lineColor;
+  context.lineWidth = lineWidth;
+  context.fill('evenodd');
+  context.stroke();
+};
+
+var CanvasMarkerClaude = React.memo(function CanvasMarkerClaude(_a) {
+  var _b = _a.polygons,
+      polygons = _b === void 0 ? [] : _b,
+      _c = _a.markers,
+      markers = _c === void 0 ? [] : _c,
+      _d = _a.background,
+      background = _d === void 0 ? 'rgba(0, 100, 255, 0.3)' : _d,
+      _e = _a.strokeColor,
+      strokeColor = _e === void 0 ? 'blue' : _e,
+      _f = _a.strokeWidth,
+      strokeWidth = _f === void 0 ? 1 : _f,
+      onPolygonClick = _a.onPolygonClick,
+      onPolygonHover = _a.onPolygonHover,
+      onPolygonLeave = _a.onPolygonLeave;
+      _a.onMarkerClick;
+      var onMarkerHover = _a.onMarkerHover,
+      onMarkerLeave = _a.onMarkerLeave,
+      onRenderComplete = _a.onRenderComplete,
+      markerRenderer = _a.markerRenderer,
+      options = __rest(_a, ["polygons", "markers", "background", "strokeColor", "strokeWidth", "onPolygonClick", "onPolygonHover", "onPolygonLeave", "onMarkerClick", "onMarkerHover", "onMarkerLeave", "onRenderComplete", "markerRenderer"]); // controller
+
+
+  var controller = useMintMapController(); // element (CanvasMarker 스타일)
+
+  var divRef = useRef(document.createElement('div'));
+  var divElement = divRef.current; // canvas container ref
+
+  var containerRef = useRef(null); // base canvas (모든 폴리곤 - IDLE 시에만 업데이트)
+
+  var baseCanvasRef = useRef(null);
+  var baseContextRef = useRef(); // hover canvas (호버된 폴리곤만 - 마우스 이동 시 업데이트)
+
+  var hoverCanvasRef = useRef(null);
+  var hoverContextRef = useRef(); // base marker canvas (기본 상태 마커 - IDLE 시 업데이트)
+
+  var baseMarkerCanvasRef = useRef(null);
+  var baseMarkerContextRef = useRef(); // interactive marker canvas (호버/클릭 마커 - 마우스 이동 시 업데이트)
+
+  var interactiveMarkerCanvasRef = useRef(null);
+  var interactiveMarkerContextRef = useRef(); // marker
+
+  var markerRef = useRef(); // interaction states
+
+  var hoveredPolygonRef = useRef(null);
+  var clickedPolygonRef = useRef(null);
+  var hoveredMarkerRef = useRef(null);
+  var clickedMarkerRef = useRef(null); // 🚀 WoongCanvasMarker 방식: 단순한 data ref (geohash 제거)
+
+  var polygonsRef = useRef([]);
+  var markersRef = useRef([]); // 마커 경계 정보 저장 (hit-test용)
+
+  var markerBoundsRef = useRef(new Map()); // 🚀 드래그 추적용 (WoongCanvasMarker 방식)
+
+  var draggingRef = useRef(false);
+  var prevCenterOffsetRef = useRef(null);
+  var accumTranslateRef = useRef({
+    x: 0,
+    y: 0
+  }); // 🚀 Offset 캐싱 (ID 문자열 기반으로 변경하여 메모리 누수 방지)
+
+  var MAX_CACHE_SIZE = 50000; // 최대 캐시 크기 제한 (3만개 + 여유분)
+
+  var polygonOffsetCacheRef = useRef(new Map());
+  var polygonInnerOffsetCacheRef = useRef(new Map()); // innerOffsets 캐시 추가
+
+  var markerOffsetCacheRef = useRef(new Map()); // create object (CanvasMarker 스타일)
+
+  useEffect(function () {
+    divElement.style.width = 'fit-content';
+    divElement.style.pointerEvents = 'none'; // CanvasMarkerHanquf 방식
+
+    return function () {
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined;
+      }
+    };
+  }, []); // create / update object (CanvasMarker 스타일)
+
+  useEffect(function () {
+    if (options) {
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = __assign({
+        position: bounds.nw
+      }, options);
+
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, markerOptions);
+      } else {
+        markerRef.current = new Marker(markerOptions);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current); // CanvasMarkerHanquf 방식: pointer events 비활성화
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = 'none';
+          divElement.parentElement.style.pointerEvents = 'none';
+        } // z-index 처리
+
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        }
+      }
+    }
+  }, [options]); // 베이스 폴리곤 렌더링 (모든 폴리곤, 호버 효과 없음)
+
+  var renderBasePolygons = function () {
+    if (!baseContextRef.current || !polygonsRef.current || polygonsRef.current.length === 0) return;
+    clearRect(baseCanvasRef.current, baseContextRef.current);
+    var cacheMissCount = 0; // 캐시 미스 카운트
+    // 🚀 WoongCanvasMarker 방식: 전체 데이터 순회 (필터링 제거)
+
+    polygonsRef.current.forEach(function (polygon) {
+      if (polygon.visible === false) return; // 🚀 캐시 확인 (ID 기반으로 변경)
+
+      var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+      if (!offsets) {
+        cacheMissCount++;
+        offsets = polygon.positions.map(function (pos) {
+          return controller.positionToOffset(pos);
+        }); // LRU: 캐시 크기 제한
+
+        if (polygonOffsetCacheRef.current.size >= MAX_CACHE_SIZE) {
+          var firstKey = polygonOffsetCacheRef.current.keys().next().value;
+
+          if (firstKey) {
+            polygonOffsetCacheRef.current.delete(firstKey);
+          }
+        }
+
+        polygonOffsetCacheRef.current.set(polygon.id, offsets);
+      }
+
+      var innerOffsets;
+
+      if (polygon.innerPositions) {
+        // innerOffsets도 캐시 사용
+        innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+        if (!innerOffsets) {
+          innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+            return innerPositions.map(function (pos) {
+              return controller.positionToOffset(pos);
+            });
+          });
+          polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+        }
+      } // 렌더러 호출 (항상 기본 스타일)
+
+
+      defaultPolygonRenderer({
+        context: baseContextRef.current,
+        offsets: offsets,
+        innerOffsets: innerOffsets,
+        polygon: polygon,
+        isHovered: false,
+        defaultBackground: background,
+        defaultStrokeColor: strokeColor,
+        defaultStrokeWidth: strokeWidth,
+        hoverBackground: background,
+        hoverStrokeColor: strokeColor
+      });
+    }); // 요약 로그만 출력 (캐시 미스가 있을 때만)
+
+    if (cacheMissCount > 0) {
+      console.log("\uD83C\uDFA8 [renderBasePolygons] \uCE90\uC2DC \uBBF8\uC2A4: ".concat(cacheMissCount, "\uAC1C, \uD604\uC7AC \uCE90\uC2DC \uD06C\uAE30: ").concat(polygonOffsetCacheRef.current.size));
+    } // 렌더링 완료 콜백 호출
+
+
+    if (onRenderComplete) {
+      onRenderComplete();
+    }
+  }; // 베이스 마커 렌더링 (기본 상태 마커만, IDLE 시 업데이트)
+
+
+  var renderBaseMarkers = function () {
+    if (!baseMarkerContextRef.current || !markerRenderer) return;
+    if (!markersRef.current || markersRef.current.length === 0) return;
+    clearRect(baseMarkerCanvasRef.current, baseMarkerContextRef.current); // 마커 경계 정보 초기화
+
+    markerBoundsRef.current.clear(); // 🚀 WoongCanvasMarker 방식: 전체 데이터 순회 (필터링 제거)
+
+    markersRef.current.forEach(function (marker) {
+      var _a, _b;
+
+      if (marker.visible === false) return; // 호버/클릭 상태인 마커는 스킵 (인터랙션 레이어에서 렌더링)
+
+      if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) return;
+      if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) return; // 🚀 캐시 확인 (ID 기반으로 변경)
+
+      var offset = markerOffsetCacheRef.current.get(marker.id);
+
+      if (!offset) {
+        offset = controller.positionToOffset(new Position(marker.lat, marker.lng));
+        markerOffsetCacheRef.current.set(marker.id, offset);
+      } // 커스텀 마커 렌더러 호출 (기본 상태)
+
+
+      var markerBounds = markerRenderer({
+        context: baseMarkerContextRef.current,
+        x: offset.x,
+        y: offset.y,
+        marker: marker,
+        isHovered: false,
+        isClicked: false
+      }); // 마커 경계 정보 저장 (hit-test용)
+
+      markerBoundsRef.current.set(marker.id, {
+        marker: marker,
+        bounds: markerBounds
+      });
+    });
+  }; // 인터랙션 마커 렌더링 (호버/클릭 마커만, 마우스 이동 시 업데이트)
+
+
+  var renderInteractionMarkers = function () {
+    if (!interactiveMarkerContextRef.current || !markerRenderer) return;
+    clearRect(interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current); // 클릭된 마커 먼저 그리기 (하단 레이어)
+
+    if (clickedMarkerRef.current) {
+      var marker = clickedMarkerRef.current;
+
+      if (marker.visible !== false) {
+        // 🚀 캐시 확인 (ID 기반으로 변경)
+        var offset = markerOffsetCacheRef.current.get(marker.id);
+
+        if (!offset) {
+          offset = controller.positionToOffset(new Position(marker.lat, marker.lng));
+          markerOffsetCacheRef.current.set(marker.id, offset);
+        }
+
+        var markerBounds = markerRenderer({
+          context: interactiveMarkerContextRef.current,
+          x: offset.x,
+          y: offset.y,
+          marker: marker,
+          isHovered: false,
+          isClicked: true
+        }); // 마커 경계 정보 업데이트
+
+        markerBoundsRef.current.set(marker.id, {
+          marker: marker,
+          bounds: markerBounds
+        });
+      }
+    } // 호버된 마커 나중에 그리기 (최상단 레이어)
+
+
+    if (hoveredMarkerRef.current) {
+      var marker = hoveredMarkerRef.current;
+
+      if (marker.visible !== false) {
+        // 🚀 캐시 확인 (ID 기반으로 변경)
+        var offset = markerOffsetCacheRef.current.get(marker.id);
+
+        if (!offset) {
+          offset = controller.positionToOffset(new Position(marker.lat, marker.lng));
+          markerOffsetCacheRef.current.set(marker.id, offset);
+        }
+
+        var markerBounds = markerRenderer({
+          context: interactiveMarkerContextRef.current,
+          x: offset.x,
+          y: offset.y,
+          marker: marker,
+          isHovered: true,
+          isClicked: false
+        }); // 마커 경계 정보 업데이트
+
+        markerBoundsRef.current.set(marker.id, {
+          marker: marker,
+          bounds: markerBounds
+        });
+      }
+    }
+  }; // 인터랙션 폴리곤 렌더링 (호버 + 클릭)
+
+
+  var renderInteractionPolygons = function () {
+    if (!hoverContextRef.current) return; // 인터랙션 캔버스 클리어
+
+    clearRect(hoverCanvasRef.current, hoverContextRef.current); // 1. 클릭된 폴리곤 먼저 그리기 (하단 레이어)
+
+    if (clickedPolygonRef.current) {
+      var polygon = clickedPolygonRef.current;
+
+      if (polygon.visible !== false) {
+        // 🚀 캐시 확인 (ID 기반으로 변경)
+        var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+        if (!offsets) {
+          offsets = polygon.positions.map(function (pos) {
+            return controller.positionToOffset(pos);
+          });
+          polygonOffsetCacheRef.current.set(polygon.id, offsets);
+        }
+
+        var innerOffsets = void 0;
+
+        if (polygon.innerPositions) {
+          // innerOffsets도 캐시 사용
+          innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+          if (!innerOffsets) {
+            innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+              return innerPositions.map(function (pos) {
+                return controller.positionToOffset(pos);
+              });
+            });
+            polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+          }
+        } // 클릭 스타일 (노란색)
+
+
+        defaultPolygonRenderer({
+          context: hoverContextRef.current,
+          offsets: offsets,
+          innerOffsets: innerOffsets,
+          polygon: polygon,
+          isHovered: true,
+          defaultBackground: background,
+          defaultStrokeColor: strokeColor,
+          defaultStrokeWidth: strokeWidth,
+          hoverBackground: 'rgba(255, 200, 0, 0.6)',
+          hoverStrokeColor: 'orange' // 주황색 테두리
+
+        });
+      }
+    } // 2. 호버된 폴리곤 나중에 그리기 (최상단 레이어)
+
+
+    if (hoveredPolygonRef.current) {
+      var polygon = hoveredPolygonRef.current;
+
+      if (polygon.visible !== false) {
+        // 🚀 캐시 확인 (ID 기반으로 변경)
+        var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+        if (!offsets) {
+          offsets = polygon.positions.map(function (pos) {
+            return controller.positionToOffset(pos);
+          });
+          polygonOffsetCacheRef.current.set(polygon.id, offsets);
+        }
+
+        var innerOffsets = void 0;
+
+        if (polygon.innerPositions) {
+          // innerOffsets도 캐시 사용
+          innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+          if (!innerOffsets) {
+            innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+              return innerPositions.map(function (pos) {
+                return controller.positionToOffset(pos);
+              });
+            });
+            polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+          }
+        } // 호버 스타일 (빨간색)
+
+
+        defaultPolygonRenderer({
+          context: hoverContextRef.current,
+          offsets: offsets,
+          innerOffsets: innerOffsets,
+          polygon: polygon,
+          isHovered: true,
+          defaultBackground: background,
+          defaultStrokeColor: strokeColor,
+          defaultStrokeWidth: strokeWidth,
+          hoverBackground: 'rgba(255, 0, 0, 0.5)',
+          hoverStrokeColor: 'red' // 빨간색 테두리
+
+        });
+      }
+    }
+  }; // point-in-polygon 테스트 (ray casting algorithm)
+
+
+  var pointInPolygon = function (x, y, polygon) {
+    if (polygon.length < 3) return false;
+    var inside = false;
+
+    for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+      var xi = polygon[i].x,
+          yi = polygon[i].y;
+      var xj = polygon[j].x,
+          yj = polygon[j].y;
+
+      if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
+        inside = !inside;
+      }
+    }
+
+    return inside;
+  }; // 히트 테스트 함수 (마커 우선)
+
+
+  var findPolygonAt = function (x, y) {
+    var _a, _b;
+
+    if (!polygonsRef.current || polygonsRef.current.length === 0) return null; // 1. 마커 먼저 체크 (우선순위: hover 중 → clicked 중 → 배열 역순)
+
+    if (markersRef.current) {
+      // 🎯 최우선: 현재 hover 중인 마커가 있으면 그것부터 체크
+      if (hoveredMarkerRef.current && hoveredMarkerRef.current.visible !== false) {
+        var markerData = markerBoundsRef.current.get(hoveredMarkerRef.current.id);
+
+        if (markerData) {
+          var bounds = markerData.bounds;
+
+          if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+            return null; // 마커 히트 시 null 반환 (폴리곤이 아니므로)
+          }
+        }
+      } // 🎯 두 번째: hover 중인 마커에 히트 안 되고, clicked 마커가 있으면 체크
+
+
+      if (clickedMarkerRef.current && clickedMarkerRef.current.visible !== false) {
+        var markerData = markerBoundsRef.current.get(clickedMarkerRef.current.id);
+
+        if (markerData) {
+          var bounds = markerData.bounds;
+
+          if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+            return null; // 마커 히트 시 null 반환 (폴리곤이 아니므로)
+          }
+        }
+      } // 🎯 세 번째: 나머지 마커들을 역순으로 체크 (위에 그려진 것부터)
+
+
+      for (var i = markersRef.current.length - 1; i >= 0; i--) {
+        var marker = markersRef.current[i];
+        if (marker.visible === false) continue; // 이미 체크한 hover/clicked 마커는 스킵
+
+        if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) continue;
+        if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) continue;
+        var markerData = markerBoundsRef.current.get(marker.id);
+        if (!markerData) continue;
+        var bounds = markerData.bounds; // 사각형 경계 체크
+
+        if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+          // 마커 히트 시 null 반환 (폴리곤이 아니므로)
+          return null;
+        }
+      }
+    } // 2. 마커에 히트 안 되면 폴리곤 체크 - 🚀 전체 폴리곤 순회
+    // 역순으로 체크 (위에 그려진 것부터)
+
+
+    for (var i = polygonsRef.current.length - 1; i >= 0; i--) {
+      var polygon = polygonsRef.current[i];
+      if (polygon.visible === false) continue; // 🚀 캐시 확인 (ID 기반으로 변경)
+
+      var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+      if (!offsets) {
+        offsets = polygon.positions.map(function (pos) {
+          return controller.positionToOffset(pos);
+        });
+        polygonOffsetCacheRef.current.set(polygon.id, offsets);
+      } // 외부 폴리곤 체크
+
+
+      if (pointInPolygon(x, y, offsets)) {
+        // 도넛 폴리곤인 경우 내부 구멍도 체크
+        if (polygon.innerPositions && polygon.innerPositions.length > 0) {
+          var innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+          if (!innerOffsets) {
+            innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+              return innerPositions.map(function (pos) {
+                return controller.positionToOffset(pos);
+              });
+            });
+            polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+          } // 내부 구멍 중 하나라도 포함되면 이 폴리곤은 스킵하고 다음 폴리곤 체크
+
+
+          var isInHole = false;
+
+          for (var _i = 0, innerOffsets_1 = innerOffsets; _i < innerOffsets_1.length; _i++) {
+            var innerOffset = innerOffsets_1[_i];
+
+            if (pointInPolygon(x, y, innerOffset)) {
+              isInHole = true;
+              break;
+            }
+          } // 구멍 안에 있으면 이 폴리곤은 스킵하고 다음 폴리곤 계속 검색
+
+
+          if (isInHole) {
+            continue;
+          }
+        } // 외부 폴리곤 안에 있고, 구멍 안에는 없으면 히트
+
+
+        return polygon;
+      }
+    }
+
+    return null;
+  }; // IDLE 이벤트 핸들러 (WoongCanvasMarker 최적화 적용)
+
+
+  var handleIdle = function () {
+    var beforeCacheSize = polygonOffsetCacheRef.current.size;
+    clearRect(baseCanvasRef.current, baseContextRef.current); // 표시 복구 (드래그/줌 중 숨김 처리 복원)
+
+    containerRef.current && (containerRef.current.style.visibility = '');
+    draggingRef.current = false;
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    };
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+    } // 🚀 캐시 무효화 (지도 이동/줌으로 좌표가 바뀌므로 전체 clear 필요)
+
+
+    polygonOffsetCacheRef.current.clear();
+    polygonInnerOffsetCacheRef.current.clear();
+    markerOffsetCacheRef.current.clear();
+    markerBoundsRef.current.clear(); // 캐시 clear 로그
+
+    if (beforeCacheSize > 0) {
+      console.log("\uD83E\uDDF9 [IDLE] \uCE90\uC2DC \uCD08\uAE30\uD654: ".concat(beforeCacheSize, "\uAC1C \uC81C\uAC70 (\uC88C\uD45C \uAC31\uC2E0 \uD544\uC694)"));
+    } // 마커 이동
+
+
+    var bounds = controller.getCurrBounds();
+
+    var markerOptions = __assign({
+      position: bounds.nw
+    }, options);
+
+    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 🚀 폴리곤 렌더링 (독립)
+
+    if (polygonsRef.current.length > 0) {
+      renderBasePolygons();
+      renderInteractionPolygons();
+    } // 🚀 마커 렌더링 (독립)
+
+
+    if (markersRef.current.length > 0 && markerRenderer) {
+      renderBaseMarkers();
+      renderInteractionMarkers();
+    }
+  };
+
+  var handleZoomStart = function () {
+    containerRef.current && (containerRef.current.style.visibility = 'hidden');
+  };
+
+  var handleZoomEnd = function () {
+    containerRef.current && (containerRef.current.style.visibility = '');
+  }; // 지도 이벤트를 화면 좌표로 변환 (CanvasMarkerHanquf 방식)
+
+
+  var parseEventToOffset = function (event) {
+    var mapDiv = controller.mapDivElement;
+    var rect = mapDiv.getBoundingClientRect();
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }; // 🚀 지도 클릭 이벤트 핸들러 (WoongCanvasMarker 방식 - controller.addEventListener)
+
+
+  var handleMapClick = function (event) {
+    var _a, _b, _c;
+
+    var clickedOffset = controller.positionToOffset(event.param.position); // 1. 마커 먼저 체크 (우선순위: hover 중 → clicked 중 → 배열 역순)
+
+    var hitMarker = null;
+
+    if (markersRef.current) {
+      // 🎯 최우선: 현재 hover 중인 마커가 있으면 그것부터 체크
+      if (hoveredMarkerRef.current && hoveredMarkerRef.current.visible !== false) {
+        var markerData = markerBoundsRef.current.get(hoveredMarkerRef.current.id);
+
+        if (markerData) {
+          var bounds = markerData.bounds;
+
+          if (clickedOffset.x >= bounds.x && clickedOffset.x <= bounds.x + bounds.width && clickedOffset.y >= bounds.y && clickedOffset.y <= bounds.y + bounds.height) {
+            hitMarker = hoveredMarkerRef.current;
+          }
+        }
+      } // 🎯 두 번째: hover 중인 마커에 히트 안 되고, clicked 마커가 있으면 체크
+
+
+      if (!hitMarker && clickedMarkerRef.current && clickedMarkerRef.current.visible !== false) {
+        var markerData = markerBoundsRef.current.get(clickedMarkerRef.current.id);
+
+        if (markerData) {
+          var bounds = markerData.bounds;
+
+          if (clickedOffset.x >= bounds.x && clickedOffset.x <= bounds.x + bounds.width && clickedOffset.y >= bounds.y && clickedOffset.y <= bounds.y + bounds.height) {
+            hitMarker = clickedMarkerRef.current;
+          }
+        }
+      } // 🎯 세 번째: 나머지 마커들을 역순으로 체크 (위에 그려진 것부터)
+
+
+      if (!hitMarker) {
+        for (var i = markersRef.current.length - 1; i >= 0; i--) {
+          var marker = markersRef.current[i];
+          if (marker.visible === false) continue; // 이미 체크한 hover/clicked 마커는 스킵
+
+          if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) continue;
+          if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) continue;
+          var markerData = markerBoundsRef.current.get(marker.id);
+          if (!markerData) continue;
+          var bounds = markerData.bounds;
+
+          if (clickedOffset.x >= bounds.x && clickedOffset.x <= bounds.x + bounds.width && clickedOffset.y >= bounds.y && clickedOffset.y <= bounds.y + bounds.height) {
+            hitMarker = marker;
+            break;
+          }
+        }
+      }
+    } // 2. 마커에 히트 안 되면 폴리곤 체크
+
+
+    var hitPolygon = findPolygonAt(clickedOffset.x, clickedOffset.y); // 마커 클릭 해제
+
+    if (clickedMarkerRef.current) {
+      clickedMarkerRef.current = null;
+      renderInteractionMarkers();
+    }
+
+    if (hitPolygon) {
+      // 같은 폴리곤 다시 클릭하면 선택 해제 (토글)
+      if (((_c = clickedPolygonRef.current) === null || _c === void 0 ? void 0 : _c.id) === hitPolygon.id) {
+        console.log('🖱️ Polygon deselected:', hitPolygon.id);
+        clickedPolygonRef.current = null; // 선택 해제 시에도 콜백 호출 (null 전달)
+
+        if (onPolygonClick) {
+          onPolygonClick(null);
+        }
+      } else {
+        console.log('🖱️ Polygon selected:', hitPolygon.id);
+        clickedPolygonRef.current = hitPolygon; // 선택 시 콜백 호출
+
+        if (onPolygonClick) {
+          onPolygonClick(hitPolygon);
+        }
+      } // 인터랙션 레이어 재렌더링
+
+
+      renderInteractionPolygons();
+    }
+  }; // 마우스 이벤트 RAF 스로틀링용
+
+
+  var rafIdRef = useRef(); // 마우스 이벤트 핸들러 (requestAnimationFrame으로 최적화)
+
+  var handleMouseMove = function (e) {
+    // 🚀 드래그 중이면 호버 처리 스킵 (WoongCanvasMarker 방식)
+    if (draggingRef.current) return; // 이미 RAF가 대기 중이면 스킵
+
+    if (rafIdRef.current) return;
+    rafIdRef.current = requestAnimationFrame(function () {
+      var _a, _b, _c;
+
+      rafIdRef.current = undefined;
+
+      var _d = parseEventToOffset(e),
+          x = _d.x,
+          y = _d.y; // 1. 마커 먼저 체크 (우선순위: hover 중 → clicked 중 → 배열 역순)
+
+
+      var hitMarker = null;
+
+      if (markersRef.current) {
+        // 🎯 최우선: 현재 hover 중인 마커가 있으면 그것부터 체크
+        if (hoveredMarkerRef.current && hoveredMarkerRef.current.visible !== false) {
+          var markerData = markerBoundsRef.current.get(hoveredMarkerRef.current.id);
+
+          if (markerData) {
+            var bounds = markerData.bounds;
+
+            if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+              hitMarker = hoveredMarkerRef.current;
+            }
+          }
+        } // 🎯 두 번째: hover 중인 마커에 히트 안 되고, clicked 마커가 있으면 체크
+
+
+        if (!hitMarker && clickedMarkerRef.current && clickedMarkerRef.current.visible !== false) {
+          var markerData = markerBoundsRef.current.get(clickedMarkerRef.current.id);
+
+          if (markerData) {
+            var bounds = markerData.bounds;
+
+            if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+              hitMarker = clickedMarkerRef.current;
+            }
+          }
+        } // 🎯 세 번째: 나머지 마커들을 역순으로 체크 (위에 그려진 것부터)
+
+
+        if (!hitMarker) {
+          for (var i = markersRef.current.length - 1; i >= 0; i--) {
+            var marker = markersRef.current[i];
+            if (marker.visible === false) continue; // 이미 체크한 hover/clicked 마커는 스킵
+
+            if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) continue;
+            if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) continue;
+            var markerData = markerBoundsRef.current.get(marker.id);
+            if (!markerData) continue;
+            var bounds = markerData.bounds;
+
+            if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+              hitMarker = marker;
+              break;
+            }
+          }
+        }
+      } // 마커가 호버되었을 때
+
+
+      if (hitMarker) {
+        // 폴리곤 호버 해제
+        if (hoveredPolygonRef.current) {
+          hoveredPolygonRef.current = null;
+
+          if (onPolygonLeave) {
+            onPolygonLeave();
+          }
+        } // 마커 호버 상태 업데이트
+
+
+        if (hitMarker.id !== ((_c = hoveredMarkerRef.current) === null || _c === void 0 ? void 0 : _c.id)) {
+          hoveredMarkerRef.current = hitMarker;
+          console.log('🎯 Marker hovered:', hitMarker.id);
+
+          if (onMarkerHover) {
+            onMarkerHover(hitMarker);
+          }
+
+          renderInteractionMarkers();
+          renderInteractionPolygons();
+        }
+
+        return;
+      } // 2. 마커에 히트 안 되면 폴리곤 체크
+
+
+      var hitPolygon = findPolygonAt(x, y); // 마커 호버 해제
+
+      if (hoveredMarkerRef.current) {
+        if (onMarkerLeave) {
+          onMarkerLeave();
+        }
+
+        hoveredMarkerRef.current = null;
+        renderInteractionMarkers();
+      }
+
+      if (hitPolygon !== hoveredPolygonRef.current) {
+        // leave 이벤트
+        if (hoveredPolygonRef.current && onPolygonLeave) {
+          onPolygonLeave();
+        } // hover 이벤트
+
+
+        hoveredPolygonRef.current = hitPolygon;
+
+        if (hitPolygon && onPolygonHover) {
+          onPolygonHover(hitPolygon);
+        } // 인터랙션 레이어 재렌더링 (호버 + 클릭)
+
+
+        renderInteractionPolygons();
+      }
+    });
+  };
+
+  var handleCenterChanged = function () {
+    // 드래그 중에는 리렌더 대신 transform 으로만 추종
+    var center = controller.getCurrBounds().getCenter();
+    var curr = controller.positionToOffset(center);
+    var prev = prevCenterOffsetRef.current;
+
+    if (!prev) {
+      prevCenterOffsetRef.current = {
+        x: curr.x,
+        y: curr.y
+      };
+      draggingRef.current = true;
+      return;
+    }
+
+    var dx = prev.x - curr.x;
+    var dy = prev.y - curr.y;
+    accumTranslateRef.current = {
+      x: accumTranslateRef.current.x + dx,
+      y: accumTranslateRef.current.y + dy
+    };
+    prevCenterOffsetRef.current = {
+      x: curr.x,
+      y: curr.y
+    };
+    draggingRef.current = true;
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+    }
+  };
+
+  var handleMouseLeave = function () {
+    // RAF 취소
+    if (rafIdRef.current) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = undefined;
+    }
+
+    if (hoveredPolygonRef.current && onPolygonLeave) {
+      onPolygonLeave();
+    }
+
+    hoveredPolygonRef.current = null;
+    hoveredMarkerRef.current = null;
+    renderInteractionMarkers();
+    renderInteractionPolygons();
+  }; // 🚀 initialize - 폴리곤 캔버스 초기화 (독립)
+
+
+  useEffect(function () {
+    if (baseCanvasRef.current && hoverCanvasRef.current && containerRef.current) {
+      // 2d 컨텍스트 설정 (폴리곤 캔버스만)
+      baseContextRef.current = baseCanvasRef.current.getContext('2d');
+      hoverContextRef.current = hoverCanvasRef.current.getContext('2d'); // 스케일링 (폴리곤 캔버스만)
+
+      if (baseContextRef.current) {
+        scaleCanvas(controller, baseCanvasRef.current, baseContextRef.current);
+      }
+
+      if (hoverContextRef.current) {
+        scaleCanvas(controller, hoverCanvasRef.current, hoverContextRef.current);
+      } // 폴리곤 데이터가 있으면 렌더링
+
+
+      if (polygonsRef.current.length > 0) {
+        renderBasePolygons();
+        renderInteractionPolygons();
+      }
+    }
+  }, []); // 🚀 initialize - 마커 캔버스 초기화 (독립)
+
+  useEffect(function () {
+    if (baseMarkerCanvasRef.current && interactiveMarkerCanvasRef.current) {
+      // 2d 컨텍스트 설정 (마커 캔버스만)
+      baseMarkerContextRef.current = baseMarkerCanvasRef.current.getContext('2d');
+      interactiveMarkerContextRef.current = interactiveMarkerCanvasRef.current.getContext('2d'); // 스케일링 (마커 캔버스만)
+
+      if (baseMarkerContextRef.current) {
+        scaleCanvas(controller, baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+      }
+
+      if (interactiveMarkerContextRef.current) {
+        scaleCanvas(controller, interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current);
+      } // 마커 데이터가 있으면 렌더링
+
+
+      if (markersRef.current.length > 0 && markerRenderer) {
+        renderBaseMarkers();
+        renderInteractionMarkers();
+      }
+    }
+  }, [markerRenderer]); // 🚀 공통 초기화 - 이벤트 등록 및 리사이즈
+
+  useEffect(function () {
+    var resizeObserver;
+
+    if (containerRef.current) {
+      // 리사이즈 처리
+      resizeObserver = new ResizeObserver(function () {
+        // 폴리곤 캔버스 리사이즈
+        if (baseCanvasRef.current && baseContextRef.current) {
+          clearRect(baseCanvasRef.current, baseContextRef.current);
+          scaleCanvas(controller, baseCanvasRef.current, baseContextRef.current);
+        }
+
+        if (hoverCanvasRef.current && hoverContextRef.current) {
+          clearRect(hoverCanvasRef.current, hoverContextRef.current);
+          scaleCanvas(controller, hoverCanvasRef.current, hoverContextRef.current);
+        } // 마커 캔버스 리사이즈
+
+
+        if (baseMarkerCanvasRef.current && baseMarkerContextRef.current) {
+          clearRect(baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+          scaleCanvas(controller, baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+        }
+
+        if (interactiveMarkerCanvasRef.current && interactiveMarkerContextRef.current) {
+          clearRect(interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current);
+          scaleCanvas(controller, interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current);
+        } // 폴리곤 렌더링
+
+
+        if (polygonsRef.current.length > 0) {
+          renderBasePolygons();
+          renderInteractionPolygons();
+        } // 마커 렌더링
+
+
+        if (markersRef.current.length > 0 && markerRenderer) {
+          renderBaseMarkers();
+          renderInteractionMarkers();
+        }
+      });
+      resizeObserver.observe(controller.mapDivElement); // 🚀 이벤트 등록 (한 번만)
+
+      controller.addEventListener('IDLE', handleIdle);
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
+      controller.addEventListener('CLICK', handleMapClick);
+      controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // 지도 div에 마우스 이벤트 등록
+
+      controller.mapDivElement.addEventListener('mousemove', handleMouseMove);
+      controller.mapDivElement.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return function () {
+      // RAF 정리
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+
+      resizeObserver && resizeObserver.disconnect();
+      controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+      controller.removeEventListener('CLICK', handleMapClick);
+      controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
+      controller.mapDivElement.removeEventListener('mousemove', handleMouseMove);
+      controller.mapDivElement.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, []); // 🚀 polygons 데이터 업데이트 (독립)
+
+  useEffect(function () {
+    console.log('📦 [useEffect] polygons 변경:', polygons === null || polygons === void 0 ? void 0 : polygons.length, '개'); // refs 업데이트
+
+    polygonsRef.current = polygons || []; // 🚀 폴리곤만 렌더링 (마커와 독립)
+
+    if (baseContextRef.current) {
+      renderBasePolygons();
+      renderInteractionPolygons();
+    }
+  }, [polygons]); // 🚀 markers 데이터 업데이트 (독립)
+
+  useEffect(function () {
+    console.log('📦 [useEffect] markers 변경:', markers === null || markers === void 0 ? void 0 : markers.length, '개'); // refs 업데이트
+
+    markersRef.current = markers || []; // 🚀 마커만 렌더링 (폴리곤과 독립)
+
+    if (baseMarkerContextRef.current && markerRenderer) {
+      renderBaseMarkers();
+      renderInteractionMarkers();
+    }
+  }, [markers, markerRenderer]); // CanvasMarker 스타일의 createPortal return
+
+  return createPortal(React.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  }, React.createElement("canvas", {
+    ref: baseCanvasRef,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      pointerEvents: 'revert-layer',
+      width: '100%',
+      height: '100%'
+    }
+  }), React.createElement("canvas", {
+    ref: hoverCanvasRef,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      pointerEvents: 'none',
+      width: '100%',
+      height: '100%'
+    }
+  }), React.createElement("canvas", {
+    ref: baseMarkerCanvasRef,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      pointerEvents: 'none',
+      width: '100%',
+      height: '100%'
+    }
+  }), React.createElement("canvas", {
+    ref: interactiveMarkerCanvasRef,
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      pointerEvents: 'none',
+      width: '100%',
+      height: '100%'
+    }
+  })), divElement);
+});
+
 /**
  * Mint Map 컴포넌트
  *
@@ -5911,4 +7637,4 @@ function MintMap(_a) {
   }), loading));
 }
 
-export { AnimationPlayer, Bounds, CanvasMarker, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, Spacing, Status, getClusterInfo, getMapOfType, log, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, Spacing, Status, getClusterInfo, getMapOfType, log, useMarkerMoving, useMintMapController, waiting };