@mint-ui/map 0.5.9-beta → 0.5.11-beta

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

@@ -9,6 +9,7 @@ export interface CircleMarkerProps {
     zIndex?: number;
     svgProperties?: React.SVGProps<SVGSVGElement>;
     shapeProperties?: React.SVGProps<SVGCircleElement>;
+    debug?: boolean | undefined;
     debugLabel?: string;
 }
 /**
@@ -18,4 +19,4 @@ export interface CircleMarkerProps {
  *
  * @returns {JSX.Element} JSX
  */
-export declare function CircleMarker({ children, center, radius, radiusUnit, background, svgProperties, shapeProperties, visible, zIndex, debugLabel, }: PropsWithChildren<CircleMarkerProps>): JSX.Element;
+export declare function CircleMarker({ children, center, radius, radiusUnit, background, svgProperties, shapeProperties, visible, zIndex, debug, debugLabel, }: PropsWithChildren<CircleMarkerProps>): JSX.Element;

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

@@ -42,6 +42,7 @@ function CircleMarker(_a) {
       _f = _a.visible,
       visible = _f === void 0 ? true : _f,
       zIndex = _a.zIndex,
+      debug = _a.debug,
       debugLabel = _a.debugLabel; //controller
 
   var controller = MintMapProvider.useMintMapController(); //zoom start event
@@ -127,6 +128,7 @@ function CircleMarker(_a) {
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
   }, mapVisible && React__default["default"].createElement(SVGCircle.SVGCircle, {
     radius: computedRadius,

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

@@ -15,6 +15,7 @@ export interface PolygonMarkerProps {
     mode?: 'POLYGON' | 'POLYLINE';
     svgProperties?: React.SVGProps<SVGSVGElement>;
     shapeProperties?: React.SVGProps<SVGPathElement>;
+    debug?: boolean | undefined;
     debugLabel?: string;
 }
 /**
@@ -24,4 +25,4 @@ export interface PolygonMarkerProps {
  *
  * @returns {JSX.Element} JSX
  */
-export declare function PolygonMarker({ children, position, background, innerPositions, simplifyPath, simplifyTolerance, lastReapeated, svgProperties, shapeProperties, visible, zIndex, mode, debugLabel, }: PropsWithChildren<PolygonMarkerProps>): JSX.Element;
+export declare function PolygonMarker({ children, position, background, innerPositions, simplifyPath, simplifyTolerance, lastReapeated, svgProperties, shapeProperties, visible, zIndex, mode, debug, debugLabel, }: PropsWithChildren<PolygonMarkerProps>): JSX.Element;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var MintMapProvider = require('../../provider/MintMapProvider.js');
 var MapMarkerWrapper = require('../../wrapper/MapMarkerWrapper.js');
@@ -11,7 +12,6 @@ var MapTypes = require('../../../types/MapTypes.js');
 require('../../../types/MapEventTypes.js');
 require('../../util/animation.js');
 require('../../util/geo.js');
-require('tslib');
 var polygon = require('../../util/polygon.js');
 require('../../util/status.js');
 var NaverMintMapController = require('../../../naver/NaverMintMapController.js');
@@ -48,6 +48,7 @@ function PolygonMarker(_a) {
       zIndex = _a.zIndex,
       _h = _a.mode,
       mode = _h === void 0 ? 'POLYGON' : _h,
+      debug = _a.debug,
       debugLabel = _a.debugLabel; //controller
 
   var controller = MintMapProvider.useMintMapController(); //zoom start event
@@ -61,10 +62,11 @@ function PolygonMarker(_a) {
 
     if (zoomLevel.current !== newZoomLevel) {
       zoomLevel.current = newZoomLevel;
-      renderPolygonBase();
+      calculatePolygonBase();
       setTimeout(function () {
         setMapVisible(true);
-      });
+        renderPolygon();
+      }, 50);
     }
   }, []);
   var zoomLevel = React.useRef(controller.getZoomLevel());
@@ -101,7 +103,6 @@ function PolygonMarker(_a) {
   }); //polygon 생성 effect
 
   React.useEffect(function () {
-    // console.log('polygon changed');
     polygonPropsRef.current = {
       position: position,
       innerPositions: innerPositions,
@@ -109,14 +110,19 @@ function PolygonMarker(_a) {
       simplifyTolerance: simplifyTolerance,
       lastReapeated: lastReapeated
     };
-    renderPolygonBase();
+    calculatePolygonBase(true); // console.log('PolygonMarker useEffect');
   }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
 
   var _m = React.useState(true),
       mapVisible = _m[0],
       setMapVisible = _m[1];
 
-  var renderPolygonBase = React.useCallback(function () {
+  var renderInfoRef = React.useRef({
+    offset: [],
+    innerOffset: [],
+    startPosition: undefined
+  });
+  var calculatePolygonBase = React.useCallback(function (renderNow) {
     // console.log('renderPolygonBase');
     var _a = polygonPropsRef.current,
         position = _a.position,
@@ -140,7 +146,7 @@ function PolygonMarker(_a) {
       return controller instanceof NaverMintMapController.NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
     });
     var simplified = simplifyPath ? polygon.PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
-    setOffsets(simplified); //inner path
+    renderInfoRef.current.offset = simplified; //inner path
 
     var innerPath = [];
 
@@ -154,27 +160,39 @@ function PolygonMarker(_a) {
         var simplified_1 = simplifyPath ? polygon.PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
         innerPath.push(simplified_1);
       }
+    }
 
-      setInnerOffsets(innerPath);
-    } //start point
-
+    renderInfoRef.current.innerOffset = innerPath; //start point
 
     var startPosition = maxLat && minLng ? new MapTypes.Position(maxLat, minLng) : undefined;
-    setPolygonStart(startPosition);
+    renderInfoRef.current.startPosition = startPosition;
+
+    if (renderNow) {
+      renderPolygon();
+    }
+  }, []);
+  var renderPolygon = React.useCallback(function () {
+    // console.log('render', renderInfoRef.current.offset);
+    setOffsets(renderInfoRef.current.offset);
+    setInnerOffsets(renderInfoRef.current.innerOffset);
+    setPolygonStart(renderInfoRef.current.startPosition);
   }, []);
   return React__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper.MapMarkerWrapper, {
     position: polygonStart,
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
-  }, mapVisible && React__default["default"].createElement(SVGPolygon.SVGPolygon, {
+  }, React__default["default"].createElement(SVGPolygon.SVGPolygon, {
     path: offsets,
     innerPath: innerOffsets,
     mode: mode,
     background: background,
     shapeProperties: shapeProperties,
-    svgProperties: svgProperties
+    svgProperties: tslib.__assign({
+      display: mapVisible ? '' : 'none'
+    }, svgProperties)
   }, children)));
 }
 

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

@@ -4,6 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+require('../../../../types/MapDrawables.js');
+var MapTypes = require('../../../../types/MapTypes.js');
+require('../../../../types/MapEventTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -63,39 +66,33 @@ function SVGPolygon(_a) {
       containerHeight: height
     };
   }, []);
-  var getD = React.useCallback(function (_a) {
-    var path = _a.path,
-        containerLeft = _a.containerLeft,
-        containerTop = _a.containerTop,
-        mode = _a.mode;
-    var left = containerLeft;
-    var top = containerTop;
+  var getD = React.useCallback(function (path, innerPath, mode) {
     var isPolygon = mode === 'POLYGON';
     var out = ''; //path
 
-    out += getLine(path, left, top, isPolygon); //inner path
+    out += getLine(path, isPolygon); //inner path
 
     for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
       var inner = innerPath_1[_i];
-      out += ' ' + getLine(inner, left, top, isPolygon);
+      out += ' ' + getLine(inner, isPolygon);
     }
 
     return out;
   }, []);
-  var getLine = React.useCallback(function (path, offsetLeft, offsetTop, closePath) {
+  var getLine = React.useCallback(function (path, isPolygon) {
     return path.map(function (offset, idx) {
       if (idx === 0) {
-        return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        return "M ".concat(offset.x, ",").concat(offset.y);
       } else if (idx === 1) {
-        return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        return "L ".concat(offset.x, ",").concat(offset.y);
       } else {
         if (offset.equals(path[idx - 1])) {
           return '';
         } else {
-          return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+          return "".concat(offset.x, ",").concat(offset.y);
         }
       }
-    }).join(' ') + " ".concat(closePath ? 'Z' : '');
+    }).join(' ') + " ".concat(isPolygon ? 'Z' : "".concat(path[0].x, ",").concat(path[0].y));
   }, []);
 
   var _g = React.useState(0),
@@ -110,28 +107,26 @@ function SVGPolygon(_a) {
       d = _j[0],
       setD = _j[1];
 
+  var _k = React.useState(new MapTypes.Offset(0, 0)),
+      polygonAreaInfo = _k[0],
+      setPolygonAreaInfo = _k[1];
+
   React.useEffect(function () {
     var info = getPolygonInfo(path);
-    setWidth(info.containerWidth);
-    setHeight(info.containerHeight);
-    setD(getD(tslib.__assign(tslib.__assign({}, info), {
-      path: path,
-      innerPath: innerPath,
-      mode: mode
-    })));
-  }, [path, innerPath]);
+    setPolygonAreaInfo(new MapTypes.Offset(Math.round(info.containerLeft), Math.round(info.containerTop)));
+    setWidth(Math.round(info.containerWidth));
+    setHeight(Math.round(info.containerHeight));
+    setD(getD(path, innerPath, mode));
+  }, [path, innerPath, mode]);
   return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
     pointerEvents: "none",
+    overflow: 'visible',
     width: width,
     height: height,
-    viewBox: "0 0 ".concat(width, " ").concat(height)
+    viewBox: "".concat(polygonAreaInfo.x, " ").concat(polygonAreaInfo.y, " ").concat(width, " ").concat(height)
   }, svgProperties), React__default["default"].createElement("path", tslib.__assign({
     fillRule: "evenodd",
     pointerEvents: "visiblepainted",
-    x: "0",
-    y: "0",
-    width: width,
-    height: height,
     fill: mode === 'POLYLINE' ? 'none' : background,
     stroke: mode === 'POLYLINE' ? 'black' : 'green',
     strokeLinejoin: "miter",

package/dist/components/mint-map/types/MapTypes.js

@@ -123,7 +123,7 @@ function () {
   };
 
   Bounds.prototype.intersects = function (positions) {
-    return polygon.PolygonCalculator.intersects([this.nw, this.se], positions);
+    return polygon.PolygonCalculator.intersects([this.nw, this.sw, this.se, this.ne, this.nw], positions);
   };
 
   return Bounds;

package/dist/index.es.js

@@ -592,7 +592,7 @@ function () {
   };
 
   Bounds.prototype.intersects = function (positions) {
-    return PolygonCalculator.intersects([this.nw, this.se], positions);
+    return PolygonCalculator.intersects([this.nw, this.sw, this.se, this.ne, this.nw], positions);
   };
 
   return Bounds;
@@ -3744,6 +3744,86 @@ function SVGCircle(_a) {
   }, children));
 }
 
+var Drawable =
+/** @class */
+function () {
+  function Drawable() {}
+
+  return Drawable;
+}();
+
+var Marker =
+/** @class */
+function (_super) {
+  __extends(Marker, _super);
+  /**
+   * 지도에 표시할 마커정보
+   */
+
+
+  function Marker(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Marker;
+}(Drawable);
+
+var Polyline =
+/** @class */
+function (_super) {
+  __extends(Polyline, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polyline(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Polyline;
+}(Drawable);
+
+var Polygon =
+/** @class */
+function (_super) {
+  __extends(Polygon, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polygon(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+  /**
+   * 폴리곤의 중점을 구한다.
+   */
+
+
+  Polygon.prototype.getCenter = function () {
+    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+      var paths = this.options.position.map(function (elem) {
+        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+      });
+      return PolygonCalculator.getCenter(paths);
+    }
+
+    throw new Error('center 를 찾을 수 없습니다.');
+  };
+
+  return Polygon;
+}(Drawable);
+
 function SVGPolygon(_a) {
   var path = _a.path,
       _b = _a.innerPath,
@@ -3798,39 +3878,33 @@ function SVGPolygon(_a) {
       containerHeight: height
     };
   }, []);
-  var getD = useCallback(function (_a) {
-    var path = _a.path,
-        containerLeft = _a.containerLeft,
-        containerTop = _a.containerTop,
-        mode = _a.mode;
-    var left = containerLeft;
-    var top = containerTop;
+  var getD = useCallback(function (path, innerPath, mode) {
     var isPolygon = mode === 'POLYGON';
     var out = ''; //path
 
-    out += getLine(path, left, top, isPolygon); //inner path
+    out += getLine(path, isPolygon); //inner path
 
     for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
       var inner = innerPath_1[_i];
-      out += ' ' + getLine(inner, left, top, isPolygon);
+      out += ' ' + getLine(inner, isPolygon);
     }
 
     return out;
   }, []);
-  var getLine = useCallback(function (path, offsetLeft, offsetTop, closePath) {
+  var getLine = useCallback(function (path, isPolygon) {
     return path.map(function (offset, idx) {
       if (idx === 0) {
-        return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        return "M ".concat(offset.x, ",").concat(offset.y);
       } else if (idx === 1) {
-        return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+        return "L ".concat(offset.x, ",").concat(offset.y);
       } else {
         if (offset.equals(path[idx - 1])) {
           return '';
         } else {
-          return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+          return "".concat(offset.x, ",").concat(offset.y);
         }
       }
-    }).join(' ') + " ".concat(closePath ? 'Z' : '');
+    }).join(' ') + " ".concat(isPolygon ? 'Z' : "".concat(path[0].x, ",").concat(path[0].y));
   }, []);
 
   var _g = useState(0),
@@ -3845,28 +3919,26 @@ function SVGPolygon(_a) {
       d = _j[0],
       setD = _j[1];
 
+  var _k = useState(new Offset(0, 0)),
+      polygonAreaInfo = _k[0],
+      setPolygonAreaInfo = _k[1];
+
   useEffect(function () {
     var info = getPolygonInfo(path);
-    setWidth(info.containerWidth);
-    setHeight(info.containerHeight);
-    setD(getD(__assign(__assign({}, info), {
-      path: path,
-      innerPath: innerPath,
-      mode: mode
-    })));
-  }, [path, innerPath]);
+    setPolygonAreaInfo(new Offset(Math.round(info.containerLeft), Math.round(info.containerTop)));
+    setWidth(Math.round(info.containerWidth));
+    setHeight(Math.round(info.containerHeight));
+    setD(getD(path, innerPath, mode));
+  }, [path, innerPath, mode]);
   return React.createElement(React.Fragment, null, React.createElement("svg", __assign({
     pointerEvents: "none",
+    overflow: 'visible',
     width: width,
     height: height,
-    viewBox: "0 0 ".concat(width, " ").concat(height)
+    viewBox: "".concat(polygonAreaInfo.x, " ").concat(polygonAreaInfo.y, " ").concat(width, " ").concat(height)
   }, svgProperties), React.createElement("path", __assign({
     fillRule: "evenodd",
     pointerEvents: "visiblepainted",
-    x: "0",
-    y: "0",
-    width: width,
-    height: height,
     fill: mode === 'POLYLINE' ? 'none' : background,
     stroke: mode === 'POLYLINE' ? 'black' : 'green',
     strokeLinejoin: "miter",
@@ -3932,86 +4004,6 @@ function SVGRect(_a) {
   }, children));
 }
 
-var Drawable =
-/** @class */
-function () {
-  function Drawable() {}
-
-  return Drawable;
-}();
-
-var Marker =
-/** @class */
-function (_super) {
-  __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
-   */
-
-
-  function Marker(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-
-  return Marker;
-}(Drawable);
-
-var Polyline =
-/** @class */
-function (_super) {
-  __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
-   */
-
-
-  function Polyline(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-
-  return Polyline;
-}(Drawable);
-
-var Polygon =
-/** @class */
-function (_super) {
-  __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
-   */
-
-
-  function Polygon(options) {
-    var _this = _super.call(this) || this;
-
-    _this.options = options;
-    return _this;
-  }
-  /**
-   * 폴리곤의 중점을 구한다.
-   */
-
-
-  Polygon.prototype.getCenter = function () {
-    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
-      var paths = this.options.position.map(function (elem) {
-        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
-      });
-      return PolygonCalculator.getCenter(paths);
-    }
-
-    throw new Error('center 를 찾을 수 없습니다.');
-  };
-
-  return Polygon;
-}(Drawable);
-
 function nextIndex(array, currIdx) {
   var next = currIdx + 1;
 
@@ -4355,6 +4347,7 @@ function CircleMarker(_a) {
       _f = _a.visible,
       visible = _f === void 0 ? true : _f,
       zIndex = _a.zIndex,
+      debug = _a.debug,
       debugLabel = _a.debugLabel; //controller
 
   var controller = useMintMapController(); //zoom start event
@@ -4440,6 +4433,7 @@ function CircleMarker(_a) {
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
   }, mapVisible && React.createElement(SVGCircle, {
     radius: computedRadius,
@@ -4479,6 +4473,7 @@ function PolygonMarker(_a) {
       zIndex = _a.zIndex,
       _h = _a.mode,
       mode = _h === void 0 ? 'POLYGON' : _h,
+      debug = _a.debug,
       debugLabel = _a.debugLabel; //controller
 
   var controller = useMintMapController(); //zoom start event
@@ -4492,10 +4487,11 @@ function PolygonMarker(_a) {
 
     if (zoomLevel.current !== newZoomLevel) {
       zoomLevel.current = newZoomLevel;
-      renderPolygonBase();
+      calculatePolygonBase();
       setTimeout(function () {
         setMapVisible(true);
-      });
+        renderPolygon();
+      }, 50);
     }
   }, []);
   var zoomLevel = useRef(controller.getZoomLevel());
@@ -4532,7 +4528,6 @@ function PolygonMarker(_a) {
   }); //polygon 생성 effect
 
   useEffect(function () {
-    // console.log('polygon changed');
     polygonPropsRef.current = {
       position: position,
       innerPositions: innerPositions,
@@ -4540,14 +4535,19 @@ function PolygonMarker(_a) {
       simplifyTolerance: simplifyTolerance,
       lastReapeated: lastReapeated
     };
-    renderPolygonBase();
+    calculatePolygonBase(true); // console.log('PolygonMarker useEffect');
   }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
 
   var _m = useState(true),
       mapVisible = _m[0],
       setMapVisible = _m[1];
 
-  var renderPolygonBase = useCallback(function () {
+  var renderInfoRef = useRef({
+    offset: [],
+    innerOffset: [],
+    startPosition: undefined
+  });
+  var calculatePolygonBase = useCallback(function (renderNow) {
     // console.log('renderPolygonBase');
     var _a = polygonPropsRef.current,
         position = _a.position,
@@ -4571,7 +4571,7 @@ function PolygonMarker(_a) {
       return controller instanceof NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
     });
     var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
-    setOffsets(simplified); //inner path
+    renderInfoRef.current.offset = simplified; //inner path
 
     var innerPath = [];
 
@@ -4585,27 +4585,39 @@ function PolygonMarker(_a) {
         var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
         innerPath.push(simplified_1);
       }
+    }
 
-      setInnerOffsets(innerPath);
-    } //start point
-
+    renderInfoRef.current.innerOffset = innerPath; //start point
 
     var startPosition = maxLat && minLng ? new Position(maxLat, minLng) : undefined;
-    setPolygonStart(startPosition);
+    renderInfoRef.current.startPosition = startPosition;
+
+    if (renderNow) {
+      renderPolygon();
+    }
+  }, []);
+  var renderPolygon = useCallback(function () {
+    // console.log('render', renderInfoRef.current.offset);
+    setOffsets(renderInfoRef.current.offset);
+    setInnerOffsets(renderInfoRef.current.innerOffset);
+    setPolygonStart(renderInfoRef.current.startPosition);
   }, []);
   return React.createElement(React.Fragment, null, polygonStart && React.createElement(MapMarkerWrapper, {
     position: polygonStart,
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
-  }, mapVisible && React.createElement(SVGPolygon, {
+  }, React.createElement(SVGPolygon, {
     path: offsets,
     innerPath: innerOffsets,
     mode: mode,
     background: background,
     shapeProperties: shapeProperties,
-    svgProperties: svgProperties
+    svgProperties: __assign({
+      display: mapVisible ? '' : 'none'
+    }, svgProperties)
   }, children)));
 }
 

package/dist/index.umd.js

@@ -596,7 +596,7 @@
     };
 
     Bounds.prototype.intersects = function (positions) {
-      return PolygonCalculator.intersects([this.nw, this.se], positions);
+      return PolygonCalculator.intersects([this.nw, this.sw, this.se, this.ne, this.nw], positions);
     };
 
     return Bounds;
@@ -3748,6 +3748,86 @@
     }, children));
   }
 
+  var Drawable =
+  /** @class */
+  function () {
+    function Drawable() {}
+
+    return Drawable;
+  }();
+
+  var Marker =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Marker, _super);
+    /**
+     * 지도에 표시할 마커정보
+     */
+
+
+    function Marker(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+
+    return Marker;
+  }(Drawable);
+
+  var Polyline =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Polyline, _super);
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+
+
+    function Polyline(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+
+    return Polyline;
+  }(Drawable);
+
+  var Polygon =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Polygon, _super);
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+
+
+    function Polygon(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+    /**
+     * 폴리곤의 중점을 구한다.
+     */
+
+
+    Polygon.prototype.getCenter = function () {
+      if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+        var paths = this.options.position.map(function (elem) {
+          return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+        });
+        return PolygonCalculator.getCenter(paths);
+      }
+
+      throw new Error('center 를 찾을 수 없습니다.');
+    };
+
+    return Polygon;
+  }(Drawable);
+
   function SVGPolygon(_a) {
     var path = _a.path,
         _b = _a.innerPath,
@@ -3802,39 +3882,33 @@
         containerHeight: height
       };
     }, []);
-    var getD = React.useCallback(function (_a) {
-      var path = _a.path,
-          containerLeft = _a.containerLeft,
-          containerTop = _a.containerTop,
-          mode = _a.mode;
-      var left = containerLeft;
-      var top = containerTop;
+    var getD = React.useCallback(function (path, innerPath, mode) {
       var isPolygon = mode === 'POLYGON';
       var out = ''; //path
 
-      out += getLine(path, left, top, isPolygon); //inner path
+      out += getLine(path, isPolygon); //inner path
 
       for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
         var inner = innerPath_1[_i];
-        out += ' ' + getLine(inner, left, top, isPolygon);
+        out += ' ' + getLine(inner, isPolygon);
       }
 
       return out;
     }, []);
-    var getLine = React.useCallback(function (path, offsetLeft, offsetTop, closePath) {
+    var getLine = React.useCallback(function (path, isPolygon) {
       return path.map(function (offset, idx) {
         if (idx === 0) {
-          return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+          return "M ".concat(offset.x, ",").concat(offset.y);
         } else if (idx === 1) {
-          return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+          return "L ".concat(offset.x, ",").concat(offset.y);
         } else {
           if (offset.equals(path[idx - 1])) {
             return '';
           } else {
-            return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+            return "".concat(offset.x, ",").concat(offset.y);
           }
         }
-      }).join(' ') + " ".concat(closePath ? 'Z' : '');
+      }).join(' ') + " ".concat(isPolygon ? 'Z' : "".concat(path[0].x, ",").concat(path[0].y));
     }, []);
 
     var _g = React.useState(0),
@@ -3849,28 +3923,26 @@
         d = _j[0],
         setD = _j[1];
 
+    var _k = React.useState(new Offset(0, 0)),
+        polygonAreaInfo = _k[0],
+        setPolygonAreaInfo = _k[1];
+
     React.useEffect(function () {
       var info = getPolygonInfo(path);
-      setWidth(info.containerWidth);
-      setHeight(info.containerHeight);
-      setD(getD(tslib.__assign(tslib.__assign({}, info), {
-        path: path,
-        innerPath: innerPath,
-        mode: mode
-      })));
-    }, [path, innerPath]);
+      setPolygonAreaInfo(new Offset(Math.round(info.containerLeft), Math.round(info.containerTop)));
+      setWidth(Math.round(info.containerWidth));
+      setHeight(Math.round(info.containerHeight));
+      setD(getD(path, innerPath, mode));
+    }, [path, innerPath, mode]);
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
       pointerEvents: "none",
+      overflow: 'visible',
       width: width,
       height: height,
-      viewBox: "0 0 ".concat(width, " ").concat(height)
+      viewBox: "".concat(polygonAreaInfo.x, " ").concat(polygonAreaInfo.y, " ").concat(width, " ").concat(height)
     }, svgProperties), React__default["default"].createElement("path", tslib.__assign({
       fillRule: "evenodd",
       pointerEvents: "visiblepainted",
-      x: "0",
-      y: "0",
-      width: width,
-      height: height,
       fill: mode === 'POLYLINE' ? 'none' : background,
       stroke: mode === 'POLYLINE' ? 'black' : 'green',
       strokeLinejoin: "miter",
@@ -3936,86 +4008,6 @@
     }, children));
   }
 
-  var Drawable =
-  /** @class */
-  function () {
-    function Drawable() {}
-
-    return Drawable;
-  }();
-
-  var Marker =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Marker, _super);
-    /**
-     * 지도에 표시할 마커정보
-     */
-
-
-    function Marker(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Marker;
-  }(Drawable);
-
-  var Polyline =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Polyline, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
-     */
-
-
-    function Polyline(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Polyline;
-  }(Drawable);
-
-  var Polygon =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Polygon, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
-     */
-
-
-    function Polygon(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-    /**
-     * 폴리곤의 중점을 구한다.
-     */
-
-
-    Polygon.prototype.getCenter = function () {
-      if (Array.isArray(this.options.position) && this.options.position.length > 0) {
-        var paths = this.options.position.map(function (elem) {
-          return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
-        });
-        return PolygonCalculator.getCenter(paths);
-      }
-
-      throw new Error('center 를 찾을 수 없습니다.');
-    };
-
-    return Polygon;
-  }(Drawable);
-
   function nextIndex(array, currIdx) {
     var next = currIdx + 1;
 
@@ -4359,6 +4351,7 @@
         _f = _a.visible,
         visible = _f === void 0 ? true : _f,
         zIndex = _a.zIndex,
+        debug = _a.debug,
         debugLabel = _a.debugLabel; //controller
 
     var controller = useMintMapController(); //zoom start event
@@ -4444,6 +4437,7 @@
       visible: visible,
       disablePointerEvent: true,
       zIndex: zIndex,
+      debug: debug,
       debugLabel: debugLabel
     }, mapVisible && React__default["default"].createElement(SVGCircle, {
       radius: computedRadius,
@@ -4483,6 +4477,7 @@
         zIndex = _a.zIndex,
         _h = _a.mode,
         mode = _h === void 0 ? 'POLYGON' : _h,
+        debug = _a.debug,
         debugLabel = _a.debugLabel; //controller
 
     var controller = useMintMapController(); //zoom start event
@@ -4496,10 +4491,11 @@
 
       if (zoomLevel.current !== newZoomLevel) {
         zoomLevel.current = newZoomLevel;
-        renderPolygonBase();
+        calculatePolygonBase();
         setTimeout(function () {
           setMapVisible(true);
-        });
+          renderPolygon();
+        }, 50);
       }
     }, []);
     var zoomLevel = React.useRef(controller.getZoomLevel());
@@ -4536,7 +4532,6 @@
     }); //polygon 생성 effect
 
     React.useEffect(function () {
-      // console.log('polygon changed');
       polygonPropsRef.current = {
         position: position,
         innerPositions: innerPositions,
@@ -4544,14 +4539,19 @@
         simplifyTolerance: simplifyTolerance,
         lastReapeated: lastReapeated
       };
-      renderPolygonBase();
+      calculatePolygonBase(true); // console.log('PolygonMarker useEffect');
     }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
 
     var _m = React.useState(true),
         mapVisible = _m[0],
         setMapVisible = _m[1];
 
-    var renderPolygonBase = React.useCallback(function () {
+    var renderInfoRef = React.useRef({
+      offset: [],
+      innerOffset: [],
+      startPosition: undefined
+    });
+    var calculatePolygonBase = React.useCallback(function (renderNow) {
       // console.log('renderPolygonBase');
       var _a = polygonPropsRef.current,
           position = _a.position,
@@ -4575,7 +4575,7 @@
         return controller instanceof NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
       });
       var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
-      setOffsets(simplified); //inner path
+      renderInfoRef.current.offset = simplified; //inner path
 
       var innerPath = [];
 
@@ -4589,27 +4589,39 @@
           var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
           innerPath.push(simplified_1);
         }
+      }
 
-        setInnerOffsets(innerPath);
-      } //start point
-
+      renderInfoRef.current.innerOffset = innerPath; //start point
 
       var startPosition = maxLat && minLng ? new Position(maxLat, minLng) : undefined;
-      setPolygonStart(startPosition);
+      renderInfoRef.current.startPosition = startPosition;
+
+      if (renderNow) {
+        renderPolygon();
+      }
+    }, []);
+    var renderPolygon = React.useCallback(function () {
+      // console.log('render', renderInfoRef.current.offset);
+      setOffsets(renderInfoRef.current.offset);
+      setInnerOffsets(renderInfoRef.current.innerOffset);
+      setPolygonStart(renderInfoRef.current.startPosition);
     }, []);
     return React__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper, {
       position: polygonStart,
       visible: visible,
       disablePointerEvent: true,
       zIndex: zIndex,
+      debug: debug,
       debugLabel: debugLabel
-    }, mapVisible && React__default["default"].createElement(SVGPolygon, {
+    }, React__default["default"].createElement(SVGPolygon, {
       path: offsets,
       innerPath: innerOffsets,
       mode: mode,
       background: background,
       shapeProperties: shapeProperties,
-      svgProperties: svgProperties
+      svgProperties: tslib.__assign({
+        display: mapVisible ? '' : 'none'
+      }, svgProperties)
     }, children)));
   }
 

package/package.json

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