@mint-ui/map 0.7.2-beta → 0.7.4-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
    */
 
 
@@ -1197,6 +1197,58 @@ function () {
     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();
   };
@@ -1698,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) {
@@ -1900,10 +1952,10 @@ function (_super) {
 
             var _this = this;
 
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
 
-            return __generator(this, function (_e) {
-              switch (_e.label) {
+            return __generator(this, function (_g) {
+              switch (_g.label) {
                 case 0:
                   //이미 생성했으면 
                   //1. divElement 가 그대로인 경우 기존 map 객체 리턴
@@ -1927,9 +1979,9 @@ function (_super) {
                   , this.loadMapApi()];
 
                 case 1:
-                  _e.sent();
+                  _g.sent();
 
-                  _e.label = 2;
+                  _g.label = 2;
 
                 case 2:
                   options = {
@@ -1962,7 +2014,9 @@ function (_super) {
                   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);
@@ -2077,6 +2131,13 @@ function (_super) {
     (_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);
@@ -2612,10 +2673,10 @@ function (_super) {
 
             var _this = this;
 
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
 
-            return __generator(this, function (_e) {
-              switch (_e.label) {
+            return __generator(this, function (_g) {
+              switch (_g.label) {
                 case 0:
                   //이미 생성했으면 
                   //1. divElement 가 그대로인 경우 기존 map 객체 리턴
@@ -2637,9 +2698,9 @@ function (_super) {
                   , this.loadMapApi()];
 
                 case 1:
-                  _e.sent();
+                  _g.sent();
 
-                  _e.label = 2;
+                  _g.label = 2;
 
                 case 2:
                   map = new google.maps.Map(divElement, {
@@ -2653,7 +2714,9 @@ function (_super) {
                     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);
@@ -2762,6 +2825,15 @@ function (_super) {
     (_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;
 
@@ -3307,10 +3379,10 @@ function (_super) {
 
             var _this = this;
 
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
 
-            return __generator(this, function (_e) {
-              switch (_e.label) {
+            return __generator(this, function (_g) {
+              switch (_g.label) {
                 case 0:
                   if (!!this.mapApiLoaded) return [3
                   /*break*/
@@ -3320,9 +3392,9 @@ function (_super) {
                   , this.loadMapApi()];
 
                 case 1:
-                  _e.sent();
+                  _g.sent();
 
-                  _e.label = 2;
+                  _g.label = 2;
 
                 case 2:
                   options = {
@@ -3351,7 +3423,9 @@ function (_super) {
                   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
@@ -3420,13 +3494,13 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-    /**
-     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-     * - 가장 확대된 값 : 1
-     * - 가장 축소된 값 : 14
-     *
-     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
     */
     var mapValue = this.getBaseToMapZoom(value);
 
@@ -3486,6 +3560,13 @@ function (_super) {
     (_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);
   };
@@ -3611,12 +3692,12 @@ var DEFAULT_CENTER = {
   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) {
@@ -3778,8 +3859,8 @@ var Marker =
 /** @class */
 function (_super) {
   __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
+  /**
+   * 지도에 표시할 마커정보
    */
 
 
@@ -3797,8 +3878,8 @@ var Polyline =
 /** @class */
 function (_super) {
   __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3816,8 +3897,8 @@ var Polygon =
 /** @class */
 function (_super) {
   __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3827,8 +3908,8 @@ function (_super) {
     _this.options = options;
     return _this;
   }
-  /**
-   * 폴리곤의 중점을 구한다.
+  /**
+   * 폴리곤의 중점을 구한다.
    */
 
 
@@ -4248,12 +4329,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
  */
 
 
@@ -4423,12 +4504,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) {
@@ -4544,12 +4625,12 @@ function CircleMarker(_a) {
   }, children)));
 }
 
-/**
- *PolygonMarker
- *
- * @param {PolygonMarkerProps} PolygonMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function PolygonMarker(_a) {
@@ -4718,12 +4799,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) {
@@ -5169,12 +5250,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) {
@@ -5204,12 +5285,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) {
@@ -5250,12 +5331,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) {
@@ -5574,12 +5655,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) {