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

package/dist/index.umd.js

@@ -14,6 +14,160 @@
   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__default["default"](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 () {
@@ -213,11 +367,7 @@
 
     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) {
@@ -251,12 +401,12 @@
 
 
     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;
@@ -293,171 +443,28 @@
       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;
@@ -565,15 +572,15 @@
 
     return Bounds;
   }();
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
 
   var Offset =
   /** @class */
   function () {
-    /**
-     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+    /**
+     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
      */
     function Offset(x, y) {
       this.x = x;
@@ -630,6 +637,7 @@
         mapInitialized = _d[0],
         setMapInitialized = _d[1];
 
+    var currMapInitialized = React.useRef(false);
     React.useEffect(function () {
       (function () {
         return tslib.__awaiter(_this, void 0, void 0, function () {
@@ -642,16 +650,21 @@
                 , 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:
@@ -662,10 +675,6 @@
           });
         });
       })();
-
-      return function () {
-        controller && controller.destroyMap();
-      };
     }, [controller, elementRef]); //줌레벨
 
     React.useEffect(function () {
@@ -799,12 +808,12 @@
     MintMapController.prototype.getRandomFunctionName = function (prefix) {
       return "".concat(prefix, "_").concat(uuid.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
      */
 
 
@@ -817,9 +826,9 @@
       }).join('&');
       return "".concat(baseUrl, "?").concat(params);
     };
-    /**
-     * 쓰로틀링 처리
-     * @returns
+    /**
+     * 쓰로틀링 처리
+     * @returns
      */
 
 
@@ -1380,11 +1389,11 @@
         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) {
@@ -1612,7 +1621,7 @@
                   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,
@@ -1638,6 +1647,7 @@
 
                     options.minZoom = minZoom;
                     options.maxZoom = maxZoom;
+                    divElement.innerHTML = '';
                     map = new naver.maps.Map(divElement, options);
                     this.map = map; //@ts-ignore
 
@@ -1762,6 +1772,15 @@
       (_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;
 
@@ -2310,7 +2329,7 @@
                       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,
@@ -2971,7 +2990,7 @@
                   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
@@ -2991,6 +3010,7 @@
                       minZoom = 14;
                     }
 
+                    divElement.innerHTML = '';
                     map = new kakao.maps.Map(divElement, options);
                     map.setMaxLevel(minZoom);
                     map.setMinLevel(maxZoom);
@@ -3055,13 +3075,13 @@
     };
 
     KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-      /**
-       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-       * - 가장 확대된 값 : 1
-       * - 가장 축소된 값 : 14
-       *
-       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+      /**
+       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+       * - 가장 확대된 값 : 1
+       * - 가장 축소된 값 : 14
+       *
+       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
       */
       var mapValue = this.getBaseToMapZoom(value);
 
@@ -3246,12 +3266,12 @@
     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) {
@@ -3276,9 +3296,15 @@
     var loading = React.useMemo(function () {
       return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
     }, [mapLoadingComponent]);
+    var prevController = React.useRef();
     React.useEffect(function () {
       if (mapType && mapType.length > 0) {
         setController(undefined);
+
+        if (prevController.current) {
+          prevController.current.destroyMap();
+        }
+
         var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
           mapType: mapType
         }, props), {
@@ -3292,24 +3318,11 @@
         }, 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));
@@ -3455,10 +3468,10 @@
       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 = React.useCallback(function (_a) {
@@ -3532,7 +3545,7 @@
       height: height,
       fill: mode === 'POLYLINE' ? 'none' : background,
       stroke: mode === 'POLYLINE' ? 'black' : 'green',
-      strokeLinejoin: "round",
+      strokeLinejoin: "miter",
       strokeLinecap: "butt",
       d: d
     }, shapeProperties))), React__default["default"].createElement("div", {
@@ -3681,8 +3694,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Marker, _super);
-    /**
-     * 지도에 표시할 마커정보
+    /**
+     * 지도에 표시할 마커정보
      */
 
 
@@ -3700,8 +3713,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polyline, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3719,8 +3732,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polygon, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3730,8 +3743,8 @@
       _this.options = options;
       return _this;
     }
-    /**
-     * 폴리곤의 중점을 구한다.
+    /**
+     * 폴리곤의 중점을 구한다.
      */
 
 
@@ -3901,19 +3914,19 @@
       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,
@@ -3927,9 +3940,7 @@
     var controller = useMintMapController(); //element
 
     var divRef = React.useRef(document.createElement('div'));
-    var divElement = divRef.current; //element clone for animation
-
-    var divCloneRef = React.useRef(); //marker
+    var divElement = divRef.current; //marker
 
     var markerRef = React.useRef(); //moving animation
 
@@ -4004,32 +4015,12 @@
       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
@@ -4074,31 +4065,6 @@
             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;
-            });
           }
         }
       }
@@ -4241,12 +4207,12 @@
     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) {
@@ -4358,12 +4324,12 @@
     }, children)));
   }
 
-  /**
-   *PolygonMarker
-   *
-   * @param {PolygonMarkerProps} PolygonMarkerProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   *PolygonMarker
+   *
+   * @param {PolygonMarkerProps} PolygonMarkerProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function PolygonMarker(_a) {
@@ -4426,11 +4392,9 @@
 
     var _l = React.useState([]),
         innerOffsets = _l[0],
-        setInnerOffsets = _l[1]; //offset cache
+        setInnerOffsets = _l[1]; //polygon props ref
 
 
-    var offsetCache = React.useRef(new Map()); //polygon props ref
-
     var polygonPropsRef = React.useRef({
       position: position,
       innerPositions: innerPositions,
@@ -4441,7 +4405,6 @@
 
     React.useEffect(function () {
       // console.log('polygon changed');
-      offsetCache.current.clear();
       polygonPropsRef.current = {
         position: position,
         innerPositions: innerPositions,
@@ -4463,53 +4426,42 @@
           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__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper, {
       position: polygonStart,
@@ -4526,12 +4478,12 @@
     }, children)));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolygonWrapper(_a) {
@@ -4546,6 +4498,7 @@
         if (polygonRef.current) {
           // console.log('polygon cleared')
           controller.clearDrawable(polygonRef.current);
+          polygonRef.current = undefined;
         }
       };
     }, []); //create/update object
@@ -5018,12 +4971,12 @@
 
     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
    */
 
 
@@ -5048,12 +5001,12 @@
     }, children);
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolylineWrapper(_a) {
@@ -5066,7 +5019,8 @@
     React.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
@@ -5093,12 +5047,12 @@
     log: function () {
     }
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapCanvasWrapper(_a) {
@@ -5207,7 +5161,7 @@
           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)) {
@@ -5240,7 +5194,7 @@
 
         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
@@ -5260,7 +5214,7 @@
 
             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
@@ -5286,7 +5240,7 @@
 
           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 처리
 
@@ -5300,7 +5254,7 @@
 
           map.addListener('click', function (e) {
             var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
-            var clickedOffset = controller.positionToOffset(clickPosition);
+            var clickedOffset = positionToOffset(clickPosition);
             processMouseEvent(clickedOffset, 'onClick');
           });
         }
@@ -5371,7 +5325,7 @@
         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;
@@ -5400,6 +5354,22 @@
     }, []); //render!!!
 
     renderMain();
+
+    var positionToOffset = React.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__default["default"].createElement("div", {
       ref: containerRef,
       style: {
@@ -5417,12 +5387,12 @@
     }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapCanvasMarkerWrapper(_props) {