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

package/dist/index.umd.js

@@ -43,7 +43,8 @@
     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 = useMintMapController();
     var elementRef = React.useRef(null);
@@ -82,21 +83,30 @@
       };
     }, [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$2('mint-map-root'),
-      style: {
-        visibility: visible ? 'inherit' : 'hidden'
+    }, [zoomLevel]);
+    React.useEffect(function () {
+      if (center && controller && mapInitialized) {
+        var prevCenter = controller.getCenter();
+
+        if (!Position.equals(prevCenter, center)) {
+          controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+        }
       }
+    }, [center]);
+    return React__default["default"].createElement("div", {
+      className: cn$2('mint-map-root')
     }, mapInitialized && children, React__default["default"].createElement("div", {
       className: cn$2('mint-map-container'),
+      style: {
+        visibility: visible ? 'inherit' : 'hidden'
+      },
       ref: elementRef
     }));
   }
@@ -381,9 +391,225 @@
       }
     };
 
+    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;
+  }();
+
   function waiting(evaluation, timeoutSeconds) {
     return tslib.__awaiter(this, void 0, void 0, function () {
       var max;
@@ -796,6 +1022,9 @@
                     options = {
                       center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                       zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                      draggable: this.mapProps.draggable === false ? false : true,
+                      scrollWheel: this.mapProps.draggable === false ? false : true,
+                      keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                       logoControl: false,
                       mapDataControl: false,
                       mapTypeControl: false,
@@ -917,6 +1146,16 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
     };
 
+    NaverMintMapController.prototype.getCenter = function () {
+      return this.getCurrBounds().getCenter();
+    };
+
+    NaverMintMapController.prototype.setCenter = function (position) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+    };
+
     return NaverMintMapController;
   }(MintMapController);
 
@@ -1309,7 +1548,8 @@
                       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;
@@ -1381,9 +1621,522 @@
       (_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);
 
+  var KakaoMintMapController = function (_super) {
+    tslib.__extends(KakaoMintMapController, _super);
+
+    function KakaoMintMapController(props) {
+      var _this = _super.call(this, props) || this;
+
+      _this.type = 'kakao';
+      _this.map = null;
+      _this.scriptUrl = 'https://dapi.kakao.com/v2/maps/sdk.js';
+      _this.scriptModules = ['services', 'clusterer'];
+      _this.polylineEvents = ['mouseover', 'mouseout'];
+      _this.polygonEvents = ['mouseover', 'mouseout'];
+      _this.markerEvents = ['click', 'mouseover', 'mouseout'];
+      _this.dragStartPoint = [0, 0];
+      _this.dragged = false;
+      console.log("".concat(_this.type, " controller loadded"));
+      return _this;
+    }
+
+    KakaoMintMapController.prototype.initMarkerPool = function () {
+      var _this = this;
+
+      if (!this.mapProps.markerCache) return;
+      this.markerPool = new tools.ObjectPool().setFactory(function () {
+        return new kakao.maps.CustomOverlay({
+          position: _this.positionToLatLng(new Position(0, 0)),
+          map: _this.map || undefined
+        });
+      }).setClear(function (item) {
+        item.setMap(null);
+      }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
+    };
+
+    KakaoMintMapController.prototype.createPolyline = function (polyline) {
+      var _this = this;
+
+      var _a = polyline.options,
+          position = _a.position,
+          _b = _a.lineColor,
+          lineColor = _b === void 0 ? 'blue' : _b,
+          _c = _a.lineSize,
+          lineSize = _c === void 0 ? 1 : _c,
+          _d = _a.lineOpacity,
+          lineOpacity = _d === void 0 ? 1 : _d;
+          _a.visible;
+          _a.editable;
+          var event = _a.event;
+
+      if (this.map && Array.isArray(position)) {
+        var path = position.map(function (elem) {
+          return _this.positionToLatLng(Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem);
+        });
+        var pol_1 = new kakao.maps.Polyline({
+          map: this.map,
+          path: path,
+          strokeColor: lineColor,
+          strokeWeight: lineSize,
+          strokeOpacity: lineOpacity
+        });
+        polyline.native = pol_1;
+        event && event.forEach(function (handler, key) {
+          if (_this.polylineEvents.includes(key)) {
+            kakao.maps.event.addListener(pol_1, key, handler);
+          }
+        });
+      }
+    };
+
+    KakaoMintMapController.prototype.updatePolyline = function (polyline, options) {
+      var _this = this;
+
+      if (polyline && polyline.native && polyline.native instanceof kakao.maps.Polyline) {
+        var path = void 0;
+
+        if (Array.isArray(options.position)) {
+          path = options.position.map(function (elem) {
+            return _this.positionToLatLng(Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem);
+          });
+        }
+
+        polyline.native.setOptions({
+          path: path || polyline.native.getPath(),
+          strokeColor: options.lineColor,
+          strokeWeight: options.lineSize,
+          strokeOpacity: options.lineOpacity
+        });
+      }
+    };
+
+    KakaoMintMapController.prototype.createPolygon = function (polygon) {
+      var _this = this;
+
+      var _a = polygon.options,
+          position = _a.position,
+          innerPositions = _a.innerPositions,
+          _b = _a.lineColor,
+          lineColor = _b === void 0 ? 'green' : _b,
+          _c = _a.lineSize,
+          lineSize = _c === void 0 ? 1 : _c,
+          _d = _a.lineOpacity,
+          lineOpacity = _d === void 0 ? 1 : _d,
+          _e = _a.fillColor,
+          fillColor = _e === void 0 ? 'lightgreen' : _e,
+          _f = _a.fillOpacity,
+          fillOpacity = _f === void 0 ? 0.5 : _f;
+          _a.visible;
+          _a.editable;
+          var event = _a.event;
+
+      if (this.map && Array.isArray(position)) {
+        var outLine = position.map(function (elem) {
+          return _this.positionToLatLng(Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem);
+        });
+        var path = [outLine];
+        innerPositions && path.push(innerPositions.map(function (inner) {
+          return _this.positionToLatLng(inner);
+        }));
+        var pol_2 = new kakao.maps.Polygon({
+          map: this.map,
+          path: path,
+          strokeColor: lineColor,
+          strokeWeight: lineSize,
+          strokeOpacity: lineOpacity,
+          fillColor: fillColor,
+          fillOpacity: fillOpacity
+        });
+        polygon.native = pol_2;
+        event && event.forEach(function (handler, key) {
+          if (_this.polygonEvents.includes(key)) {
+            kakao.maps.event.addListener(pol_2, key, handler);
+          }
+        });
+      }
+    };
+
+    KakaoMintMapController.prototype.updatePolygon = function (polygon, options) {
+      var _this = this;
+
+      if (polygon && polygon.native && polygon.native instanceof kakao.maps.Polygon) {
+        var paths = void 0;
+
+        if (Array.isArray(options.position)) {
+          var outLine = options.position.map(function (elem) {
+            return _this.positionToLatLng(Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem);
+          });
+          paths = [outLine];
+          options.innerPositions && paths.push.apply(paths, options.innerPositions.map(function (inner) {
+            return _this.positionToLatLng(inner);
+          }));
+        }
+
+        polygon.native.setOptions({
+          path: paths || polygon.native.getPath(),
+          strokeColor: options.lineColor,
+          strokeWeight: options.lineSize,
+          strokeOpacity: options.lineOpacity,
+          fillColor: options.fillColor,
+          fillOpacity: options.fillOpacity
+        });
+      }
+    };
+
+    KakaoMintMapController.prototype.createMarker = function (marker) {
+      var _this = this;
+
+      var _a;
+
+      if (this.map) {
+        var options = {
+          map: this.map,
+          position: this.positionToLatLng(marker.options.position)
+        };
+        marker.element && (options.content = marker.element);
+        var kakaoMarker_1;
+
+        if (this.mapProps.markerCache && this.markerPool) {
+          kakaoMarker_1 = this.markerPool.getPoolItem();
+          kakaoMarker_1.setVisible(true);
+          options.content && kakaoMarker_1.setContent(options.content);
+          marker.native = kakaoMarker_1;
+          this.updateMarker(marker, marker.options);
+        } else {
+          kakaoMarker_1 = new kakao.maps.CustomOverlay(options);
+          marker.options.visible !== undefined && kakaoMarker_1.setVisible(marker.options.visible);
+          marker.native = kakaoMarker_1;
+        }
+
+        ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
+          if (_this.markerEvents.includes(key)) {
+            kakao.maps.event.addListener(kakaoMarker_1, key, handler);
+          }
+        });
+      }
+    };
+
+    KakaoMintMapController.prototype.updateMarker = function (marker, options) {
+      if (marker && marker.native && marker.native instanceof kakao.maps.CustomOverlay) {
+        var map = marker.native.getMap();
+
+        if (map) {
+          if (options.position && options.position instanceof Position) {
+            marker.native.setPosition(this.positionToLatLng(options.position));
+          }
+
+          if (options.visible !== undefined) {
+            marker.native.setVisible(options.visible);
+          }
+        }
+      }
+    };
+
+    KakaoMintMapController.prototype.getMaxZIndex = function (increment, parent) {
+      if (increment === void 0) {
+        increment = 0;
+      }
+
+      if (this.map) {
+        var targetPane = parent;
+        var max = 0;
+
+        for (var i = 0; i < targetPane.childElementCount; i++) {
+          var elem = targetPane.children[i];
+
+          if (elem instanceof HTMLElement) {
+            var index = Number(elem.style.zIndex);
+
+            if (!isNaN(index) && index > max) {
+              max = index;
+            }
+          }
+        }
+
+        this.markerMaxZIndex = max + increment;
+        return this.markerMaxZIndex;
+      } else {
+        return this.markerMaxZIndex || 1;
+      }
+    };
+
+    KakaoMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+      if (this.map && marker.element && marker.element instanceof HTMLElement) {
+        var parent_1 = marker.element.parentElement;
+
+        if (parent_1) {
+          parent_1.style.zIndex = String(zIndex);
+        }
+      }
+    };
+
+    KakaoMintMapController.prototype.markerToTheTop = function (marker) {
+      if (this.map && marker.element && marker.element instanceof HTMLElement) {
+        var parent_2 = marker.element.parentElement;
+
+        if (parent_2) {
+          this.setMarkerZIndex(marker, this.getMaxZIndex(1, parent_2));
+        }
+      }
+    };
+
+    KakaoMintMapController.prototype.clearDrawable = function (drawable) {
+      var _this = this;
+
+      var _a, _b;
+
+      if (drawable && drawable.native && (drawable.native instanceof kakao.maps.CustomOverlay || drawable.native instanceof kakao.maps.Polyline || drawable.native instanceof kakao.maps.Polygon)) {
+        if (drawable.native instanceof kakao.maps.CustomOverlay) {
+          if (this.mapProps.markerCache && this.markerPool) {
+            drawable.native.setVisible(false);
+            (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
+          } else {
+            drawable.native.setMap(null);
+          }
+        } else {
+          drawable.native.setMap(null);
+        }
+
+        ((_b = drawable.options) === null || _b === void 0 ? void 0 : _b.event) && drawable.options.event.forEach(function (handler, key) {
+          if (_this.markerEvents.includes(key)) {
+            kakao.maps.event.removeListener(drawable.native, key, handler);
+          }
+        });
+        return true;
+      }
+
+      return false;
+    };
+
+    KakaoMintMapController.prototype.isMapDragged = function () {
+      return this.dragged;
+    };
+
+    KakaoMintMapController.prototype.setMapDragged = function (value) {
+      this.dragged = false;
+    };
+
+    KakaoMintMapController.prototype.loadMapApi = function () {
+      return tslib.__awaiter(this, void 0, void 0, function () {
+        var _this = this;
+
+        return tslib.__generator(this, function (_a) {
+          return [2, new Promise(function (resolve) {
+            return tslib.__awaiter(_this, void 0, void 0, function () {
+              var params, ok;
+              return tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                  case 0:
+                    params = {
+                      appkey: this.mapProps.mapKey,
+                      libraries: this.scriptModules.join(','),
+                      autoload: false
+                    };
+                    return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakaoscript')];
+
+                  case 1:
+                    _a.sent();
+
+                    window.kakao.maps.load();
+                    return [4, waiting(function () {
+                      return window.kakao.maps.Map ? true : false;
+                    })];
+
+                  case 2:
+                    ok = _a.sent();
+
+                    if (!ok) {
+                      throw new Error('kakao script api load failed!!');
+                    }
+
+                    this.mapApiLoaded = true;
+                    resolve(true);
+                    console.log("".concat(this.type, " map script loaded"));
+                    return [2];
+                }
+              });
+            });
+          })];
+        });
+      });
+    };
+
+    KakaoMintMapController.prototype.initializingMap = function (divElement) {
+      return tslib.__awaiter(this, void 0, void 0, function () {
+        var _this = this;
+
+        return tslib.__generator(this, function (_a) {
+          return [2, new Promise(function (resolve) {
+            return tslib.__awaiter(_this, void 0, void 0, function () {
+              var options, maxZoom, minZoom, map;
+
+              var _this = this;
+
+              var _a, _b, _c, _d;
+
+              return tslib.__generator(this, function (_e) {
+                switch (_e.label) {
+                  case 0:
+                    if (this.mapInitialized && this.map) {
+                      if (this.map.getElement() === divElement) {
+                        resolve(this.map);
+                        return [2];
+                      } else {
+                        this.map.destroy();
+                      }
+                    }
+
+                    if (!!this.mapApiLoaded) return [3, 2];
+                    return [4, this.loadMapApi()];
+
+                  case 1:
+                    _e.sent();
+
+                    _e.label = 2;
+
+                  case 2:
+                    options = {
+                      center: this.positionToLatLng((_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center),
+                      level: this.getBaseToMapZoom((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel),
+                      draggable: this.mapProps.draggable === false ? false : true,
+                      scrollWheel: this.mapProps.draggable === false ? false : true,
+                      keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true
+                    };
+                    maxZoom = 1;
+                    minZoom = 14;
+
+                    if ((_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.maxZoomLevel) {
+                      maxZoom = this.getSafeZoomValue(this.mapProps.base.maxZoomLevel);
+                    }
+
+                    if ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.minZoomLevel) {
+                      minZoom = this.getSafeZoomValue(this.mapProps.base.minZoomLevel);
+                    }
+
+                    if (minZoom < maxZoom) {
+                      minZoom = 14;
+                    }
+
+                    map = new kakao.maps.Map(divElement, options);
+                    map.setMaxLevel(minZoom);
+                    map.setMinLevel(maxZoom);
+                    this.map = map;
+                    map.addListener('idle', function (e) {
+                      _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                    });
+                    map.addListener('zoom_changed', function () {
+                      _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.getZoomLevel());
+                    });
+                    map.addListener('click', function (e) {
+                      if (!_this.mapProps.onClick) return;
+                      var pos = new Position(e.latLng.getLat(), e.latLng.getLng());
+                      pos.offset = new Offset(e.point.x, e.point.y);
+
+                      _this.mapProps.onClick(pos);
+                    });
+                    map.addListener('mousemove', function (e) {
+                      if (!_this.mapProps.onMouseMove) return;
+                      var pos = new Position(e.latLng.getLat(), e.latLng.getLng());
+                      pos.offset = new Offset(e.point.x, e.point.y);
+
+                      _this.mapProps.onMouseMove(pos);
+                    });
+                    this.mapInitialized = true;
+                    this.initMarkerPool();
+                    console.log("".concat(this.type, " map script initialized"), divElement);
+                    resolve(map);
+                    return [2];
+                }
+              });
+            });
+          })];
+        });
+      });
+    };
+
+    KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+      var mapValue = this.getBaseToMapZoom(value);
+
+      if (mapValue > 14) {
+        return 14;
+      } else if (mapValue < 1) {
+        return 1;
+      }
+
+      return mapValue;
+    };
+
+    KakaoMintMapController.prototype.destroyMap = function () {
+      var _a;
+
+      try {
+        (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
+      } catch (e) {
+        console.log('kakao map destroy error', e);
+      }
+
+      console.log("".concat(this.type, " map destroyed"));
+    };
+
+    KakaoMintMapController.prototype.getCurrBounds = function () {
+      if (!this.map) {
+        throw new Error('Map is not initialized!!');
+      }
+
+      var bounds = this.map.getBounds();
+      return Bounds.fromNESW(this.latLngToPosition(bounds.getNorthEast()), this.latLngToPosition(bounds.getSouthWest()));
+    };
+
+    KakaoMintMapController.prototype.panningTo = function (targetCenter) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.panTo(this.positionToLatLng(targetCenter));
+    };
+
+    KakaoMintMapController.prototype.getZoomLevel = function () {
+      return this.map ? this.getMapToBaseZoom(this.map.getLevel()) : 13;
+    };
+
+    KakaoMintMapController.prototype.setZoomLevel = function (zoom) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setLevel(this.getBaseToMapZoom(zoom));
+    };
+
+    KakaoMintMapController.prototype.getCenter = function () {
+      return this.getCurrBounds().getCenter();
+    };
+
+    KakaoMintMapController.prototype.setCenter = function (position) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(this.positionToLatLng(position));
+    };
+
+    KakaoMintMapController.prototype.positionToLatLng = function (pos) {
+      return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : undefined;
+    };
+
+    KakaoMintMapController.prototype.latLngToPosition = function (latLng) {
+      return latLng ? new Position(latLng.getLat(), latLng.getLng()) : undefined;
+    };
+
+    return KakaoMintMapController;
+  }(MintMapController);
+
   var Position = function () {
     function Position(lat, lng) {
       this.lat = 0;
@@ -1392,6 +2145,10 @@
       this.lng = lng;
     }
 
+    Position.equals = function (pos1, pos2) {
+      return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+    };
+
     return Position;
   }();
 
@@ -1556,19 +2313,25 @@
     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);
@@ -1580,6 +2343,10 @@
           mapType: mapType
         }, props), {
           base: base
+        })) : mapType === 'kakao' ? new KakaoMintMapController(tslib.__assign(tslib.__assign({
+          mapType: mapType
+        }, props), {
+          base: base
         })) : null;
 
         if (newController_1) {
@@ -1599,9 +2366,7 @@
       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) {
@@ -1851,6 +2616,8 @@
   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)");
     }
   };
 
@@ -1932,7 +2699,7 @@
       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 () {