@mint-ui/map 0.3.5-beta → 0.3.7-beta

package/dist/components/mint-map/MintMap.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="google.maps" />
 import { PropsWithChildren } from "react";
 import { MintMapController } from "./core/MintMapController";
-export declare type MapType = 'naver' | 'google';
+export declare type MapType = 'naver' | 'google' | 'kakao';
 export declare type MapVendorType = naver.maps.Map | google.maps.Map;
 export interface MintMapProps extends MintMapEvents {
     mapType: MapType | null;
@@ -10,9 +10,14 @@ export interface MintMapProps extends MintMapEvents {
     mapId?: string;
     base?: BaseProps;
     visible?: boolean;
+    center?: Position;
+    zoomLevel?: number;
+    draggable?: boolean;
+    keyboardShortcuts?: boolean;
     markerCache?: boolean;
     markerCachePoolSize?: number;
     boundsChangeThrottlingTime?: number;
+    mapLoadingComponent?: () => JSX.Element;
 }
 export interface MintMapEvents {
     onBoundsChanged?: (bounds: Bounds) => void;
@@ -26,6 +31,7 @@ export declare class Position {
     lng: number;
     offset?: Offset;
     constructor(lat: number, lng: number);
+    static equals(pos1: Position, pos2: Position): boolean;
 }
 export declare class Bounds {
     nw: Position;
@@ -93,4 +99,4 @@ export declare class Polygon extends Drawable {
     constructor(options: PolygonOptions);
     getCenter(): Position;
 }
-export declare function MintMap({ mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;
+export declare function MintMap({ mapLoadingComponent, mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/MintMap.js

@@ -11,6 +11,7 @@ var MintMapProvider = require('./core/provider/MintMapProvider.js');
 var calculate = require('./core/util/calculate.js');
 var NaverMintMapController = require('./naver/NaverMintMapController.js');
 var GoogleMintMapController = require('./google/GoogleMintMapController.js');
+var KakaoMintMapController = require('./kakao/KakaoMintMapController.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,6 +26,10 @@ var Position = function () {
     this.lng = lng;
   }
 
+  Position.equals = function (pos1, pos2) {
+    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+  };
+
   return Position;
 }();
 
@@ -189,19 +194,25 @@ var DEFAULT_CENTER = {
   lng: 127.0448698
 };
 function MintMap(_a) {
-  var mapType = _a.mapType,
+  var mapLoadingComponent = _a.mapLoadingComponent,
+      mapType = _a.mapType,
       children = _a.children,
       _b = _a.base,
       base = _b === void 0 ? {
     center: DEFAULT_CENTER,
     zoomLevel: 12
   } : _b,
-      props = tslib.__rest(_a, ["mapType", "children", "base"]);
+      props = tslib.__rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
 
   var _c = React.useState(),
       controller = _c[0],
       setController = _c[1];
 
+  var loading = React.useMemo(function () {
+    return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(PointLoading, {
+      text: "Loading"
+    });
+  }, [mapLoadingComponent]);
   React.useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
@@ -213,6 +224,10 @@ function MintMap(_a) {
         mapType: mapType
       }, props), {
         base: base
+      })) : mapType === 'kakao' ? new KakaoMintMapController.KakaoMintMapController(tslib.__assign(tslib.__assign({
+        mapType: mapType
+      }, props), {
+        base: base
       })) : null;
 
       if (newController_1) {
@@ -232,9 +247,7 @@ function MintMap(_a) {
     mapType: mapType
   }, props, {
     base: base
-  }), children)) : React__default["default"].createElement(PointLoading, {
-    text: "Loading"
-  }));
+  }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, loading));
 }
 
 function PointLoading(_a) {

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -10,6 +10,8 @@ export declare abstract class MintMapController {
     abstract panningTo(targetCenter: Position): void;
     abstract getZoomLevel(): number;
     abstract setZoomLevel(zoom: number): void;
+    abstract getCenter(): Position;
+    abstract setCenter(position: Position): void;
     abstract createMarker(marker: Marker): void;
     abstract updateMarker(marker: Marker, options: MarkerOptions): void;
     abstract clearDrawable(drawable: Drawable): boolean;
@@ -33,4 +35,6 @@ export declare abstract class MintMapController {
     }): string;
     private processedTime;
     checkBoundsChangeThrottleTime(): boolean;
+    getBaseToMapZoom(zoomBase: number): number;
+    getMapToBaseZoom(mapZoom: number): number;
 }

package/dist/components/mint-map/core/MintMapController.js

@@ -65,7 +65,223 @@ var MintMapController = function () {
     }
   };
 
+  MintMapController.prototype.getBaseToMapZoom = function (zoomBase) {
+    var baseMap = MapZoomInfo.BASE_TO_MAP.get(zoomBase);
+
+    if (baseMap) {
+      var mapZoomInfo = baseMap.get(this.getMapType());
+
+      if (mapZoomInfo) {
+        return mapZoomInfo.level;
+      }
+    }
+
+    throw new Error("[getBaseToMapZoom][".concat(zoomBase, "] is not valid zoom level"));
+  };
+
+  MintMapController.prototype.getMapToBaseZoom = function (mapZoom) {
+    var baseZoom = MapZoomInfo.MAP_TO_BASE.get(this.getMapType() + mapZoom);
+
+    if (baseZoom) {
+      return baseZoom;
+    }
+
+    throw new Error("[getMapToBaseZoom][".concat(mapZoom, "] is not valid zoom level"));
+  };
+
   return MintMapController;
 }();
 
+var MapZoomInfo = function () {
+  function MapZoomInfo() {}
+
+  MapZoomInfo.BASE_TO_MAP = new Map([[1, new Map([['google', {
+    level: 1
+  }], ['naver', {
+    level: 6
+  }], ['kakao', {
+    level: 14
+  }]])], [2, new Map([['google', {
+    level: 2,
+    distance: 2000,
+    unit: 'km'
+  }], ['naver', {
+    level: 6
+  }], ['kakao', {
+    level: 14
+  }]])], [3, new Map([['google', {
+    level: 3,
+    distance: 1000,
+    unit: 'km'
+  }], ['naver', {
+    level: 6
+  }], ['kakao', {
+    level: 14
+  }]])], [4, new Map([['google', {
+    level: 4,
+    distance: 500,
+    unit: 'km'
+  }], ['naver', {
+    level: 6
+  }], ['kakao', {
+    level: 14
+  }]])], [5, new Map([['google', {
+    level: 5,
+    distance: 200,
+    unit: 'km'
+  }], ['naver', {
+    level: 6
+  }], ['kakao', {
+    level: 14
+  }]])], [6, new Map([['google', {
+    level: 6,
+    distance: 100,
+    unit: 'km'
+  }], ['naver', {
+    level: 6
+  }], ['kakao', {
+    level: 14
+  }]])], [7, new Map([['google', {
+    level: 7,
+    distance: 50,
+    unit: 'km'
+  }], ['naver', {
+    level: 7
+  }], ['kakao', {
+    level: 13
+  }]])], [8, new Map([['google', {
+    level: 8,
+    distance: 20,
+    unit: 'km'
+  }], ['naver', {
+    level: 8
+  }], ['kakao', {
+    level: 12
+  }]])], [9, new Map([['google', {
+    level: 9,
+    distance: 10,
+    unit: 'km'
+  }], ['naver', {
+    level: 9
+  }], ['kakao', {
+    level: 11
+  }]])], [10, new Map([['google', {
+    level: 10,
+    distance: 5,
+    unit: 'km'
+  }], ['naver', {
+    level: 10
+  }], ['kakao', {
+    level: 10
+  }]])], [11, new Map([['google', {
+    level: 11,
+    distance: 2,
+    unit: 'km'
+  }], ['naver', {
+    level: 11
+  }], ['kakao', {
+    level: 9
+  }]])], [12, new Map([['google', {
+    level: 12,
+    distance: 1,
+    unit: 'km'
+  }], ['naver', {
+    level: 12
+  }], ['kakao', {
+    level: 8
+  }]])], [13, new Map([['google', {
+    level: 13,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 13
+  }], ['kakao', {
+    level: 7
+  }]])], [14, new Map([['google', {
+    level: 14,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 14
+  }], ['kakao', {
+    level: 6
+  }]])], [15, new Map([['google', {
+    level: 15,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 15
+  }], ['kakao', {
+    level: 5
+  }]])], [16, new Map([['google', {
+    level: 16,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 16
+  }], ['kakao', {
+    level: 4
+  }]])], [17, new Map([['google', {
+    level: 17,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 17
+  }], ['kakao', {
+    level: 3
+  }]])], [18, new Map([['google', {
+    level: 18,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 18
+  }], ['kakao', {
+    level: 2
+  }]])], [19, new Map([['google', {
+    level: 19,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 19
+  }], ['kakao', {
+    level: 1
+  }]])], [20, new Map([['google', {
+    level: 20,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 20
+  }], ['kakao', {
+    level: 1
+  }]])], [21, new Map([['google', {
+    level: 21,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 21
+  }], ['kakao', {
+    level: 1
+  }]])], [22, new Map([['google', {
+    level: 22,
+    distance: 500,
+    unit: 'm'
+  }], ['naver', {
+    level: 21
+  }], ['kakao', {
+    level: 1
+  }]])]]);
+  MapZoomInfo.MAP_TO_BASE = new Map(tslib.__spreadArray([], Array.from(MapZoomInfo.BASE_TO_MAP.entries()).map(function (item) {
+    var base = item[0];
+    var mapZoom = item[1];
+    var result = [];
+    mapZoom.forEach(function (value, key) {
+      result.push([key + value.level, base]);
+    });
+    return result;
+  }).flatMap(function (a) {
+    return a;
+  }), true));
+  return MapZoomInfo;
+}();
+
 exports.MintMapController = MintMapController;

package/dist/components/mint-map/core/MintMapCore.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from "react";
 import { MintMapProps } from "../MintMap";
-export declare function MintMapCore({ onLoad, visible, base, children }: PropsWithChildren<MintMapProps>): JSX.Element;
+export declare function MintMapCore({ onLoad, visible, zoomLevel, center, children }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/core/MintMapCore.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var classNames = require('classnames/bind');
 var React = require('react');
+var MintMap = require('../MintMap.js');
 var MintMapProvider = require('./provider/MintMapProvider.js');
 var MintMapCore_module = require('./MintMapCore.module.scss.js');
 
@@ -20,7 +21,8 @@ function MintMapCore(_a) {
   var onLoad = _a.onLoad,
       _b = _a.visible,
       visible = _b === void 0 ? true : _b,
-      base = _a.base,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
       children = _a.children;
   var controller = MintMapProvider.useMintMapController();
   var elementRef = React.useRef(null);
@@ -59,21 +61,30 @@ function MintMapCore(_a) {
     };
   }, [controller, elementRef]);
   React.useEffect(function () {
-    if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+    if (zoomLevel && controller && mapInitialized) {
       var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-      if (prevZoomLevel !== base.zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
       }
     }
-  }, [base]);
-  return React__default["default"].createElement("div", {
-    className: cn('mint-map-root'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
+  }, [zoomLevel]);
+  React.useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+
+      if (!MintMap.Position.equals(prevCenter, center)) {
+        controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
     }
+  }, [center]);
+  return React__default["default"].createElement("div", {
+    className: cn('mint-map-root')
   }, mapInitialized && children, React__default["default"].createElement("div", {
     className: cn('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
     ref: elementRef
   }));
 }

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -12,6 +12,8 @@ var MarkerMovingHook = require('../hooks/MarkerMovingHook.js');
 var offsetCalibration = function (mapType, divElement, options) {
   if (mapType === 'google') {
     divElement.style.transform = "translate(50%, 100%) translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
+  } else if (mapType === 'kakao') {
+    divElement.style.transform = "translate(50%, 50%) translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
   }
 };
 
@@ -93,7 +95,7 @@ function MapMarkerWrapper(_a) {
     divElement.addEventListener('click', onClickHandler);
     divElement.addEventListener('mouseover', onMouseOverHandler);
     return function () {
-      if (divCloneRef.current && endAnimationClassName) {
+      if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
         divCloneRef.current.classList.add(endAnimationClassName);
 
         var aniListener_1 = function () {

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -33,4 +33,6 @@ export declare class GoogleMintMapController extends MintMapController {
     panningTo(targetCenter: Position): void;
     getZoomLevel(): number;
     setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
 }

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -396,7 +396,8 @@ var GoogleMintMapController = function (_super) {
                     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,
                     disableDefaultUI: true,
-                    gestureHandling: 'greedy',
+                    gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
                   this.map = map;
@@ -468,6 +469,16 @@ var GoogleMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
   };
 
+  GoogleMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  GoogleMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return GoogleMintMapController;
 }(MintMapController.MintMapController);
 

package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="kakaomaps" />
+import { MintMapController } from "../core/MintMapController";
+import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
+import { ObjectPool } from '@mint-ui/tools';
+export declare class KakaoMintMapController extends MintMapController {
+    type: MapType;
+    map: kakao.maps.Map | null;
+    scriptUrl: string;
+    scriptModules: string[];
+    markerPool?: ObjectPool<kakao.maps.CustomOverlay>;
+    constructor(props: MintMapProps);
+    private initMarkerPool;
+    polylineEvents: string[];
+    createPolyline(polyline: Polyline): void;
+    updatePolyline(polyline: Polyline, options: PolylineOptions): void;
+    polygonEvents: string[];
+    createPolygon(polygon: Polygon): void;
+    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    markerEvents: string[];
+    createMarker(marker: Marker): void;
+    updateMarker(marker: Marker, options: MarkerOptions): void;
+    private markerMaxZIndex;
+    private getMaxZIndex;
+    setMarkerZIndex(marker: Marker, zIndex: number): void;
+    markerToTheTop(marker: Marker): void;
+    clearDrawable(drawable: Drawable): boolean;
+    private dragStartPoint;
+    private dragged;
+    isMapDragged(): boolean;
+    setMapDragged(value: boolean): void;
+    loadMapApi(): Promise<boolean>;
+    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
+    private getSafeZoomValue;
+    destroyMap(): void;
+    getCurrBounds(): Bounds;
+    panningTo(targetCenter: Position): void;
+    getZoomLevel(): number;
+    setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
+    private positionToLatLng;
+    private latLngToPosition;
+}