@mint-ui/map 0.7.4-beta → 0.8.0-beta

package/dist/index.es.js

@@ -473,23 +473,23 @@ function () {
   return PolygonCalculator;
 }();
 
-/**
- * 좌표값
- * @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;
@@ -597,15 +597,15 @@ function () {
 
   return Bounds;
 }();
-/**
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
  */
 
 var Offset =
 /** @class */
 function () {
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
   function Offset(x, y) {
     this.x = x;
@@ -1136,12 +1136,12 @@ function () {
   MintMapController.prototype.getRandomFunctionName = function (prefix) {
     return "".concat(prefix, "_").concat(v4().replace(/-/g, '_'));
   };
-  /**
-   * URL 빌더 메서드
-   *
-   * @param {string} baseUrl: 기본 URL
-   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
-   * @returns {string} URL
+  /**
+   * URL 빌더 메서드
+   *
+   * @param {string} baseUrl: 기본 URL
+   * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
+   * @returns {string} URL
    */
 
 
@@ -1154,9 +1154,9 @@ function () {
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
   };
-  /**
-   * 쓰로틀링 처리
-   * @returns
+  /**
+   * 쓰로틀링 처리
+   * @returns
    */
 
 
@@ -1515,7 +1515,7 @@ function (_super) {
 
     _this.type = 'naver';
     _this.map = null;
-    _this.scriptUrl = 'https://openapi.map.naver.com/openapi/v3/maps.js';
+    _this.scriptUrl = 'https://oapi.map.naver.com/openapi/v3/maps.js';
     _this.scriptModules = ['drawing']; //  , 'geocoder' , 'panorama' , 'visualization']
 
     _this.mapEvent = new MapEvent();
@@ -1750,11 +1750,11 @@ function (_super) {
       var map = marker.native.getMap();
 
       if (map) {
-        /** 중요!!!!
-         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
-         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
-         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
-         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+        /** 중요!!!!
+         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
         */
         //Position
         if (options.position && options.position instanceof Position) {
@@ -3494,13 +3494,13 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-    /**
-     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-     * - 가장 확대된 값 : 1
-     * - 가장 축소된 값 : 14
-     *
-     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
     */
     var mapValue = this.getBaseToMapZoom(value);
 
@@ -3692,32 +3692,41 @@ var DEFAULT_CENTER = {
   lat: 37.5036845,
   lng: 127.0448698
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MintMapProps} MintMapProps
- *
- * @returns {JSX.Element} JSX
+var DEFAULT_ZOOM_LEVEL = 12;
+var DEFAULT_MAP_BASE_CONFIG = {
+  center: DEFAULT_CENTER,
+  zoomLevel: DEFAULT_ZOOM_LEVEL
+};
+
+function makeBaseProps(base) {
+  !base.center && (base.center = DEFAULT_CENTER);
+  !base.zoomLevel && (base.zoomLevel = DEFAULT_ZOOM_LEVEL);
+  return base;
+}
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MintMapProps} MintMapProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
+
 function MintMap(_a) {
   var mapLoadingComponent = _a.mapLoadingComponent,
       _b = _a.dissolveEffectWhenLoaded,
       dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
       mapType = _a.mapType,
       children = _a.children,
-      _c = _a.base,
-      base = _c === void 0 ? {
-    center: DEFAULT_CENTER,
-    zoomLevel: 12
-  } : _c,
+      base = _a.base,
       props = __rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
 
+  var mapBaseConfig = base ? makeBaseProps(base) : DEFAULT_MAP_BASE_CONFIG;
   var loadingRef = useRef(null);
 
-  var _d = useState(),
-      controller = _d[0],
-      setController = _d[1];
+  var _c = useState(),
+      controller = _c[0],
+      setController = _c[1];
 
   var loading = useMemo(function () {
     return mapLoadingComponent ? mapLoadingComponent() : React.createElement(React.Fragment, null);
@@ -3734,15 +3743,15 @@ function MintMap(_a) {
       var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
         mapType: mapType
       }, props), {
-        base: base
+        base: mapBaseConfig
       })) : mapType === 'google' ? new GoogleMintMapController(__assign(__assign({
         mapType: mapType
       }, props), {
-        base: base
+        base: mapBaseConfig
       })) : mapType === 'kakao' ? new KakaoMintMapController(__assign(__assign({
         mapType: mapType
       }, props), {
-        base: base
+        base: mapBaseConfig
       })) : null;
       newController_1 && (prevController.current = newController_1);
 
@@ -3778,7 +3787,7 @@ function MintMap(_a) {
   }), React.createElement(MintMapCore, __assign({
     mapType: mapType
   }, props, {
-    base: base
+    base: mapBaseConfig
   }), children)) : React.createElement(React.Fragment, null, dissolveEffectWhenLoaded && React.createElement("div", {
     ref: function (refs) {
       loadingRef.current = refs;
@@ -3859,8 +3868,8 @@ var Marker =
 /** @class */
 function (_super) {
   __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
+  /**
+   * 지도에 표시할 마커정보
    */
 
 
@@ -3878,8 +3887,8 @@ var Polyline =
 /** @class */
 function (_super) {
   __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3897,8 +3906,8 @@ var Polygon =
 /** @class */
 function (_super) {
   __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3908,8 +3917,8 @@ function (_super) {
     _this.options = options;
     return _this;
   }
-  /**
-   * 폴리곤의 중점을 구한다.
+  /**
+   * 폴리곤의 중점을 구한다.
    */
 
 
@@ -4329,12 +4338,12 @@ var getMarkersFitPosition = function (containerPosition, containerSize, markerPo
 
   return 0;
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 
@@ -4504,12 +4513,12 @@ function MapMarkerWrapper(_a) {
   return createPortal(children, divElement);
 }
 
-/**
- * CircleMarker
- *
- * @param {CircleMarkerProps} CircleMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * CircleMarker
+ *
+ * @param {CircleMarkerProps} CircleMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function CircleMarker(_a) {
@@ -4625,12 +4634,12 @@ function CircleMarker(_a) {
   }, children)));
 }
 
-/**
- *PolygonMarker
- *
- * @param {PolygonMarkerProps} PolygonMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function PolygonMarker(_a) {
@@ -4799,12 +4808,12 @@ function PolygonMarker(_a) {
   }, children)));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolygonWrapper(_a) {
@@ -5250,12 +5259,12 @@ var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-m
 styleInject(css_248z);
 
 var cn = classNames.bind(styles);
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapControlWrapper(_a) {
@@ -5285,12 +5294,12 @@ function MapControlWrapper(_a) {
   }, children));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolylineWrapper(_a) {
@@ -5331,12 +5340,12 @@ var console$1 = {
   log: function () {
   }
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasWrapper(_a) {
@@ -5655,12 +5664,12 @@ function MapCanvasWrapper(_a) {
   }), renderFlag && React.createElement(React.Fragment, null));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasMarkerWrapper(_props) {