@mint-ui/map 0.5.2-beta → 0.5.4-beta

package/dist/index.es.js

@@ -10,6 +10,160 @@ var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n  display: f
 var styles$2 = {"loading-point-container":"MintMap-module_loading-point-container__znk6l","ani-blink":"MintMap-module_ani-blink__K89JK","blink":"MintMap-module_blink__mqfeV","ani-fade-in":"MintMap-module_ani-fade-in__lpHuy","fade-in":"MintMap-module_fade-in__jHpv1","ani-fade-out":"MintMap-module_ani-fade-out__5-esw","fade-out":"MintMap-module_fade-out__CIjGe","ani-expansion":"MintMap-module_ani-expansion__S2vOZ","expansion":"MintMap-module_expansion__WMo5-"};
 styleInject(css_248z$2);
 
+var PositionMirror$1 =
+/** @class */
+function () {
+  function PositionMirror(lat, lng) {
+    this.lat = lat;
+    this.lng = lng;
+  }
+
+  return PositionMirror;
+}();
+
+var GeoCalulator =
+/** @class */
+function () {
+  function GeoCalulator() {}
+
+  GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
+    var dLat = this.deg2rad(pos2.lat - pos1.lat);
+    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_EQUATORIAL_RADIUS_KM * c; // Distance in km
+
+    return d;
+  };
+
+  GeoCalulator.deg2rad = function (deg) {
+    return deg * (Math.PI / 180);
+  };
+
+  GeoCalulator.convertMeterToLatitudeValue = function (meter) {
+    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,
+        prevPos2 = context.prevPos2,
+        velocityKmh = context.velocityKmh,
+        prevVelocityKmh = context.prevVelocityKmh,
+        elapsedTimeMs = context.elapsedTimeMs; // console.log('velocityKmh / elapsedTimeMs',velocityKmh , elapsedTimeMs);
+    //총 가야할 거리 (km)
+
+    if (pos2 !== prevPos2) {
+      //목표가 바뀌면 거리 및 비율 재계산
+      context.totalDistance = this.computeDistanceKiloMeter(pos1, pos2);
+      context.currDistance = 0;
+      context.prevPos2 = pos2;
+    }
+
+    var totalDistance = context.totalDistance; // console.log('totalDistance', totalDistance);
+    //ms 속으로 환산
+
+    if (velocityKmh !== prevVelocityKmh) {
+      //속도가 바뀌면 재계산
+      context.vPerMs = velocityKmh / this.MS_FROM_HOUR;
+      context.prevVelocityKmh = velocityKmh;
+    }
+
+    var vPerMs = context.vPerMs; //console.log('vPerMs', vPerMs);
+    //실제 가는 거리 계산
+
+    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs; //console.log('nextDistance', nextDistance);
+    //목표점까지 이동 후에도 남는 거리
+
+    context.currDistance = nextDistance;
+
+    if (totalDistance < context.currDistance) {
+      //이동 거리가 현재 목표점을 넘어가는 경우
+      context.distanceRemain = context.currDistance - totalDistance;
+      context.nextPos = pos2;
+      return context;
+    } else {
+      context.distanceRemain = 0;
+    } //각 축으로 나가야할 비율
+
+
+    var ratio = nextDistance / totalDistance; //console.log('ratio', ratio);
+    //방향값 체크
+
+    var latCalib = pos2.lat > pos1.lat ? 1 : -1;
+    var lngCalib = pos2.lng > pos1.lng ? 1 : -1; //각 축에 보정된 새로운 지점 리턴
+
+    var newPos = new PositionMirror$1(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
+
+    if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
+      newPos = pos2;
+    } // console.log('newPos', newPos);
+    //console.log('==============================================================\n');
+
+
+    context.nextPos = newPos;
+    return context;
+  };
+
+  GeoCalulator.EARTH_EQUATORIAL_RADIUS = 6378137; //meter (6,378,137 m)
+
+  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;
+}();
+
 var LinePoints =
 /** @class */
 function () {
@@ -209,11 +363,7 @@ function () {
 
   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]);
-    });
+    return this.simplify(target, tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
   };
 
   PolygonCalculator.simplify = function (points, tolerance) {
@@ -247,12 +397,12 @@ function () {
 
 
   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 x = point.x;
+    var y = point.y;
+    var x1 = lineStart.x;
+    var y1 = lineStart.y;
+    var x2 = lineEnd.x;
+    var y2 = lineEnd.y;
     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;
@@ -289,171 +439,28 @@ function () {
     return area;
   };
 
-  PolygonCalculator.TOLERANCE_NAVER_STYLE = 0.0001;
-  PolygonCalculator.TOLERANCE_GOOGLE_STYLE = 0.00001;
+  PolygonCalculator.TOLERANCE_NAVER_STYLE = 1;
+  PolygonCalculator.TOLERANCE_GOOGLE_STYLE = 1;
   return PolygonCalculator;
 }();
 
-var GeoCalulator =
-/** @class */
-function () {
-  function GeoCalulator() {}
-
-  GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
-    var dLat = this.deg2rad(pos2.lat - pos1.lat);
-    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_EQUATORIAL_RADIUS_KM * c; // Distance in km
-
-    return d;
-  };
-
-  GeoCalulator.deg2rad = function (deg) {
-    return deg * (Math.PI / 180);
-  };
-
-  GeoCalulator.convertMeterToLatitudeValue = function (meter) {
-    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,
-        prevPos2 = context.prevPos2,
-        velocityKmh = context.velocityKmh,
-        prevVelocityKmh = context.prevVelocityKmh,
-        elapsedTimeMs = context.elapsedTimeMs; // console.log('velocityKmh / elapsedTimeMs',velocityKmh , elapsedTimeMs);
-    //총 가야할 거리 (km)
-
-    if (pos2 !== prevPos2) {
-      //목표가 바뀌면 거리 및 비율 재계산
-      context.totalDistance = this.computeDistanceKiloMeter(pos1, pos2);
-      context.currDistance = 0;
-      context.prevPos2 = pos2;
-    }
-
-    var totalDistance = context.totalDistance; // console.log('totalDistance', totalDistance);
-    //ms 속으로 환산
-
-    if (velocityKmh !== prevVelocityKmh) {
-      //속도가 바뀌면 재계산
-      context.vPerMs = velocityKmh / this.MS_FROM_HOUR;
-      context.prevVelocityKmh = velocityKmh;
-    }
-
-    var vPerMs = context.vPerMs; //console.log('vPerMs', vPerMs);
-    //실제 가는 거리 계산
-
-    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs; //console.log('nextDistance', nextDistance);
-    //목표점까지 이동 후에도 남는 거리
-
-    context.currDistance = nextDistance;
-
-    if (totalDistance < context.currDistance) {
-      //이동 거리가 현재 목표점을 넘어가는 경우
-      context.distanceRemain = context.currDistance - totalDistance;
-      context.nextPos = pos2;
-      return context;
-    } else {
-      context.distanceRemain = 0;
-    } //각 축으로 나가야할 비율
-
-
-    var ratio = nextDistance / totalDistance; //console.log('ratio', ratio);
-    //방향값 체크
-
-    var latCalib = pos2.lat > pos1.lat ? 1 : -1;
-    var lngCalib = pos2.lng > pos1.lng ? 1 : -1; //각 축에 보정된 새로운 지점 리턴
-
-    var newPos = new PositionMirror(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
-
-    if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
-      newPos = pos2;
-    } // console.log('newPos', newPos);
-    //console.log('==============================================================\n');
-
-
-    context.nextPos = newPos;
-    return context;
-  };
-
-  GeoCalulator.EARTH_EQUATORIAL_RADIUS = 6378137; //meter (6,378,137 m)
-
-  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;
-}();
-
-/**
- * 좌표값
- * @description 위도/경도, DOM 상의 X/Y 좌표
+/**
+ * 좌표값
+ * @description 위도/경도, DOM 상의 X/Y 좌표
  */
 
 var Position =
 /** @class */
 function () {
   function Position(lat, lng) {
-    /**
-     * 위도
-     * @description 위도(latitude)
+    /**
+     * 위도
+     * @description 위도(latitude)
      */
     this.lat = 0;
-    /**
-     * 경도
-     * @description 경도(longitude)
+    /**
+     * 경도
+     * @description 경도(longitude)
      */
 
     this.lng = 0;
@@ -561,15 +568,15 @@ function () {
 
   return Bounds;
 }();
-/**
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
  */
 
 var Offset =
 /** @class */
 function () {
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
   function Offset(x, y) {
     this.x = x;
@@ -626,6 +633,7 @@ function MintMapCore(_a) {
       mapInitialized = _d[0],
       setMapInitialized = _d[1];
 
+  var currMapInitialized = useRef(false);
   useEffect(function () {
     (function () {
       return __awaiter(_this, void 0, void 0, function () {
@@ -638,16 +646,21 @@ function MintMapCore(_a) {
               , 2];
               return [4
               /*yield*/
-              , controller.initializingMap(elementRef.current) //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
-              ];
+              , controller.initializingMap(elementRef.current)];
 
             case 1:
-              map_1 = _a.sent(); //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+              map_1 = _a.sent();
+
+              if (!currMapInitialized.current) {
+                currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
+                setTimeout(function () {
+                  // console.log('setMapInitialized true');
+                  setMapInitialized(true);
+                  onLoad && onLoad(map_1, controller);
+                }, 100);
+              }
 
-              setTimeout(function () {
-                setMapInitialized(true);
-                onLoad && onLoad(map_1, controller);
-              }, 100);
               _a.label = 2;
 
             case 2:
@@ -658,10 +671,6 @@ function MintMapCore(_a) {
         });
       });
     })();
-
-    return function () {
-      controller && controller.destroyMap();
-    };
   }, [controller, elementRef]); //줌레벨
 
   useEffect(function () {
@@ -795,12 +804,12 @@ function () {
   MintMapController.prototype.getRandomFunctionName = function (prefix) {
     return "".concat(prefix, "_").concat(v4().replace(/-/g, '_'));
   };
-  /**
-   * URL 빌더 메서드
-   *
-   * @param {string} baseUrl: 기본 URL
-   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
-   * @returns {string} URL
+  /**
+   * URL 빌더 메서드
+   *
+   * @param {string} baseUrl: 기본 URL
+   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
+   * @returns {string} URL
    */
 
 
@@ -813,9 +822,9 @@ function () {
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
   };
-  /**
-   * 쓰로틀링 처리
-   * @returns
+  /**
+   * 쓰로틀링 처리
+   * @returns
    */
 
 
@@ -1376,11 +1385,11 @@ function (_super) {
       var map = marker.native.getMap();
 
       if (map) {
-        /** 중요!!!!
-         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
-         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
-         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
-         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+        /** 중요!!!!
+         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
         */
         //Position
         if (options.position && options.position instanceof Position) {
@@ -1608,7 +1617,7 @@ function (_super) {
                 case 2:
                   options = {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
-                    zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                    zoom: ((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || this.getBaseToMapZoom(15),
                     draggable: this.mapProps.draggable === false ? false : true,
                     scrollWheel: this.mapProps.draggable === false ? false : true,
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
@@ -1634,6 +1643,7 @@ function (_super) {
 
                   options.minZoom = minZoom;
                   options.maxZoom = maxZoom;
+                  divElement.innerHTML = '';
                   map = new naver.maps.Map(divElement, options);
                   this.map = map; //@ts-ignore
 
@@ -1758,6 +1768,15 @@ function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
   };
 
+  NaverMintMapController.prototype.positionToOffset = function (position) {
+    if (!this.map) {
+      return new Offset(0, 0);
+    }
+
+    var offset = this.map.getProjection().fromCoordToOffset(new naver.maps.LatLng(position.lat, position.lng));
+    return new Offset(offset.x, offset.y);
+  };
+
   NaverMintMapController.prototype.addEventListener = function (eventName, callback) {
     var _this = this;
 
@@ -2306,7 +2325,7 @@ function (_super) {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                     maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
                     minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
-                    zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
+                    zoom: ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel) || this.getBaseToMapZoom(15),
                     disableDefaultUI: true,
                     gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
@@ -2967,7 +2986,7 @@ function (_super) {
                 case 2:
                   options = {
                     center: this.positionToLatLng((_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center),
-                    level: this.getBaseToMapZoom(((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || 10),
+                    level: this.getBaseToMapZoom(((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || 15),
                     draggable: this.mapProps.draggable === false ? false : true,
                     scrollWheel: this.mapProps.draggable === false ? false : true,
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true
@@ -2987,6 +3006,7 @@ function (_super) {
                     minZoom = 14;
                   }
 
+                  divElement.innerHTML = '';
                   map = new kakao.maps.Map(divElement, options);
                   map.setMaxLevel(minZoom);
                   map.setMinLevel(maxZoom);
@@ -3051,13 +3071,13 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-    /**
-     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-     * - 가장 확대된 값 : 1
-     * - 가장 축소된 값 : 14
-     *
-     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
     */
     var mapValue = this.getBaseToMapZoom(value);
 
@@ -3242,12 +3262,12 @@ var DEFAULT_CENTER = {
   lat: 37.5036845,
   lng: 127.0448698
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MintMapProps} MintMapProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MintMapProps} MintMapProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MintMap(_a) {
@@ -3272,9 +3292,15 @@ function MintMap(_a) {
   var loading = useMemo(function () {
     return mapLoadingComponent ? mapLoadingComponent() : React.createElement(React.Fragment, null);
   }, [mapLoadingComponent]);
+  var prevController = useRef();
   useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
+
+      if (prevController.current) {
+        prevController.current.destroyMap();
+      }
+
       var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
         mapType: mapType
       }, props), {
@@ -3288,24 +3314,11 @@ function MintMap(_a) {
       }, props), {
         base: base
       })) : null;
+      newController_1 && (prevController.current = newController_1);
 
       if (newController_1) {
         newController_1.loadMapApi().then(function () {
-          setController(newController_1); // fade in 로직은 일단 스킵
-          // if(dissolveEffectWhenLoaded && loadingRef.current){
-          // 	const elemStyle = loadingRef.current.style
-          // 	elemStyle.background = 'white'
-          // 	elemStyle.opacity = '0'
-          // 	elemStyle.animationDuration = '0.1s'
-          // 	loadingRef.current.addEventListener('animationend', ()=>{
-          // 		setController(newController as MintMapController)
-          // 	}, {
-          // 		once:true
-          // 	})
-          // 	loadingRef.current.classList.add(cn('ani-fade-in'))
-          // }else{
-          // 	setController(newController as MintMapController)
-          // }
+          setController(newController_1);
         });
       } else {
         throw new Error("Not Supported Map type ".concat(mapType));
@@ -3451,10 +3464,10 @@ function SVGPolygon(_a) {
     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)
+      containerLeft: minX,
+      containerTop: minY,
+      containerWidth: width,
+      containerHeight: height
     };
   }, []);
   var getD = useCallback(function (_a) {
@@ -3528,7 +3541,7 @@ function SVGPolygon(_a) {
     height: height,
     fill: mode === 'POLYLINE' ? 'none' : background,
     stroke: mode === 'POLYLINE' ? 'black' : 'green',
-    strokeLinejoin: "round",
+    strokeLinejoin: "miter",
     strokeLinecap: "butt",
     d: d
   }, shapeProperties))), React.createElement("div", {
@@ -3677,8 +3690,8 @@ var Marker =
 /** @class */
 function (_super) {
   __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
+  /**
+   * 지도에 표시할 마커정보
    */
 
 
@@ -3696,8 +3709,8 @@ var Polyline =
 /** @class */
 function (_super) {
   __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3715,8 +3728,8 @@ var Polygon =
 /** @class */
 function (_super) {
   __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3726,8 +3739,8 @@ function (_super) {
     _this.options = options;
     return _this;
   }
-  /**
-   * 폴리곤의 중점을 구한다.
+  /**
+   * 폴리곤의 중점을 구한다.
    */
 
 
@@ -3897,19 +3910,19 @@ var offsetCalibration = function (mapType, divElement, options) {
     divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
   }
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 
 function MapMarkerWrapper(_a) {
-  var startAnimationClassName = _a.startAnimationClassName,
-      endAnimationClassName = _a.endAnimationClassName,
-      _b = _a.topOnClick,
+  _a.startAnimationClassName;
+      _a.endAnimationClassName;
+      var _b = _a.topOnClick,
       topOnClick = _b === void 0 ? false : _b,
       _c = _a.topOnHover,
       topOnHover = _c === void 0 ? false : _c,
@@ -3923,9 +3936,7 @@ function MapMarkerWrapper(_a) {
   var controller = useMintMapController(); //element
 
   var divRef = useRef(document.createElement('div'));
-  var divElement = divRef.current; //element clone for animation
-
-  var divCloneRef = useRef(); //marker
+  var divElement = divRef.current; //marker
 
   var markerRef = useRef(); //moving animation
 
@@ -4000,32 +4011,12 @@ function MapMarkerWrapper(_a) {
     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);
+      divElement.removeEventListener('click', onClickHandler);
+      divElement.removeEventListener('mouseover', onMouseOverHandler);
 
-        if (markerRef.current) {
-          controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-        }
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined; // console.log('drawable cleared')
       }
     };
   }, []); //create / update object
@@ -4070,31 +4061,6 @@ function MapMarkerWrapper(_a) {
           setMovingState(__assign(__assign({}, movingAnimation), {
             marker: markerRef.current
           }));
-        } //start animation
-
-
-        if (startAnimationClassName) {
-          divElement.style.visibility = 'hidden';
-          setTimeout(function () {
-            var _a, _b;
-
-            divCloneRef.current = divElement.firstElementChild;
-            divElement.style.visibility = 'visible';
-            (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
-
-            var aniListener = function () {
-              var _a, _b;
-
-              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
-              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
-            };
-
-            (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
-          });
-        } else {
-          setTimeout(function () {
-            divCloneRef.current = divElement.firstElementChild;
-          });
         }
       }
     }
@@ -4237,12 +4203,12 @@ var calculateAverage = function (nums) {
   return Number((sum / nums.length).toFixed(7));
 };
 
-/**
- * CircleMarker
- *
- * @param {CircleMarkerProps} CircleMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * CircleMarker
+ *
+ * @param {CircleMarkerProps} CircleMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function CircleMarker(_a) {
@@ -4354,12 +4320,12 @@ function CircleMarker(_a) {
   }, children)));
 }
 
-/**
- *PolygonMarker
- *
- * @param {PolygonMarkerProps} PolygonMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function PolygonMarker(_a) {
@@ -4422,11 +4388,9 @@ function PolygonMarker(_a) {
 
   var _l = useState([]),
       innerOffsets = _l[0],
-      setInnerOffsets = _l[1]; //offset cache
+      setInnerOffsets = _l[1]; //polygon props ref
 
 
-  var offsetCache = useRef(new Map()); //polygon props ref
-
   var polygonPropsRef = useRef({
     position: position,
     innerPositions: innerPositions,
@@ -4437,7 +4401,6 @@ function PolygonMarker(_a) {
 
   useEffect(function () {
     // console.log('polygon changed');
-    offsetCache.current.clear();
     polygonPropsRef.current = {
       position: position,
       innerPositions: innerPositions,
@@ -4459,53 +4422,42 @@ function PolygonMarker(_a) {
         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
+        lastReapeated = _a.lastReapeated; // path
 
-      var innerPath = [];
+    var maxLat = undefined;
+    var minLng = undefined;
+    var offsets = position.map(function (pos) {
+      if (maxLat === undefined || maxLat < pos.lat) {
+        maxLat = pos.lat;
+      }
 
-      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);
-        }
+      if (minLng === undefined || minLng > pos.lng) {
+        minLng = pos.lng;
+      }
 
-        setInnerOffsets(innerPath);
-      } //start point
+      return controller.positionToOffset(pos);
+    });
+    var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
+    setOffsets(simplified); //inner path
 
+    var innerPath = [];
 
-      var regionInfo = PolygonCalculator.getRegionInfo(simplified);
-      var startPosition = regionInfo.maxLat && regionInfo.minLng ? new Position(regionInfo.maxLat, regionInfo.minLng) : undefined;
-      setPolygonStart(startPosition); //cache set
+    if (innerPositions) {
+      for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
+        var innerPosition = innerPositions_1[_i];
+        var offsets_1 = innerPosition.map(function (pos) {
+          return controller.positionToOffset(pos);
+        });
+        var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
+        innerPath.push(simplified_1);
+      }
 
-      offsetCache.current.set(zoomLevel.current, {
-        start: startPosition,
-        offsets: offsets_2,
-        innerOffsets: innerPath
-      });
-    }
+      setInnerOffsets(innerPath);
+    } //start point
+
+
+    var startPosition = maxLat && minLng ? new Position(maxLat, minLng) : undefined;
+    setPolygonStart(startPosition);
   }, []);
   return React.createElement(React.Fragment, null, polygonStart && React.createElement(MapMarkerWrapper, {
     position: polygonStart,
@@ -4522,12 +4474,12 @@ function PolygonMarker(_a) {
   }, children)));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolygonWrapper(_a) {
@@ -4542,6 +4494,7 @@ function MapPolygonWrapper(_a) {
       if (polygonRef.current) {
         // console.log('polygon cleared')
         controller.clearDrawable(polygonRef.current);
+        polygonRef.current = undefined;
       }
     };
   }, []); //create/update object
@@ -5014,12 +4967,12 @@ var getAlignPosition = function (value, align) {
 
   throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 
@@ -5044,12 +4997,12 @@ function MapControlWrapper(_a) {
   }, children);
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolylineWrapper(_a) {
@@ -5062,7 +5015,8 @@ function MapPolylineWrapper(_a) {
   useEffect(function () {
     return function () {
       if (polylineRef.current) {
-        controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
+        controller.clearDrawable(polylineRef.current);
+        polylineRef.current = undefined; // console.log('polyline cleared')
       }
     };
   }, []); //create/update object
@@ -5089,12 +5043,12 @@ var console$1 = {
   log: function () {
   }
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasWrapper(_a) {
@@ -5203,7 +5157,7 @@ function MapCanvasWrapper(_a) {
         var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
 
         if (pos && !pos.offset) {
-          pos.offset = controller.positionToOffset(pos);
+          pos.offset = positionToOffset(pos);
         }
 
         if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
@@ -5236,7 +5190,7 @@ function MapCanvasWrapper(_a) {
 
       if (map) {
         // const center = controller.getCenter()
-        // center.offset = controller.positionToOffset(center)
+        // center.offset = positionToOffset(center)
         // if(center.offset){
         //   prevX.current = center.offset.x
         //   prevY.current = center.offset.y
@@ -5256,7 +5210,7 @@ function MapCanvasWrapper(_a) {
 
           if (containerRef.current) {
             // const pos = controller.getCenter()
-            // pos.offset = controller.positionToOffset(pos)
+            // pos.offset = positionToOffset(pos)
             // const deltaX = prevX.current - pos.offset.x
             // const deltaY = prevY.current - pos.offset.y
             // offsetProvider.current.x += deltaX
@@ -5282,7 +5236,7 @@ function MapCanvasWrapper(_a) {
 
         map.addListener('mousemove', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
+          var clickedOffset = positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
 
           var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
 
@@ -5296,7 +5250,7 @@ function MapCanvasWrapper(_a) {
 
         map.addListener('click', function (e) {
           var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-          var clickedOffset = controller.positionToOffset(clickPosition);
+          var clickedOffset = positionToOffset(clickPosition);
           processMouseEvent(clickedOffset, 'onClick');
         });
       }
@@ -5367,7 +5321,7 @@ function MapCanvasWrapper(_a) {
       if (item.visible === undefined || item.visible) {
         var pos = item.position; //위치 변환
 
-        pos.offset = controller.positionToOffset(pos);
+        pos.offset = positionToOffset(pos);
 
         if (item.anchor) {
           pos.offset.x += item.anchor.x;
@@ -5396,6 +5350,22 @@ function MapCanvasWrapper(_a) {
   }, []); //render!!!
 
   renderMain();
+
+  var positionToOffset = useCallback(function (position) {
+    var div = controller.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = controller.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var x = w * (position.lng - minLng) / lng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var y = h * (maxLat - position.lat) / lat;
+    return new Offset(x, y);
+  }, []);
   return React.createElement("div", {
     ref: containerRef,
     style: {
@@ -5413,12 +5383,12 @@ function MapCanvasWrapper(_a) {
   }), renderFlag && React.createElement(React.Fragment, null));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasMarkerWrapper(_props) {