@mint-ui/map 0.5.3-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,154 +443,11 @@
       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 좌표
@@ -1614,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,
@@ -1765,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;
 
@@ -2313,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,
@@ -2974,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
@@ -3452,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) {
@@ -3529,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", {
@@ -4376,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,
@@ -4391,7 +4405,6 @@
 
     React.useEffect(function () {
       // console.log('polygon changed');
-      offsetCache.current.clear();
       polygonPropsRef.current = {
         position: position,
         innerPositions: innerPositions,
@@ -4413,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,
@@ -5159,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)) {
@@ -5192,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
@@ -5212,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
@@ -5238,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 처리
 
@@ -5252,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');
           });
         }
@@ -5323,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;
@@ -5352,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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.5.3-beta",
+  "version": "0.5.4-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",