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

package/dist/components/mint-map/core/advanced/shapes/base/SVGRect.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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));
+}
+
+exports.SVGRect = SVGRect;

package/dist/components/mint-map/core/advanced/shapes/base/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SVGCircle';
+export * from './SVGPolygon';
+export * from './SVGRect';

package/dist/components/mint-map/core/advanced/shapes/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base';
+export * from './CircleMarker';
+export * from './PolygonMarker';

package/dist/components/mint-map/core/hooks/MarkerMovingHook.js

@@ -6,6 +6,9 @@ var React = require('react');
 var MintMapProvider = require('../provider/MintMapProvider.js');
 var animation = require('../util/animation.js');
 var calculate = require('../util/calculate.js');
+require('../../types/MapDrawables.js');
+var MapTypes = require('../../types/MapTypes.js');
+require('../../types/MapEventTypes.js');
 
 function nextIndex(array, currIdx) {
   var next = currIdx + 1;
@@ -98,7 +101,7 @@ function useMarkerMoving(_a) {
           }
         }
 
-        nextOption_1.position = context_1.nextPos;
+        nextOption_1.position = new MapTypes.Position(context_1.nextPos.lat, context_1.nextPos.lng);
         marker.options.position = nextOption_1.position;
         controller.updateMarker(marker, nextOption_1);
 

package/dist/components/mint-map/core/util/calculate.d.ts

@@ -4,6 +4,16 @@ declare class PositionMirror {
     constructor(lat: number, lng: number);
 }
 export declare class PolygonCalculator {
+    static getRegionInfo(positions: PositionMirror[]): {
+        maxLat: number | undefined;
+        minLat: number | undefined;
+        maxLng: number | undefined;
+        minLng: number | undefined;
+        centerLat: number | undefined;
+        centerLng: number | undefined;
+    };
+    static getRegionStart(positions: PositionMirror[]): PositionMirror;
+    static getRegionEnd(positions: PositionMirror[]): PositionMirror;
     static getCenter(positions: PositionMirror[]): PositionMirror;
     static intersects(positions1: PositionMirror[], positions2: PositionMirror[]): boolean;
     static getIncludedPositions(polygon: PositionMirror[], position: PositionMirror | PositionMirror[]): PositionMirror[];
@@ -13,6 +23,13 @@ export declare class PolygonCalculator {
     private static toFixedPosition;
     private static getCrossPointAll;
     private static findCrossPoint;
+    static readonly TOLERANCE_NAVER_STYLE = 0.0001;
+    static readonly TOLERANCE_GOOGLE_STYLE = 0.00001;
+    static simplifyPoints(polygon: PositionMirror[], tolerance?: number, lastRepeated?: boolean): PositionMirror[];
+    private static simplify;
+    private static perpendicularDistance;
+    static calculatePolygonSize(polygon: PositionMirror[], innerPolygons?: PositionMirror[][]): number;
+    private static calculatePolygonSizeMain;
 }
 export interface NextPositionContext {
     pos1: PositionMirror;
@@ -28,11 +45,21 @@ export interface NextPositionContext {
     nextPos: PositionMirror;
 }
 export declare class GeoCalulator {
-    private static readonly EARTH_RADIUS;
+    private static readonly EARTH_EQUATORIAL_RADIUS;
+    private static readonly EARTH_EQUATORIAL_RADIUS_KM;
+    private static readonly EARTH_ECCENTRICITY;
+    private static readonly METER_VALUE_PER_LATITUDE;
     private static readonly LATITUDE_POSITION_VALUE_PER_METER;
     static computeDistanceKiloMeter(pos1: PositionMirror, pos2: PositionMirror): number;
     private static deg2rad;
     static convertMeterToLatitudeValue(meter: number): number;
+    static convertLatitudeToMeterValue(lat: number): number;
+    static convertLongitudeToMeterValue(lat: number, lng: number): number;
+    private static readonly CACHE_OF_LNG_PER_METER;
+    private static getCacheUnitOfLongitudeValueWithLatitudeInMeter;
+    private static getCacheOfLongitudeValueWithLatitudeInMeter;
+    private static setCacheOfLongitudeValueWithLatitudeInMeter;
+    static calculateLongitudeValueWithLatitudeInMeter(lat: number): number;
     private static readonly MS_FROM_HOUR;
     static computeNextPositionAndDistances(context: NextPositionContext): NextPositionContext;
 }

package/dist/components/mint-map/core/util/calculate.js

@@ -31,7 +31,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++) {
@@ -52,11 +52,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!!!');
@@ -167,6 +199,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;
 }();
 
@@ -180,7 +296,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;
   };
@@ -193,6 +309,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,
@@ -254,10 +417,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;
 }();

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts

@@ -20,6 +20,7 @@ export interface MapMarkerWrapperProps extends MarkerOptions {
     startAnimationClassName?: string;
     endAnimationClassName?: string;
     movingAnimation?: MapMarkerMoving;
+    disablePointerEvent?: boolean;
 }
 /**
  * Mint Map 컴포넌트
@@ -28,4 +29,4 @@ export interface MapMarkerWrapperProps extends MarkerOptions {
  *
  * @returns {JSX.Element} JSX
  */
-export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
+export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, disablePointerEvent, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -34,8 +34,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 = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]); //controller
+      options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
 
 
   var controller = MintMapProvider.useMintMapController(); //element
@@ -47,9 +49,9 @@ function MapMarkerWrapper(_a) {
 
   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);
@@ -110,6 +112,11 @@ function MapMarkerWrapper(_a) {
 
   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 () {
@@ -147,7 +154,13 @@ function MapMarkerWrapper(_a) {
     if (options) {
       if (markerRef.current) {
         //console.log('update Marker')
-        controller.updateMarker(markerRef.current, options); //marker offset 보정
+        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 처리
 
@@ -158,7 +171,13 @@ function MapMarkerWrapper(_a) {
         //console.log('create Marker')
         markerRef.current = new MapDrawables.Marker(options);
         markerRef.current.element = divElement;
-        controller.createMarker(markerRef.current); //marker offset 보정
+        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 처리
 

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -2,6 +2,7 @@
 import { MintMapController } from "../core/MintMapController";
 import { MapType, MapVendorType } from "../types/CommonTypes";
 import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, PolylineOptions } from "../types/MapDrawables";
+import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
 import { Bounds, Position } from "../types/MapTypes";
 import { MintMapProps } from "../types/MintMapProps";
 export declare class GoogleMintMapController extends MintMapController {
@@ -9,6 +10,8 @@ export declare class GoogleMintMapController extends MintMapController {
     map: google.maps.Map | null;
     scriptUrl: string;
     scriptModules: string[];
+    protected mapEvent: MapEvent;
+    protected mapUIEvent: MapUIEvent;
     constructor(props: MintMapProps);
     polylineEvents: string[];
     createPolyline(polyline: Polyline): void;
@@ -30,6 +33,7 @@ export declare class GoogleMintMapController extends MintMapController {
     setMapDragged(value: boolean): void;
     private checkLoaded;
     loadMapApi(): Promise<boolean>;
+    lastMousePosition: Position | null;
     initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
     destroyMap: () => void;
     private fromGoogleBounds;
@@ -39,4 +43,9 @@ export declare class GoogleMintMapController extends MintMapController {
     setZoomLevel(zoom: number): void;
     getCenter(): Position;
     setCenter(position: Position): void;
+    private eventMap;
+    addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeAllEventListener(eventName?: MapEventName | undefined): void;
+    private clearEventListener;
 }

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var MintMapController = require('../core/MintMapController.js');
 var waiting = require('../core/util/waiting.js');
+var MapEventTypes = require('../types/MapEventTypes.js');
 var MapTypes = require('../types/MapTypes.js');
 
 var GoogleMintMapController =
@@ -20,13 +21,18 @@ function (_super) {
     _this.scriptUrl = 'https://maps.googleapis.com/maps/api/js';
     _this.scriptModules = ['marker']; //'drawing' , 'geometry' , 'journeySharing' , 'localContext' , 'places' , 'visualization']
 
+    _this.mapEvent = new MapEventTypes.MapEvent();
+    _this.mapUIEvent = new MapEventTypes.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);
@@ -34,6 +40,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`);
   }
 
@@ -473,6 +485,20 @@ function (_super) {
                     pos.offset = new MapTypes.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 MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new MapTypes.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 MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new MapTypes.Offset(e.pixel.x, e.pixel.y);
+                    _this.lastMousePosition = pos;
                   });
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
@@ -541,6 +567,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 MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+          position.offset = new MapTypes.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.MintMapController);
 

package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts

@@ -5,11 +5,14 @@ import { MapType, MapVendorType } from "../types/CommonTypes";
 import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, PolylineOptions } from "../types/MapDrawables";
 import { Bounds, Position } from "../types/MapTypes";
 import { MintMapProps } from "../types/MintMapProps";
+import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
 export declare class KakaoMintMapController extends MintMapController {
     type: MapType;
     map: kakao.maps.Map | null;
     scriptUrl: string;
     scriptModules: string[];
+    protected mapEvent: MapEvent;
+    protected mapUIEvent: MapUIEvent;
     markerPool?: ObjectPool<kakao.maps.CustomOverlay>;
     constructor(props: MintMapProps);
     private initMarkerPool;
@@ -45,4 +48,9 @@ export declare class KakaoMintMapController extends MintMapController {
     setCenter(position: Position): void;
     private positionToLatLng;
     private latLngToPosition;
+    private eventMap;
+    addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeAllEventListener(eventName?: MapEventName | undefined): void;
+    private clearEventListener;
 }