@mint-ui/map 0.4.6-beta → 0.5.0-beta

package/dist/index.es.js

@@ -39,7 +39,7 @@ var PolygonCalculator =
 function () {
   function PolygonCalculator() {}
 
-  PolygonCalculator.getCenter = function (positions) {
+  PolygonCalculator.getRegionInfo = function (positions) {
     var maxX, minX, maxY, minY;
 
     for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
@@ -60,11 +60,43 @@ function () {
       if (minY === undefined || pos.lng < minY) {
         minY = pos.lng;
       }
-    } //console.log('center min max => ', maxX, minX, maxY, minY)
+    }
+
+    return {
+      maxLat: maxX,
+      minLat: minX,
+      maxLng: maxY,
+      minLng: minY,
+      centerLat: minX && maxX ? minX + (maxX - minX) / 2 : undefined,
+      centerLng: minY && maxY ? minY + (maxY - minY) / 2 : undefined
+    };
+  };
+
+  PolygonCalculator.getRegionStart = function (positions) {
+    var info = this.getRegionInfo(positions);
+
+    if (info.minLat && info.minLng) {
+      return new PositionMirror(info.minLat, info.minLng);
+    }
 
+    throw new Error('Calculate RegionStart Error!!!');
+  };
+
+  PolygonCalculator.getRegionEnd = function (positions) {
+    var info = this.getRegionInfo(positions);
+
+    if (info.maxLat && info.maxLng) {
+      return new PositionMirror(info.maxLat, info.maxLng);
+    }
+
+    throw new Error('Calculate RegionEnd Error!!!');
+  };
+
+  PolygonCalculator.getCenter = function (positions) {
+    var info = this.getRegionInfo(positions);
 
-    if (maxX && minX && maxY && minY) {
-      return new PositionMirror(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
+    if (info.centerLat && info.centerLng) {
+      return new PositionMirror(info.centerLat, info.centerLng);
     }
 
     throw new Error('Calculate Center Error!!!');
@@ -175,6 +207,90 @@ function () {
     return false;
   };
 
+  PolygonCalculator.simplifyPoints = function (polygon, tolerance, lastRepeated) {
+    var target = lastRepeated ? polygon.slice(0, polygon.length - 1) : polygon;
+    return this.simplify(target.map(function (position) {
+      return [position.lng, position.lat];
+    }), tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE).map(function (point) {
+      return new PositionMirror(point[1], point[0]);
+    });
+  };
+
+  PolygonCalculator.simplify = function (points, tolerance) {
+    if (points.length <= 2) {
+      return points;
+    }
+
+    var dMax = 0;
+    var index = 0; // Find the point with the maximum distance from the line segment
+
+    for (var i = 1; i < points.length - 1; i++) {
+      var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1]);
+
+      if (d > dMax) {
+        dMax = d;
+        index = i;
+      }
+    } // If the maximum distance is greater than the tolerance, recursively simplify
+
+
+    if (dMax > tolerance) {
+      var left = this.simplify(points.slice(0, index + 1), tolerance);
+      var right = this.simplify(points.slice(index), tolerance); // Concatenate the simplified left and right segments
+
+      return left.slice(0, left.length - 1).concat(right);
+    } else {
+      // If the maximum distance is less than or equal to the tolerance, return the endpoints
+      return [points[0], points[points.length - 1]];
+    }
+  }; // Calculate the perpendicular distance from a point to a line segment
+
+
+  PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd) {
+    var x = point[0];
+    var y = point[1];
+    var x1 = lineStart[0];
+    var y1 = lineStart[1];
+    var x2 = lineEnd[0];
+    var y2 = lineEnd[1];
+    var numerator = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
+    var denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
+    return numerator / denominator;
+  };
+
+  PolygonCalculator.calculatePolygonSize = function (polygon, innerPolygons) {
+    var _this = this;
+
+    var outer = this.calculatePolygonSizeMain(polygon);
+    var inner = 0;
+    innerPolygons && innerPolygons.map(function (innerPolygon) {
+      inner += _this.calculatePolygonSizeMain(innerPolygon);
+    });
+    return outer - inner;
+  };
+
+  PolygonCalculator.calculatePolygonSizeMain = function (polygon) {
+    var vertices = polygon.map(function (pos) {
+      return {
+        x: GeoCalulator.convertLongitudeToMeterValue(pos.lat, pos.lng),
+        y: GeoCalulator.convertLatitudeToMeterValue(pos.lat)
+      };
+    });
+    var n = vertices.length;
+    var sum = 0;
+
+    for (var i = 0; i < n; i++) {
+      var currentVertex = vertices[i];
+      var nextVertex = vertices[(i + 1) % n];
+      sum += currentVertex.x * nextVertex.y - currentVertex.y * nextVertex.x;
+    }
+
+    var area = Math.abs(sum) / 2;
+    return area;
+  };
+
+  PolygonCalculator.TOLERANCE_NAVER_STYLE = 0.0001;
+  PolygonCalculator.TOLERANCE_GOOGLE_STYLE = 0.00001;
   return PolygonCalculator;
 }();
 
@@ -188,7 +304,7 @@ function () {
     var dLon = this.deg2rad(pos2.lng - pos1.lng);
     var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.deg2rad(pos1.lat)) * Math.cos(this.deg2rad(pos2.lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    var d = this.EARTH_RADIUS * c; // Distance in km
+    var d = this.EARTH_EQUATORIAL_RADIUS_KM * c; // Distance in km
 
     return d;
   };
@@ -201,6 +317,53 @@ function () {
     return meter * this.LATITUDE_POSITION_VALUE_PER_METER;
   };
 
+  GeoCalulator.convertLatitudeToMeterValue = function (lat) {
+    return lat * this.METER_VALUE_PER_LATITUDE;
+  };
+
+  GeoCalulator.convertLongitudeToMeterValue = function (lat, lng) {
+    return lng * this.calculateLongitudeValueWithLatitudeInMeter(lat);
+  };
+
+  GeoCalulator.getCacheUnitOfLongitudeValueWithLatitudeInMeter = function (lat) {
+    return lat.toFixed(2);
+  };
+
+  GeoCalulator.getCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit) {
+    return this.CACHE_OF_LNG_PER_METER.get(latUnit);
+  };
+
+  GeoCalulator.setCacheOfLongitudeValueWithLatitudeInMeter = function (latUnit, lngValue) {
+    if (this.CACHE_OF_LNG_PER_METER.size > 10) {
+      this.CACHE_OF_LNG_PER_METER.clear();
+    }
+
+    this.CACHE_OF_LNG_PER_METER.set(latUnit, lngValue);
+  };
+
+  GeoCalulator.calculateLongitudeValueWithLatitudeInMeter = function (lat) {
+    // const t = Date.now()
+    // Cache check
+    var latUnit = this.getCacheUnitOfLongitudeValueWithLatitudeInMeter(lat);
+    var fromCache = this.getCacheOfLongitudeValueWithLatitudeInMeter(latUnit);
+
+    if (fromCache !== undefined) {
+      // console.log(`cache hit!! ${Date.now() - t} ms`, fromCache, latUnit, this.CACHE_OF_LNG_PER_METER.size);
+      return fromCache;
+    } // Convert latitude and longitude to radians
+
+
+    var latRad = lat * Math.PI / 180; // Calculate Earth's radius at the given latitude
+
+    var radius = this.EARTH_EQUATORIAL_RADIUS * Math.sqrt(1 - Math.pow(this.EARTH_ECCENTRICITY * Math.sin(latRad), 2)); // Calculate the length of one degree of longitude in meters
+
+    var distance = 2 * Math.PI * radius * Math.cos(latRad) / 360; // Cache set
+
+    this.setCacheOfLongitudeValueWithLatitudeInMeter(latUnit, distance); // console.log(`calculated ${Date.now() - t} ms`)
+
+    return distance;
+  };
+
   GeoCalulator.computeNextPositionAndDistances = function (context) {
     var pos1 = context.pos1,
         pos2 = context.pos2,
@@ -262,10 +425,14 @@ function () {
     return context;
   };
 
-  GeoCalulator.EARTH_RADIUS = 6371; //in km (6,371.230 km)
+  GeoCalulator.EARTH_EQUATORIAL_RADIUS = 6378137; //meter (6,378,137 m)
 
-  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / (110 * 1000); //위도 기준 1도는 110km
+  GeoCalulator.EARTH_EQUATORIAL_RADIUS_KM = GeoCalulator.EARTH_EQUATORIAL_RADIUS / 1000;
+  GeoCalulator.EARTH_ECCENTRICITY = 0.08181919;
+  GeoCalulator.METER_VALUE_PER_LATITUDE = 110.32 * 1000; //위도 기준 1도는 110.32km
 
+  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / GeoCalulator.METER_VALUE_PER_LATITUDE;
+  GeoCalulator.CACHE_OF_LNG_PER_METER = new Map();
   GeoCalulator.MS_FROM_HOUR = 60 * 60 * 1000;
   return GeoCalulator;
 }();
@@ -409,6 +576,10 @@ function () {
     this.y = y;
   }
 
+  Offset.prototype.equals = function (other) {
+    return other && this.x === other.x && this.y === other.y;
+  };
+
   return Offset;
 }();
 
@@ -912,6 +1083,57 @@ function waiting(evaluation, timeoutSeconds) {
   });
 }
 
+// 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';
+  }
+
+  MapUIEvent.prototype.get = function (eventName) {
+    var value = this[eventName];
+
+    if (typeof value === 'string') {
+      return value;
+    }
+  };
+
+  return MapUIEvent;
+}();
+
 var NaverMintMapController =
 /** @class */
 function (_super) {
@@ -923,12 +1145,18 @@ function (_super) {
     _this.type = 'naver';
     _this.map = null;
     _this.scriptUrl = 'https://openapi.map.naver.com/openapi/v3/maps.js';
-    _this.scriptModules = ['drawing'];
+    _this.scriptModules = ['drawing']; //  , 'geocoder' , 'panorama' , 'visualization']
+
+    _this.mapEvent = new MapEvent();
+    _this.mapUIEvent = new MapUIEvent();
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
+    _this.eventMap = new Map();
+    Object.freeze(_this.mapEvent);
+    Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
   }
 
@@ -1478,6 +1706,7 @@ function (_super) {
     var _a;
 
     try {
+      this.removeAllEventListener();
       this.map && this.map.destroy();
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
@@ -1525,6 +1754,98 @@ function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
   };
 
+  NaverMintMapController.prototype.addEventListener = function (eventName, callback) {
+    var _this = this;
+
+    var naverEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!naverEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    } // console.log(`${eventName} add`);
+
+
+    var map = this.eventMap.get(eventName);
+
+    if (!map) {
+      map = new Map();
+      this.eventMap.set(eventName, map);
+    }
+
+    var wrappingCallback = function (e) {
+      if (eventName in _this.mapEvent) {
+        var bounds = _this.getCurrBounds();
+
+        var param = {
+          name: eventName,
+          mapType: 'naver',
+          vendorEventName: naverEventName,
+          param: {
+            bounds: bounds,
+            center: bounds.getCenter(),
+            zoomLevel: _this.getZoomLevel()
+          }
+        };
+        callback(param);
+      } else if (eventName in _this.mapUIEvent) {
+        var position = new Position(e.coord.y, e.coord.x);
+        position.offset = new Offset(e.offset.x, e.offset.y);
+        var param = {
+          name: eventName,
+          mapType: 'naver',
+          vendorEventName: naverEventName,
+          param: {
+            position: position,
+            offset: position.offset
+          }
+        };
+        callback(param);
+      }
+    };
+
+    var naverEventListener = naver.maps.Event.addListener(this.map, naverEventName, wrappingCallback);
+    map.set(callback, naverEventListener);
+  };
+
+  NaverMintMapController.prototype.removeEventListener = function (eventName, callback) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      var naverEventListener = map.get(callback);
+
+      if (naverEventListener) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        naver.maps.Event.removeListener(naverEventListener);
+        map.delete(callback);
+      }
+    }
+  };
+
+  NaverMintMapController.prototype.removeAllEventListener = function (eventName) {
+    var _this = this;
+
+    if (eventName) {
+      this.clearEventListener(eventName);
+    } else {
+      this.eventMap.forEach(function (_map, eventName) {
+        _this.clearEventListener(eventName);
+      });
+      this.eventMap.clear();
+    }
+  };
+
+  NaverMintMapController.prototype.clearEventListener = function (eventName) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      map.forEach(function (naverEventListener) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        naver.maps.Event.removeListener(naverEventListener);
+      });
+      this.eventMap.delete(eventName);
+    }
+  };
+
   return NaverMintMapController;
 }(MintMapController);
 
@@ -1541,13 +1862,18 @@ function (_super) {
     _this.scriptUrl = 'https://maps.googleapis.com/maps/api/js';
     _this.scriptModules = ['marker']; //'drawing' , 'geometry' , 'journeySharing' , 'localContext' , 'places' , 'visualization']
 
+    _this.mapEvent = new MapEvent();
+    _this.mapUIEvent = new MapUIEvent();
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragged = false;
+    _this.lastMousePosition = null;
 
     _this.destroyMap = function () {
       try {
+        _this.removeAllEventListener();
+
         _this.map && google.maps.event.clearInstanceListeners(_this.map);
       } catch (e) {
         console.log('google map destroy error', e);
@@ -1555,6 +1881,12 @@ function (_super) {
 
     };
 
+    _this.eventMap = new Map(); //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
+    //나중에 naver 와 마찬가지로 zoomstart 1번 zoom_changed 1번 호출되도록 바꾸는것 고려중
+
+    _this.mapEvent.ZOOMSTART = 'zoom_changed';
+    Object.freeze(_this.mapEvent);
+    Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
   }
 
@@ -1994,6 +2326,20 @@ function (_super) {
                     pos.offset = new Offset(e.pixel.x, e.pixel.y);
 
                     _this.mapProps.onClick(pos);
+                  }); //@ts-ignore
+
+                  map.addListener('mousedown', function (e) {
+                    // console.log('map click', e)
+                    var pos = new Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new Offset(e.pixel.x, e.pixel.y);
+                    _this.lastMousePosition = pos;
+                  }); //@ts-ignore
+
+                  map.addListener('mouseup', function (e) {
+                    // console.log('map click', e)
+                    var pos = new Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new Offset(e.pixel.x, e.pixel.y);
+                    _this.lastMousePosition = pos;
                   });
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
@@ -2062,6 +2408,114 @@ function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
   };
 
+  GoogleMintMapController.prototype.addEventListener = function (eventName, callback) {
+    var _this = this;
+
+    if (!this.map) {
+      return;
+    }
+
+    var googleEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!googleEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    } // console.log(`${eventName} add`);
+
+
+    var map = this.eventMap.get(eventName);
+
+    if (!map) {
+      map = new Map();
+      this.eventMap.set(eventName, map);
+    }
+
+    var wrappingCallback = function (e) {
+      if (eventName in _this.mapEvent) {
+        var bounds = _this.getCurrBounds();
+
+        var param = {
+          name: eventName,
+          mapType: 'google',
+          vendorEventName: googleEventName,
+          param: {
+            bounds: bounds,
+            center: bounds.getCenter(),
+            zoomLevel: _this.getZoomLevel()
+          }
+        };
+        callback(param);
+      } else if (eventName in _this.mapUIEvent) {
+        if (eventName.startsWith('DRAG')) console.log(eventName, e);
+        var position = null;
+
+        if (e) {
+          position = new Position(e.latLng.lat(), e.latLng.lng());
+          position.offset = new Offset(e.pixel.x, e.pixel.y);
+        } else {
+          position = _this.lastMousePosition;
+        }
+
+        var param = {
+          name: eventName,
+          mapType: 'google',
+          vendorEventName: googleEventName,
+          param: {
+            position: position,
+            offset: position === null || position === void 0 ? void 0 : position.offset
+          }
+        };
+        callback(param);
+      }
+    };
+
+    var googleEventListener = this.map.addListener(googleEventName, wrappingCallback);
+    map.set(callback, googleEventListener);
+  };
+
+  GoogleMintMapController.prototype.removeEventListener = function (eventName, callback) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      var listenerMap = this.eventMap.get(eventName);
+
+      if (listenerMap) {
+        var googleEventListener = listenerMap.get(callback);
+
+        if (googleEventListener) {
+          // console.log(`${eventName} remove`);
+          google.maps.event.removeListener(googleEventListener);
+          listenerMap.delete(callback);
+        }
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.removeAllEventListener = function (eventName) {
+    var _this = this;
+
+    if (eventName) {
+      this.clearEventListener(eventName);
+    } else {
+      this.eventMap.forEach(function (_map, eventName) {
+        _this.clearEventListener(eventName);
+      });
+      this.eventMap.clear();
+    }
+  };
+
+  GoogleMintMapController.prototype.clearEventListener = function (eventName) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      map.forEach(function (googleEventListener) {
+        // console.log(`${eventName} remove`);
+        google.maps.event.removeListener(googleEventListener);
+      });
+      this.eventMap.delete(eventName);
+    }
+  };
+
   return GoogleMintMapController;
 }(MintMapController);
 
@@ -2076,12 +2530,20 @@ function (_super) {
     _this.type = 'kakao';
     _this.map = null;
     _this.scriptUrl = 'https://dapi.kakao.com/v2/maps/sdk.js';
-    _this.scriptModules = ['services', 'clusterer'];
+    _this.scriptModules = ['services', 'clusterer']; //  , 'geocoder' , 'panorama' , 'visualization']
+
+    _this.mapEvent = new MapEvent();
+    _this.mapUIEvent = new MapUIEvent();
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
+    _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
+
+    _this.mapEvent.ZOOMSTART = 'zoom_start';
+    Object.freeze(_this.mapEvent);
+    Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
   }
 
@@ -2655,6 +3117,114 @@ function (_super) {
     return latLng ? new Position(latLng.getLat(), latLng.getLng()) : new Position(0, 0);
   };
 
+  KakaoMintMapController.prototype.addEventListener = function (eventName, callback) {
+    var _this = this;
+
+    var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!kakaoEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    } // console.log(`${eventName} add`);
+
+
+    var map = this.eventMap.get(eventName);
+
+    if (!map) {
+      map = new Map();
+      this.eventMap.set(eventName, map);
+    }
+
+    var wrappingCallback = function (e) {
+      if (eventName in _this.mapEvent) {
+        var bounds = _this.getCurrBounds();
+
+        var param = {
+          name: eventName,
+          mapType: 'kakao',
+          vendorEventName: kakaoEventName,
+          param: {
+            bounds: bounds,
+            center: bounds.getCenter(),
+            zoomLevel: _this.getZoomLevel()
+          }
+        };
+        callback(param);
+      } else if (eventName in _this.mapUIEvent) {
+        var position = new Position(e.latLng.getLat(), e.latLng.getLng());
+        position.offset = new Offset(e.point.x, e.point.y);
+        var param = {
+          name: eventName,
+          mapType: 'kakao',
+          vendorEventName: kakaoEventName,
+          param: {
+            position: position,
+            offset: position.offset
+          }
+        };
+        callback(param);
+      }
+    };
+
+    kakao.maps.event.addListener(this.map, kakaoEventName, wrappingCallback);
+    map.set(callback, wrappingCallback);
+  };
+
+  KakaoMintMapController.prototype.removeEventListener = function (eventName, callback) {
+    var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!kakaoEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    }
+
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      var wrappingCallback = map.get(callback);
+
+      if (wrappingCallback) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        kakao.maps.event.removeListener(this.map, kakaoEventName, wrappingCallback);
+        map.delete(callback);
+      }
+    }
+  };
+
+  KakaoMintMapController.prototype.removeAllEventListener = function (eventName) {
+    var _this = this;
+
+    if (eventName) {
+      this.clearEventListener(eventName);
+    } else {
+      this.eventMap.forEach(function (_map, eventName) {
+        _this.clearEventListener(eventName);
+      });
+      this.eventMap.clear();
+    }
+  };
+
+  KakaoMintMapController.prototype.clearEventListener = function (eventName) {
+    var _this = this;
+
+    var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!kakaoEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    }
+
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      map.forEach(function (wrappingCallback) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        kakao.maps.event.removeListener(_this.map, kakaoEventName, wrappingCallback);
+      });
+      this.eventMap.delete(eventName);
+    }
+  };
+
   return KakaoMintMapController;
 }(MintMapController);
 
@@ -2783,28 +3353,258 @@ function () {
   return MintMapCanvasRenderer;
 }();
 
-var AnimationPlayer =
-/** @class */
-function () {
-  function AnimationPlayer(drawFunction, fps) {
-    this.prevtime = 0;
-    this.elapsedTime = 0;
-    this.fps = null;
-    this.baseDrawGapTime = null;
-    this.deltaTime = 0;
-    this.playing = false;
-    this.draw = drawFunction;
-    this.fps = fps || null;
+function SVGCircle(_a) {
+  var _b = _a.radius,
+      radius = _b === void 0 ? 100 : _b,
+      _c = _a.background,
+      background = _c === void 0 ? 'lightgreen' : _c,
+      children = _a.children,
+      _d = _a.svgProperties,
+      svgProperties = _d === void 0 ? {} : _d,
+      _e = _a.shapeProperties,
+      shapeProperties = _e === void 0 ? {} : _e;
 
-    if (fps !== undefined) {
-      this.baseDrawGapTime = 1000 / fps;
+  var _f = useState(radius * 2),
+      boxSize = _f[0],
+      setBoxSize = _f[1];
+
+  useEffect(function () {
+    // console.log('SVGCircle radius', radius);
+    setBoxSize(radius * 2);
+  }, [radius]);
+  return React.createElement(React.Fragment, null, React.createElement("svg", __assign({
+    pointerEvents: "none",
+    width: boxSize,
+    height: boxSize,
+    viewBox: "0 0 100 100"
+  }, svgProperties), React.createElement("circle", __assign({
+    pointerEvents: "visiblepainted",
+    cx: '50',
+    cy: '50',
+    r: '50',
+    fill: background
+  }, shapeProperties))), React.createElement("div", {
+    style: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      left: '0px',
+      top: '0px',
+      width: "".concat(boxSize, "px"),
+      height: "".concat(boxSize, "px")
     }
+  }, children));
+}
 
-    this.init();
-  }
+function SVGPolygon(_a) {
+  var path = _a.path,
+      _b = _a.innerPath,
+      innerPath = _b === void 0 ? [] : _b,
+      _c = _a.background,
+      background = _c === void 0 ? 'lightblue' : _c,
+      _d = _a.svgProperties,
+      svgProperties = _d === void 0 ? {} : _d,
+      _e = _a.shapeProperties,
+      shapeProperties = _e === void 0 ? {} : _e,
+      _f = _a.mode,
+      mode = _f === void 0 ? 'POLYGON' : _f,
+      children = _a.children;
+  var getPolygonInfo = useCallback(function (path) {
+    var maxX, minX, maxY, minY;
 
-  AnimationPlayer.prototype.init = function () {
-    this.deltaTime = 0;
+    for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {
+      var offset = path_1[_i];
+
+      if (maxX === undefined || offset.x > maxX) {
+        maxX = offset.x;
+      }
+
+      if (minX === undefined || offset.x < minX) {
+        minX = offset.x;
+      }
+
+      if (maxY === undefined || offset.y > maxY) {
+        maxY = offset.y;
+      }
+
+      if (minY === undefined || offset.y < minY) {
+        minY = offset.y;
+      }
+    }
+
+    if (!maxX || !minX || !maxY || !minY) {
+      return {
+        containerLeft: 0,
+        containerTop: 0,
+        containerWidth: 0,
+        containerHeight: 0
+      };
+    }
+
+    var width = maxX - minX;
+    var height = maxY - minY;
+    return {
+      containerLeft: Math.floor(minX),
+      containerTop: Math.floor(minY),
+      containerWidth: Math.floor(width),
+      containerHeight: Math.floor(height)
+    };
+  }, []);
+  var getD = useCallback(function (_a) {
+    var path = _a.path,
+        containerLeft = _a.containerLeft,
+        containerTop = _a.containerTop,
+        mode = _a.mode;
+    var left = containerLeft;
+    var top = containerTop;
+    var isPolygon = mode === 'POLYGON';
+    var out = ''; //path
+
+    out += getLine(path, left, top, isPolygon); //inner path
+
+    for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
+      var inner = innerPath_1[_i];
+      out += ' ' + getLine(inner, left, top, isPolygon);
+    }
+
+    return out;
+  }, []);
+  var getLine = useCallback(function (path, offsetLeft, offsetTop, closePath) {
+    return path.map(function (offset, idx) {
+      if (idx === 0) {
+        return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+      } else if (idx === 1) {
+        return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+      } else {
+        if (offset.equals(path[idx - 1])) {
+          return '';
+        } else {
+          return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        }
+      }
+    }).join(' ') + " ".concat(closePath ? 'Z' : '');
+  }, []);
+
+  var _g = useState(0),
+      width = _g[0],
+      setWidth = _g[1];
+
+  var _h = useState(0),
+      height = _h[0],
+      setHeight = _h[1];
+
+  var _j = useState('M0 0'),
+      d = _j[0],
+      setD = _j[1];
+
+  useEffect(function () {
+    var info = getPolygonInfo(path);
+    setWidth(info.containerWidth);
+    setHeight(info.containerHeight);
+    setD(getD(__assign(__assign({}, info), {
+      path: path,
+      innerPath: innerPath,
+      mode: mode
+    })));
+  }, [path, innerPath]);
+  return React.createElement(React.Fragment, null, React.createElement("svg", __assign({
+    pointerEvents: "none",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height)
+  }, svgProperties), React.createElement("path", __assign({
+    fillRule: "evenodd",
+    pointerEvents: "visiblepainted",
+    x: "0",
+    y: "0",
+    width: width,
+    height: height,
+    fill: mode === 'POLYLINE' ? 'none' : background,
+    stroke: mode === 'POLYLINE' ? 'black' : 'green',
+    strokeLinejoin: "round",
+    strokeLinecap: "butt",
+    d: d
+  }, shapeProperties))), React.createElement("div", {
+    style: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      left: '0px',
+      top: '0px',
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    }
+  }, children));
+}
+
+function SVGRect(_a) {
+  var _b = _a.width,
+      width = _b === void 0 ? 100 : _b,
+      _c = _a.height,
+      height = _c === void 0 ? 100 : _c,
+      _d = _a.background,
+      background = _d === void 0 ? 'lightblue' : _d,
+      _e = _a.svgProperties,
+      svgProperties = _e === void 0 ? {} : _e,
+      _f = _a.shapeProperties,
+      shapeProperties = _f === void 0 ? {} : _f,
+      children = _a.children;
+  var getViewHeight = useCallback(function (width, height) {
+    return Number((100 * height / width).toFixed(0));
+  }, []);
+  var viewWidth = useRef(100);
+
+  var _g = useState(getViewHeight(width, height)),
+      viewHeight = _g[0],
+      setViewHeight = _g[1];
+
+  useEffect(function () {
+    setViewHeight(getViewHeight(width, height));
+  }, [width, height]);
+  return React.createElement(React.Fragment, null, React.createElement("svg", __assign({
+    pointerEvents: "none",
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+  }, svgProperties), React.createElement("rect", __assign({
+    pointerEvents: "visiblepainted",
+    x: "0",
+    y: "0",
+    width: viewWidth.current,
+    height: viewHeight,
+    fill: background
+  }, shapeProperties))), React.createElement("div", {
+    style: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      left: '0px',
+      top: '0px',
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    }
+  }, children));
+}
+
+var AnimationPlayer =
+/** @class */
+function () {
+  function AnimationPlayer(drawFunction, fps) {
+    this.prevtime = 0;
+    this.elapsedTime = 0;
+    this.fps = null;
+    this.baseDrawGapTime = null;
+    this.deltaTime = 0;
+    this.playing = false;
+    this.draw = drawFunction;
+    this.fps = fps || null;
+
+    if (fps !== undefined) {
+      this.baseDrawGapTime = 1000 / fps;
+    }
+
+    this.init();
+  }
+
+  AnimationPlayer.prototype.init = function () {
+    this.deltaTime = 0;
     this.prevtime = 0;
     this.elapsedTime = 0;
     this.playing = false;
@@ -2857,6 +3657,86 @@ function () {
   return AnimationPlayer;
 }();
 
+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 nextIndex(array, currIdx) {
   var next = currIdx + 1;
 
@@ -2948,7 +3828,7 @@ function useMarkerMoving(_a) {
           }
         }
 
-        nextOption_1.position = context_1.nextPos;
+        nextOption_1.position = new Position(context_1.nextPos.lat, context_1.nextPos.lng);
         marker.options.position = nextOption_1.position;
         controller.updateMarker(marker, nextOption_1);
 
@@ -3001,86 +3881,6 @@ function useMarkerMoving(_a) {
   return [start, stop, resume];
 }
 
-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);
-
 var offsetCalibration = function (mapType, divElement, options) {
   //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
   if (mapType === 'google') {
@@ -3106,8 +3906,10 @@ function MapMarkerWrapper(_a) {
       _c = _a.topOnHover,
       topOnHover = _c === void 0 ? false : _c,
       movingAnimation = _a.movingAnimation,
+      _d = _a.disablePointerEvent,
+      disablePointerEvent = _d === void 0 ? false : _d,
       children = _a.children,
-      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]); //controller
+      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
 
 
   var controller = useMintMapController(); //element
@@ -3119,9 +3921,9 @@ function MapMarkerWrapper(_a) {
 
   var markerRef = useRef(); //moving animation
 
-  var _d = useState({}),
-      movingState = _d[0],
-      setMovingState = _d[1];
+  var _e = useState({}),
+      movingState = _e[0],
+      setMovingState = _e[1];
 
   useEffect(function () {
     // console.log('movingState', movingState);
@@ -3159,120 +3961,557 @@ function MapMarkerWrapper(_a) {
 
       next && !topOnHover && topOnClick && controller.markerToTheTop(marker);
     }
-  };
+  };
+
+  var onMouseOverHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
+
+    if (marker) {
+      var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
+      var next = true;
+
+      if (mouseOverHandler) {
+        var hasNext = mouseOverHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && topOnHover && controller.markerToTheTop(marker);
+    }
+  }; //create object
+
+
+  useEffect(function () {
+    // console.log('drawable created')
+    divElement.style.display = 'flex';
+    divElement.style.justifyContent = 'flex-start';
+    divElement.style.alignItems = 'flex-start';
+    divElement.style.flexDirection = 'column';
+    divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+    divElement.addEventListener('click', onClickHandler);
+    divElement.addEventListener('mouseover', onMouseOverHandler);
+    return function () {
+      //** kakao 는 viewport 안에 있는 마커만 렌더링하므로, 
+      //마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
+      //그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
+      if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
+        divCloneRef.current.classList.add(endAnimationClassName);
+
+        var aniListener_1 = function () {
+          //console.log('animationend!!!', divCloneRef.current);
+          divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
+
+          if (markerRef.current) {
+            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
+          }
+
+          divCloneRef.current = undefined;
+        };
+
+        divCloneRef.current.addEventListener('animationend', aniListener_1);
+        divElement.append(divCloneRef.current);
+      } else {
+        divElement.removeEventListener('click', onClickHandler);
+        divElement.removeEventListener('mouseover', onMouseOverHandler);
+
+        if (markerRef.current) {
+          controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
+        }
+      }
+    };
+  }, []); //create / update object
+
+  useEffect(function () {
+    if (options) {
+      if (markerRef.current) {
+        //console.log('update Marker')
+        controller.updateMarker(markerRef.current, options); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+          divElement.parentElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+        } //marker offset 보정
+
+
+        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        }
+      } else {
+        //console.log('create Marker')
+        markerRef.current = new Marker(options);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current); //disablePointerEvent 처리
+
+        if (divElement.parentElement) {
+          divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+          divElement.parentElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
+        } //marker offset 보정
+
+
+        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        } //moving 애니메이션 시작
+
+
+        if (movingAnimation) {
+          setMovingState(__assign(__assign({}, movingAnimation), {
+            marker: markerRef.current
+          }));
+        } //start animation
+
+
+        if (startAnimationClassName) {
+          divElement.style.visibility = 'hidden';
+          setTimeout(function () {
+            var _a, _b;
+
+            divCloneRef.current = divElement.firstElementChild;
+            divElement.style.visibility = 'visible';
+            (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
+
+            var aniListener = function () {
+              var _a, _b;
+
+              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
+              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
+            };
+
+            (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
+          });
+        } else {
+          setTimeout(function () {
+            divCloneRef.current = divElement.firstElementChild;
+          });
+        }
+      }
+    }
+  }, [options]);
+  return createPortal(children, divElement);
+}
+
+var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
+  var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
+
+
+  var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
+  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
+
+  var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
+  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
+  var boundsPos = [];
+  var tempX1, tempY1, tempX2, tempY2;
+
+  for (var i = 0; i < rowCount; i++) {
+    tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
+    tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
+    var rows = [];
+    boundsPos.push(rows);
+
+    for (var k = 0; k < colCount; k++) {
+      tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
+      tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
+      var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
+      var includedList = thisBounds.getIncludedPositions(itemList);
+      rows.push({
+        bounds: thisBounds,
+        checked: false,
+        center: false,
+        centerPosition: thisBounds.getCenter(),
+        incList: [],
+        itemList: includedList,
+        size: basePixelSize
+      });
+    }
+  } //좌표마다 검사해서 인접셀 병합 처리
+
+
+  var centerList = [];
+  var totalItemCount = 0;
+  var min;
+  var max;
+
+  for (var i = 0; i < boundsPos.length; i++) {
+    for (var k = 0; k < boundsPos[i].length; k++) {
+      var curr = boundsPos[i][k];
+      if (curr.checked) continue;
+      curr.checked = true; //현재기준 8방향 객체 모으기
+
+      var incList = [];
+
+      if (boundsPos[i]) {
+        boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
+        boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
+      }
+
+      if (boundsPos[i - 1]) {
+        boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
+        boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
+        boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
+      }
+
+      if (boundsPos[i + 1]) {
+        boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
+        boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
+        boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
+      }
+
+      for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
+        var inc = incList_1[_i];
+        if (inc.checked) continue;
+        inc.checked = true;
+
+        if (inc.itemList && inc.itemList.length > 0) {
+          curr.incList.push(inc);
+
+          (_a = curr.itemList).push.apply(_a, inc.itemList);
+
+          curr.center = true;
+        }
+      }
+
+      if (curr.center) {
+        centerList.push(curr);
+        var avrLat = calculateAverage(curr.itemList.map(function (item) {
+          return item.lat;
+        }));
+        var avrLng = calculateAverage(curr.itemList.map(function (item) {
+          return item.lng;
+        }));
+        curr.centerPosition = new Position(avrLat, avrLng);
+        totalItemCount += curr.itemList.length;
+
+        if (!min || curr.itemList.length < min) {
+          min = curr.itemList.length;
+        }
+
+        if (!max || curr.itemList.length > max) {
+          max = curr.itemList.length;
+        }
+      }
+    }
+  }
+
+  var status = {
+    total: totalItemCount,
+    average: totalItemCount / centerList.length,
+    min: min,
+    max: max
+  };
+
+  sizeFunction = sizeFunction || function (info, status) {
+    var minSize = basePixelSize / 4;
+    var maxSize = basePixelSize;
+    return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
+  };
+
+  for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
+    var center = centerList_1[_b];
+    center.size = sizeFunction(center, status);
+  } // console.log('centerList', centerList, status);
+
+
+  return centerList;
+};
+
+var calculateAverage = function (nums) {
+  var sum = 0;
+
+  for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
+    var num = nums_1[_i];
+    sum += num;
+  }
+
+  return Number((sum / nums.length).toFixed(7));
+};
+
+/**
+ * CircleMarker
+ *
+ * @param {CircleMarkerProps} CircleMarkerProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
+function CircleMarker(_a) {
+  var children = _a.children,
+      center = _a.center,
+      radius = _a.radius,
+      _b = _a.radiusUnit,
+      radiusUnit = _b === void 0 ? 'PIXEL' : _b,
+      _c = _a.background,
+      background = _c === void 0 ? 'lightgreen' : _c,
+      _d = _a.svgProperties,
+      svgProperties = _d === void 0 ? {} : _d,
+      _e = _a.shapeProperties,
+      shapeProperties = _e === void 0 ? {} : _e,
+      _f = _a.visible,
+      visible = _f === void 0 ? true : _f,
+      zIndex = _a.zIndex; //controller
+
+  var controller = useMintMapController(); //zoom start event
+
+  var onZoomStart = useCallback(function () {
+    setMapVisible(false);
+  }, []); //idle event
+
+  var onIdle = useCallback(function () {
+    var newZoomLevel = controller.getZoomLevel();
+
+    if (zoomLevel.current !== newZoomLevel) {
+      zoomLevel.current = newZoomLevel;
+      renderCircleBase();
+      setTimeout(function () {
+        setMapVisible(true);
+      });
+    }
+  }, []);
+  var zoomLevel = useRef(controller.getZoomLevel());
+  useEffect(function () {
+    controller.addEventListener("ZOOMSTART", onZoomStart);
+    controller.addEventListener("IDLE", onIdle);
+    return function () {
+      controller.removeEventListener("ZOOMSTART", onZoomStart);
+      controller.removeEventListener("IDLE", onIdle);
+    };
+  }, []); //offsets
 
-  var onMouseOverHandler = function (e) {
-    var _a;
+  var _g = useState(),
+      computedRadius = _g[0],
+      setComputedRadius = _g[1];
 
-    var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
+  var _h = useState(new Offset(0, 0)),
+      anchor = _h[0],
+      setAnchor = _h[1]; //circle props ref
 
-    if (marker) {
-      var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
-      var next = true;
 
-      if (mouseOverHandler) {
-        var hasNext = mouseOverHandler(e);
-        hasNext !== undefined && (next = hasNext);
-      }
+  var circlePropsRef = useRef({
+    center: center,
+    radius: radius,
+    radiusUnit: radiusUnit
+  }); //circle 생성 effect
 
-      next && topOnHover && controller.markerToTheTop(marker);
+  useEffect(function () {
+    circlePropsRef.current = {
+      center: center,
+      radius: radius,
+      radiusUnit: radiusUnit
+    };
+    renderCircleBase();
+  }, [center, radius, radiusUnit]); //render
+
+  var _j = useState(true),
+      mapVisible = _j[0],
+      setMapVisible = _j[1];
+
+  var renderCircleBase = useCallback(function () {
+    var _a = circlePropsRef.current,
+        center = _a.center,
+        radius = _a.radius,
+        radiusUnit = _a.radiusUnit;
+
+    if (radiusUnit === 'METER') {
+      var latMargin = GeoCalulator.convertMeterToLatitudeValue(radius);
+      var targetPos = new Position(center.lat + latMargin, center.lng);
+      var tempComputedRadius = calcRadius(center, targetPos);
+      setComputedRadius(tempComputedRadius);
+      setAnchor(new Offset(tempComputedRadius, tempComputedRadius)); // console.log(`${radius} meter => `, tempComputedRadius);
+    } else {
+      setComputedRadius(radius);
+      setAnchor(new Offset(radius, radius)); // console.log(`${radius} pixel => `, radius);
     }
-  }; //create object
+  }, []);
+  var calcRadius = useCallback(function (center, targetPos) {
+    var c = controller.positionToOffset(center);
+    var t = controller.positionToOffset(targetPos);
+    return Math.round(Math.sqrt(Math.pow(Math.abs(c.x - t.x), 2) + Math.pow(Math.abs(c.y - t.y), 2)));
+  }, []);
+  return React.createElement(React.Fragment, null, computedRadius && React.createElement(MapMarkerWrapper, {
+    position: center,
+    anchor: anchor,
+    visible: visible,
+    disablePointerEvent: true,
+    zIndex: zIndex
+  }, mapVisible && React.createElement(SVGCircle, {
+    radius: computedRadius,
+    background: background,
+    shapeProperties: __assign({
+      pointerEvents: 'none'
+    }, shapeProperties),
+    svgProperties: svgProperties
+  }, children)));
+}
 
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
+ */
 
+function PolygonMarker(_a) {
+  var children = _a.children,
+      position = _a.position,
+      _b = _a.background,
+      background = _b === void 0 ? 'lightgreen' : _b,
+      innerPositions = _a.innerPositions,
+      _c = _a.simplifyPath,
+      simplifyPath = _c === void 0 ? true : _c,
+      simplifyTolerance = _a.simplifyTolerance,
+      _d = _a.lastReapeated,
+      lastReapeated = _d === void 0 ? false : _d,
+      _e = _a.svgProperties,
+      svgProperties = _e === void 0 ? {} : _e,
+      _f = _a.shapeProperties,
+      shapeProperties = _f === void 0 ? {} : _f,
+      _g = _a.visible,
+      visible = _g === void 0 ? true : _g,
+      zIndex = _a.zIndex,
+      _h = _a.mode,
+      mode = _h === void 0 ? 'POLYGON' : _h; //controller
+
+  var controller = useMintMapController(); //zoom start event
+
+  var onZoomStart = useCallback(function () {
+    setMapVisible(false);
+  }, []); //idle event
+
+  var onIdle = useCallback(function () {
+    var newZoomLevel = controller.getZoomLevel();
+
+    if (zoomLevel.current !== newZoomLevel) {
+      zoomLevel.current = newZoomLevel;
+      renderPolygonBase();
+      setTimeout(function () {
+        setMapVisible(true);
+      });
+    }
+  }, []);
+  var zoomLevel = useRef(controller.getZoomLevel());
   useEffect(function () {
-    // console.log('drawable created')
-    divElement.addEventListener('click', onClickHandler);
-    divElement.addEventListener('mouseover', onMouseOverHandler);
+    controller.addEventListener("ZOOMSTART", onZoomStart);
+    controller.addEventListener("IDLE", onIdle);
     return function () {
-      //** kakao 는 viewport 안에 있는 마커만 렌더링하므로, 
-      //마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
-      //그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
-      if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
-        divCloneRef.current.classList.add(endAnimationClassName);
-
-        var aniListener_1 = function () {
-          //console.log('animationend!!!', divCloneRef.current);
-          divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
+      controller.removeEventListener("ZOOMSTART", onZoomStart);
+      controller.removeEventListener("IDLE", onIdle);
+    };
+  }, []); //center
 
-          if (markerRef.current) {
-            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-          }
+  var _j = useState(),
+      polygonStart = _j[0],
+      setPolygonStart = _j[1]; //offsets
 
-          divCloneRef.current = undefined;
-        };
 
-        divCloneRef.current.addEventListener('animationend', aniListener_1);
-        divElement.append(divCloneRef.current);
-      } else {
-        divElement.removeEventListener('click', onClickHandler);
-        divElement.removeEventListener('mouseover', onMouseOverHandler);
+  var _k = useState([]),
+      offsets = _k[0],
+      setOffsets = _k[1]; //inner offsets
 
-        if (markerRef.current) {
-          controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-        }
-      }
-    };
-  }, []); //create / update object
 
-  useEffect(function () {
-    if (options) {
-      if (markerRef.current) {
-        //console.log('update Marker')
-        controller.updateMarker(markerRef.current, options); //marker offset 보정
+  var _l = useState([]),
+      innerOffsets = _l[0],
+      setInnerOffsets = _l[1]; //offset cache
 
-        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
 
-        if (options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        }
-      } else {
-        //console.log('create Marker')
-        markerRef.current = new Marker(options);
-        markerRef.current.element = divElement;
-        controller.createMarker(markerRef.current); //marker offset 보정
+  var offsetCache = useRef(new Map()); //polygon props ref
 
-        offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+  var polygonPropsRef = useRef({
+    position: position,
+    innerPositions: innerPositions,
+    simplifyPath: simplifyPath,
+    simplifyTolerance: simplifyTolerance,
+    lastReapeated: lastReapeated
+  }); //polygon 생성 effect
 
-        if (options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        } //moving 애니메이션 시작
+  useEffect(function () {
+    // console.log('polygon changed');
+    offsetCache.current.clear();
+    polygonPropsRef.current = {
+      position: position,
+      innerPositions: innerPositions,
+      simplifyPath: simplifyPath,
+      simplifyTolerance: simplifyTolerance,
+      lastReapeated: lastReapeated
+    };
+    renderPolygonBase();
+  }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
 
+  var _m = useState(true),
+      mapVisible = _m[0],
+      setMapVisible = _m[1];
 
-        if (movingAnimation) {
-          setMovingState(__assign(__assign({}, movingAnimation), {
-            marker: markerRef.current
-          }));
-        } //start animation
+  var renderPolygonBase = useCallback(function () {
+    // console.log('renderPolygonBase');
+    var _a = polygonPropsRef.current,
+        position = _a.position,
+        innerPositions = _a.innerPositions,
+        simplifyPath = _a.simplifyPath,
+        simplifyTolerance = _a.simplifyTolerance,
+        lastReapeated = _a.lastReapeated;
+    var prevCache = offsetCache.current.get(zoomLevel.current);
+
+    if (prevCache) {
+      var offsets_1 = [];
+      offsets_1.push.apply(offsets_1, prevCache.offsets);
+      setOffsets(offsets_1);
+      var innerOffsets_1 = [];
+      innerOffsets_1.push.apply(innerOffsets_1, prevCache.innerOffsets);
+      setInnerOffsets(innerOffsets_1);
+      setPolygonStart(prevCache.start);
+    } else {
+      // path
+      var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(position, simplifyTolerance, lastReapeated) : position;
+      var offsets_2 = simplified.map(function (pos) {
+        var off = controller.positionToOffset(pos);
+        return new Offset(Math.floor(off.x), Math.floor(off.y));
+      });
+      setOffsets(offsets_2); //inner path
 
+      var innerPath = [];
 
-        if (startAnimationClassName) {
-          divElement.style.visibility = 'hidden';
-          setTimeout(function () {
-            var _a, _b;
+      if (innerPositions) {
+        for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
+          var innerPosition = innerPositions_1[_i];
+          var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(innerPosition, simplifyTolerance, lastReapeated) : innerPosition;
+          var offsets_3 = simplified_1.map(function (pos) {
+            var off = controller.positionToOffset(pos);
+            return new Offset(Math.floor(off.x), Math.floor(off.y));
+          });
+          innerPath.push(offsets_3);
+        }
 
-            divCloneRef.current = divElement.firstElementChild;
-            divElement.style.visibility = 'visible';
-            (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
+        setInnerOffsets(innerPath);
+      } //start point
 
-            var aniListener = function () {
-              var _a, _b;
 
-              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
-              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
-            };
+      var regionInfo = PolygonCalculator.getRegionInfo(simplified);
+      var startPosition = regionInfo.maxLat && regionInfo.minLng ? new Position(regionInfo.maxLat, regionInfo.minLng) : undefined;
+      setPolygonStart(startPosition); //cache set
 
-            (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
-          });
-        } else {
-          setTimeout(function () {
-            divCloneRef.current = divElement.firstElementChild;
-          });
-        }
-      }
+      offsetCache.current.set(zoomLevel.current, {
+        start: startPosition,
+        offsets: offsets_2,
+        innerOffsets: innerPath
+      });
     }
-  }, [options]);
-  return createPortal(children, divElement);
+  }, []);
+  return React.createElement(React.Fragment, null, polygonStart && React.createElement(MapMarkerWrapper, {
+    position: polygonStart,
+    visible: visible,
+    disablePointerEvent: true,
+    zIndex: zIndex
+  }, mapVisible && React.createElement(SVGPolygon, {
+    path: offsets,
+    innerPath: innerOffsets,
+    mode: mode,
+    background: background,
+    shapeProperties: shapeProperties,
+    svgProperties: svgProperties
+  }, children)));
 }
 
 /**
@@ -3720,141 +4959,6 @@ function LoadingImage(_a) {
   }))));
 }
 
-var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
-  var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
-
-
-  var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
-  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
-
-  var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
-  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
-  var boundsPos = [];
-  var tempX1, tempY1, tempX2, tempY2;
-
-  for (var i = 0; i < rowCount; i++) {
-    tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
-    tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
-    var rows = [];
-    boundsPos.push(rows);
-
-    for (var k = 0; k < colCount; k++) {
-      tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
-      tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
-      var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
-      var includedList = thisBounds.getIncludedPositions(itemList);
-      rows.push({
-        bounds: thisBounds,
-        checked: false,
-        center: false,
-        centerPosition: thisBounds.getCenter(),
-        incList: [],
-        itemList: includedList,
-        size: basePixelSize
-      });
-    }
-  } //좌표마다 검사해서 인접셀 병합 처리
-
-
-  var centerList = [];
-  var totalItemCount = 0;
-  var min;
-  var max;
-
-  for (var i = 0; i < boundsPos.length; i++) {
-    for (var k = 0; k < boundsPos[i].length; k++) {
-      var curr = boundsPos[i][k];
-      if (curr.checked) continue;
-      curr.checked = true; //현재기준 8방향 객체 모으기
-
-      var incList = [];
-
-      if (boundsPos[i]) {
-        boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
-        boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
-      }
-
-      if (boundsPos[i - 1]) {
-        boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
-        boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
-        boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
-      }
-
-      if (boundsPos[i + 1]) {
-        boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
-        boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
-        boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
-      }
-
-      for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
-        var inc = incList_1[_i];
-        if (inc.checked) continue;
-        inc.checked = true;
-
-        if (inc.itemList && inc.itemList.length > 0) {
-          curr.incList.push(inc);
-
-          (_a = curr.itemList).push.apply(_a, inc.itemList);
-
-          curr.center = true;
-        }
-      }
-
-      if (curr.center) {
-        centerList.push(curr);
-        var avrLat = calculateAverage(curr.itemList.map(function (item) {
-          return item.lat;
-        }));
-        var avrLng = calculateAverage(curr.itemList.map(function (item) {
-          return item.lng;
-        }));
-        curr.centerPosition = new Position(avrLat, avrLng);
-        totalItemCount += curr.itemList.length;
-
-        if (!min || curr.itemList.length < min) {
-          min = curr.itemList.length;
-        }
-
-        if (!max || curr.itemList.length > max) {
-          max = curr.itemList.length;
-        }
-      }
-    }
-  }
-
-  var status = {
-    total: totalItemCount,
-    average: totalItemCount / centerList.length,
-    min: min,
-    max: max
-  };
-
-  sizeFunction = sizeFunction || function (info, status) {
-    var minSize = basePixelSize / 4;
-    var maxSize = basePixelSize;
-    return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
-  };
-
-  for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
-    var center = centerList_1[_b];
-    center.size = sizeFunction(center, status);
-  } // console.log('centerList', centerList, status);
-
-
-  return centerList;
-};
-
-var calculateAverage = function (nums) {
-  var sum = 0;
-
-  for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
-    var num = nums_1[_i];
-    sum += num;
-  }
-
-  return Number((sum / nums.length).toFixed(7));
-};
-
 var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  position: absolute;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
 var styles = {"mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
 styleInject(css_248z);
@@ -4314,4 +5418,4 @@ function MapCanvasMarkerWrapper(_props) {
   return React.createElement(React.Fragment, null);
 }
 
-export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, 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, getClusterInfo, useMarkerMoving, useMintMapController, waiting };