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

package/dist/index.umd.js

@@ -43,7 +43,7 @@
   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++) {
@@ -64,11 +64,43 @@
         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!!!');
@@ -179,6 +211,90 @@
       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;
   }();
 
@@ -192,7 +308,7 @@
       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;
     };
@@ -205,6 +321,53 @@
       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,
@@ -266,10 +429,14 @@
       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;
   }();
@@ -413,6 +580,10 @@
       this.y = y;
     }
 
+    Offset.prototype.equals = function (other) {
+      return other && this.x === other.x && this.y === other.y;
+    };
+
     return Offset;
   }();
 
@@ -916,6 +1087,57 @@
     });
   }
 
+  // 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) {
@@ -927,12 +1149,18 @@
       _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`);
     }
 
@@ -1482,6 +1710,7 @@
       var _a;
 
       try {
+        this.removeAllEventListener();
         this.map && this.map.destroy();
         (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
       } catch (e) {
@@ -1529,6 +1758,98 @@
       (_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);
 
@@ -1545,13 +1866,18 @@
       _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);
@@ -1559,6 +1885,12 @@
 
       };
 
+      _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`);
     }
 
@@ -1998,6 +2330,20 @@
                       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;
@@ -2066,6 +2412,114 @@
       (_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);
 
@@ -2080,12 +2534,20 @@
       _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`);
     }
 
@@ -2659,6 +3121,114 @@
       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);
 
@@ -2787,28 +3357,258 @@
     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 = React.useState(radius * 2),
+        boxSize = _f[0],
+        setBoxSize = _f[1];
+
+    React.useEffect(function () {
+      // console.log('SVGCircle radius', radius);
+      setBoxSize(radius * 2);
+    }, [radius]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+      pointerEvents: "none",
+      width: boxSize,
+      height: boxSize,
+      viewBox: "0 0 100 100"
+    }, svgProperties), React__default["default"].createElement("circle", tslib.__assign({
+      pointerEvents: "visiblepainted",
+      cx: '50',
+      cy: '50',
+      r: '50',
+      fill: background
+    }, shapeProperties))), React__default["default"].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 = React.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 = React.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 = React.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 = React.useState(0),
+        width = _g[0],
+        setWidth = _g[1];
+
+    var _h = React.useState(0),
+        height = _h[0],
+        setHeight = _h[1];
+
+    var _j = React.useState('M0 0'),
+        d = _j[0],
+        setD = _j[1];
+
+    React.useEffect(function () {
+      var info = getPolygonInfo(path);
+      setWidth(info.containerWidth);
+      setHeight(info.containerHeight);
+      setD(getD(tslib.__assign(tslib.__assign({}, info), {
+        path: path,
+        innerPath: innerPath,
+        mode: mode
+      })));
+    }, [path, innerPath]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+      pointerEvents: "none",
+      width: width,
+      height: height,
+      viewBox: "0 0 ".concat(width, " ").concat(height)
+    }, svgProperties), React__default["default"].createElement("path", tslib.__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__default["default"].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 = React.useCallback(function (width, height) {
+      return Number((100 * height / width).toFixed(0));
+    }, []);
+    var viewWidth = React.useRef(100);
+
+    var _g = React.useState(getViewHeight(width, height)),
+        viewHeight = _g[0],
+        setViewHeight = _g[1];
+
+    React.useEffect(function () {
+      setViewHeight(getViewHeight(width, height));
+    }, [width, height]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
+      pointerEvents: "none",
+      width: width,
+      height: height,
+      viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+    }, svgProperties), React__default["default"].createElement("rect", tslib.__assign({
+      pointerEvents: "visiblepainted",
+      x: "0",
+      y: "0",
+      width: viewWidth.current,
+      height: viewHeight,
+      fill: background
+    }, shapeProperties))), React__default["default"].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;
@@ -2861,6 +3661,86 @@
     return AnimationPlayer;
   }();
 
+  var Drawable =
+  /** @class */
+  function () {
+    function Drawable() {}
+
+    return Drawable;
+  }();
+
+  var Marker =
+  /** @class */
+  function (_super) {
+    tslib.__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) {
+    tslib.__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) {
+    tslib.__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;
 
@@ -2952,7 +3832,7 @@
             }
           }
 
-          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);
 
@@ -3005,86 +3885,6 @@
     return [start, stop, resume];
   }
 
-  var Drawable =
-  /** @class */
-  function () {
-    function Drawable() {}
-
-    return Drawable;
-  }();
-
-  var Marker =
-  /** @class */
-  function (_super) {
-    tslib.__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) {
-    tslib.__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) {
-    tslib.__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') {
@@ -3110,8 +3910,10 @@
         _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 = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]); //controller
+        options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
 
 
     var controller = useMintMapController(); //element
@@ -3123,9 +3925,9 @@
 
     var markerRef = React.useRef(); //moving animation
 
-    var _d = React.useState({}),
-        movingState = _d[0],
-        setMovingState = _d[1];
+    var _e = React.useState({}),
+        movingState = _e[0],
+        setMovingState = _e[1];
 
     React.useEffect(function () {
       // console.log('movingState', movingState);
@@ -3163,120 +3965,557 @@
 
         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
+
+
+    React.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
+
+    React.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(tslib.__assign(tslib.__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 reactDom.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 = React.useCallback(function () {
+      setMapVisible(false);
+    }, []); //idle event
+
+    var onIdle = React.useCallback(function () {
+      var newZoomLevel = controller.getZoomLevel();
+
+      if (zoomLevel.current !== newZoomLevel) {
+        zoomLevel.current = newZoomLevel;
+        renderCircleBase();
+        setTimeout(function () {
+          setMapVisible(true);
+        });
+      }
+    }, []);
+    var zoomLevel = React.useRef(controller.getZoomLevel());
+    React.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 = React.useState(),
+        computedRadius = _g[0],
+        setComputedRadius = _g[1];
 
-      var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
+    var _h = React.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 = React.useRef({
+      center: center,
+      radius: radius,
+      radiusUnit: radiusUnit
+    }); //circle 생성 effect
 
-        next && topOnHover && controller.markerToTheTop(marker);
+    React.useEffect(function () {
+      circlePropsRef.current = {
+        center: center,
+        radius: radius,
+        radiusUnit: radiusUnit
+      };
+      renderCircleBase();
+    }, [center, radius, radiusUnit]); //render
+
+    var _j = React.useState(true),
+        mapVisible = _j[0],
+        setMapVisible = _j[1];
+
+    var renderCircleBase = React.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 = React.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__default["default"].createElement(React__default["default"].Fragment, null, computedRadius && React__default["default"].createElement(MapMarkerWrapper, {
+      position: center,
+      anchor: anchor,
+      visible: visible,
+      disablePointerEvent: true,
+      zIndex: zIndex
+    }, mapVisible && React__default["default"].createElement(SVGCircle, {
+      radius: computedRadius,
+      background: background,
+      shapeProperties: tslib.__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 = React.useCallback(function () {
+      setMapVisible(false);
+    }, []); //idle event
+
+    var onIdle = React.useCallback(function () {
+      var newZoomLevel = controller.getZoomLevel();
+
+      if (zoomLevel.current !== newZoomLevel) {
+        zoomLevel.current = newZoomLevel;
+        renderPolygonBase();
+        setTimeout(function () {
+          setMapVisible(true);
+        });
+      }
+    }, []);
+    var zoomLevel = React.useRef(controller.getZoomLevel());
     React.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 = React.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 = React.useState([]),
+        offsets = _k[0],
+        setOffsets = _k[1]; //inner offsets
 
-          if (markerRef.current) {
-            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-          }
-        }
-      };
-    }, []); //create / update object
 
-    React.useEffect(function () {
-      if (options) {
-        if (markerRef.current) {
-          //console.log('update Marker')
-          controller.updateMarker(markerRef.current, options); //marker offset 보정
+    var _l = React.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 = React.useRef(new Map()); //polygon props ref
 
-          offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
+    var polygonPropsRef = React.useRef({
+      position: position,
+      innerPositions: innerPositions,
+      simplifyPath: simplifyPath,
+      simplifyTolerance: simplifyTolerance,
+      lastReapeated: lastReapeated
+    }); //polygon 생성 effect
 
-          if (options.zIndex !== undefined) {
-            controller.setMarkerZIndex(markerRef.current, options.zIndex);
-          } //moving 애니메이션 시작
+    React.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 = React.useState(true),
+        mapVisible = _m[0],
+        setMapVisible = _m[1];
 
-          if (movingAnimation) {
-            setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
-              marker: markerRef.current
-            }));
-          } //start animation
+    var renderPolygonBase = React.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 reactDom.createPortal(children, divElement);
+    }, []);
+    return React__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper, {
+      position: polygonStart,
+      visible: visible,
+      disablePointerEvent: true,
+      zIndex: zIndex
+    }, mapVisible && React__default["default"].createElement(SVGPolygon, {
+      path: offsets,
+      innerPath: innerOffsets,
+      mode: mode,
+      background: background,
+      shapeProperties: shapeProperties,
+      svgProperties: svgProperties
+    }, children)));
   }
 
   /**
@@ -3724,141 +4963,6 @@
     }))));
   }
 
-  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__default["default"](css_248z);
@@ -4320,6 +5424,7 @@
 
   exports.AnimationPlayer = AnimationPlayer;
   exports.Bounds = Bounds;
+  exports.CircleMarker = CircleMarker;
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;
   exports.GoogleMintMapController = GoogleMintMapController;
@@ -4327,10 +5432,12 @@
   exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
   exports.MapCanvasWrapper = MapCanvasWrapper;
   exports.MapControlWrapper = MapControlWrapper;
+  exports.MapEvent = MapEvent;
   exports.MapLoadingWithImage = MapLoadingWithImage;
   exports.MapMarkerWrapper = MapMarkerWrapper;
   exports.MapPolygonWrapper = MapPolygonWrapper;
   exports.MapPolylineWrapper = MapPolylineWrapper;
+  exports.MapUIEvent = MapUIEvent;
   exports.Marker = Marker;
   exports.MintMap = MintMap;
   exports.MintMapCanvasRenderer = MintMapCanvasRenderer;
@@ -4342,8 +5449,12 @@
   exports.PointLoading = PointLoading;
   exports.Polygon = Polygon;
   exports.PolygonCalculator = PolygonCalculator;
+  exports.PolygonMarker = PolygonMarker;
   exports.Polyline = Polyline;
   exports.Position = Position;
+  exports.SVGCircle = SVGCircle;
+  exports.SVGPolygon = SVGPolygon;
+  exports.SVGRect = SVGRect;
   exports.getClusterInfo = getClusterInfo;
   exports.useMarkerMoving = useMarkerMoving;
   exports.useMintMapController = useMintMapController;