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

package/dist/index.umd.js

@@ -477,23 +477,23 @@
     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;
@@ -601,15 +601,15 @@
 
     return Bounds;
   }();
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
 
   var Offset =
   /** @class */
   function () {
-    /**
-     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+    /**
+     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
      */
     function Offset(x, y) {
       this.x = x;
@@ -1140,12 +1140,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
      */
 
 
@@ -1158,9 +1158,9 @@
       }).join('&');
       return "".concat(baseUrl, "?").concat(params);
     };
-    /**
-     * 쓰로틀링 처리
-     * @returns
+    /**
+     * 쓰로틀링 처리
+     * @returns
      */
 
 
@@ -1201,6 +1201,58 @@
       throw new Error("[getMapToBaseZoom][".concat(mapZoom, "] is not valid zoom level"));
     };
 
+    MintMapController.prototype.focusPositionsToFitViewport = function (positions) {
+      var map = this; // positions 바운더리 구하기
+
+      var markerBounds = PolygonCalculator.getRegionInfo(positions);
+
+      if (!markerBounds.centerLat || !markerBounds.centerLng || !markerBounds.minLat || !markerBounds.maxLat || !markerBounds.minLng || !markerBounds.maxLng) {
+        return;
+      } // 이동해야할 센터 좌표
+
+
+      var toCenter = new Position(markerBounds.centerLat, markerBounds.centerLng); // 센터로 이동
+
+      map.setCenter(toCenter); // positions 바운더리의 폴리곤 값
+
+      var markerBoundsToPolygon = [new Position(markerBounds.minLat, markerBounds.minLng), new Position(markerBounds.minLat, markerBounds.maxLng), new Position(markerBounds.maxLat, markerBounds.maxLng), new Position(markerBounds.maxLat, markerBounds.minLng)]; // 적정 줌레벨 구하기
+
+      var zoomLevelResult = map.getZoomLevel();
+      var currZoomLevel = zoomLevelResult;
+      var iterCnt = 0;
+      var direction = undefined;
+
+      while (iterCnt < 23) {
+        //최대 줌레벨 갯수 만큼만 반복...
+        iterCnt += 1; // 줌 레벨 변경
+
+        map.setZoomLevel(currZoomLevel); // 현재 바운더리 구하기
+
+        var mapBounds = map.getCurrBounds(); // 현재 맵에 바운더리 포함된다면 줌레벨 더해서 반복 체크
+
+        if (mapBounds.includes(markerBoundsToPolygon)) {
+          if (direction === '-') {
+            // 직전에 이미 빼고있는 상태였다면 여기서 종료
+            break;
+          }
+
+          direction = '+';
+          currZoomLevel += 1;
+        } else {
+          // 포함되지 않으면
+          if (direction === '+') {
+            // 직전에 이미 더한 상태였다면 직전 줌레벨로 종료
+            currZoomLevel -= 1;
+            map.setZoomLevel(currZoomLevel);
+            break;
+          } else {
+            direction = '-';
+            currZoomLevel -= 1;
+          }
+        }
+      }
+    };
+
     MintMapController.prototype.printStatus = function () {
       Status.print();
     };
@@ -1702,11 +1754,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) {
@@ -1904,10 +1956,10 @@
 
               var _this = this;
 
-              var _a, _b, _c, _d;
+              var _a, _b, _c, _d, _e, _f;
 
-              return tslib.__generator(this, function (_e) {
-                switch (_e.label) {
+              return tslib.__generator(this, function (_g) {
+                switch (_g.label) {
                   case 0:
                     //이미 생성했으면 
                     //1. divElement 가 그대로인 경우 기존 map 객체 리턴
@@ -1931,9 +1983,9 @@
                     , this.loadMapApi()];
 
                   case 1:
-                    _e.sent();
+                    _g.sent();
 
-                    _e.label = 2;
+                    _g.label = 2;
 
                   case 2:
                     options = {
@@ -1966,7 +2018,9 @@
                     options.maxZoom = maxZoom;
                     divElement.innerHTML = '';
                     map = new naver.maps.Map(divElement, options);
-                    this.map = map; //@ts-ignore
+                    this.map = map; //맵 커서 초기화
+
+                    ((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
 
                     map.addListener('mousedown', function () {
                       _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
@@ -2081,6 +2135,13 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
     };
 
+    NaverMintMapController.prototype.setMapCursor = function (cursor) {
+      var _a;
+
+      var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+      target && (target.style.cursor = cursor);
+    };
+
     NaverMintMapController.prototype.naverPositionToOffset = function (position) {
       if (!this.map) {
         return new Offset(0, 0);
@@ -2616,10 +2677,10 @@
 
               var _this = this;
 
-              var _a, _b, _c, _d;
+              var _a, _b, _c, _d, _e, _f;
 
-              return tslib.__generator(this, function (_e) {
-                switch (_e.label) {
+              return tslib.__generator(this, function (_g) {
+                switch (_g.label) {
                   case 0:
                     //이미 생성했으면 
                     //1. divElement 가 그대로인 경우 기존 map 객체 리턴
@@ -2641,9 +2702,9 @@
                     , this.loadMapApi()];
 
                   case 1:
-                    _e.sent();
+                    _g.sent();
 
-                    _e.label = 2;
+                    _g.label = 2;
 
                   case 2:
                     map = new google.maps.Map(divElement, {
@@ -2657,7 +2718,9 @@
                       keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                       clickableIcons: false
                     });
-                    this.map = map; //@ts-ignore
+                    this.map = map; //맵 커서 초기화
+
+                    ((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
 
                     map.addListener('mousedown', function () {
                       _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
@@ -2766,6 +2829,15 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
     };
 
+    GoogleMintMapController.prototype.setMapCursor = function (cursor) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setOptions({
+        draggingCursor: cursor,
+        draggableCursor: cursor
+      });
+    };
+
     GoogleMintMapController.prototype.addEventListener = function (eventName, callback) {
       var _this = this;
 
@@ -3311,10 +3383,10 @@
 
               var _this = this;
 
-              var _a, _b, _c, _d;
+              var _a, _b, _c, _d, _e, _f;
 
-              return tslib.__generator(this, function (_e) {
-                switch (_e.label) {
+              return tslib.__generator(this, function (_g) {
+                switch (_g.label) {
                   case 0:
                     if (!!this.mapApiLoaded) return [3
                     /*break*/
@@ -3324,9 +3396,9 @@
                     , this.loadMapApi()];
 
                   case 1:
-                    _e.sent();
+                    _g.sent();
 
-                    _e.label = 2;
+                    _g.label = 2;
 
                   case 2:
                     options = {
@@ -3355,7 +3427,9 @@
                     map = new kakao.maps.Map(divElement, options);
                     map.setMaxLevel(minZoom);
                     map.setMinLevel(maxZoom);
-                    this.map = map; //@ts-ignore
+                    this.map = map; //맵 커서 초기화
+
+                    ((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
                     // map.addListener('dragstart', (e)=>{
                     //   //console.log('map dragstart', e);
                     //   this.dragStartPoint[0] = e.domEvent.clientX
@@ -3424,13 +3498,13 @@
     };
 
     KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-      /**
-       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-       * - 가장 확대된 값 : 1
-       * - 가장 축소된 값 : 14
-       *
-       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+      /**
+       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+       * - 가장 확대된 값 : 1
+       * - 가장 축소된 값 : 14
+       *
+       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
       */
       var mapValue = this.getBaseToMapZoom(value);
 
@@ -3490,6 +3564,13 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(this.positionToLatLng(position));
     };
 
+    KakaoMintMapController.prototype.setMapCursor = function (cursor) {
+      var _a;
+
+      var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+      target && (target.style.cursor = cursor);
+    };
+
     KakaoMintMapController.prototype.positionToLatLng = function (pos) {
       return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : new kakao.maps.LatLng(0, 0);
     };
@@ -3615,12 +3696,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) {
@@ -3782,8 +3863,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Marker, _super);
-    /**
-     * 지도에 표시할 마커정보
+    /**
+     * 지도에 표시할 마커정보
      */
 
 
@@ -3801,8 +3882,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polyline, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3820,8 +3901,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polygon, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3831,8 +3912,8 @@
       _this.options = options;
       return _this;
     }
-    /**
-     * 폴리곤의 중점을 구한다.
+    /**
+     * 폴리곤의 중점을 구한다.
      */
 
 
@@ -4252,12 +4333,12 @@
 
     return 0;
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
 
@@ -4427,12 +4508,12 @@
     return reactDom.createPortal(children, divElement);
   }
 
-  /**
-   * CircleMarker
-   *
-   * @param {CircleMarkerProps} CircleMarkerProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * CircleMarker
+   *
+   * @param {CircleMarkerProps} CircleMarkerProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function CircleMarker(_a) {
@@ -4548,12 +4629,12 @@
     }, children)));
   }
 
-  /**
-   *PolygonMarker
-   *
-   * @param {PolygonMarkerProps} PolygonMarkerProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   *PolygonMarker
+   *
+   * @param {PolygonMarkerProps} PolygonMarkerProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function PolygonMarker(_a) {
@@ -4722,12 +4803,12 @@
     }, children)));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolygonWrapper(_a) {
@@ -5173,12 +5254,12 @@
   styleInject__default["default"](css_248z);
 
   var cn = classNames__default["default"].bind(styles);
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapControlWrapper(_a) {
@@ -5208,12 +5289,12 @@
     }, children));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolylineWrapper(_a) {
@@ -5254,12 +5335,12 @@
     log: function () {
     }
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapCanvasWrapper(_a) {
@@ -5578,12 +5659,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) {