@mint-ui/map 0.1.7-beta → 0.1.9-beta

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

@@ -339,10 +339,10 @@ var GoogleMintMapController = function (_super) {
 
             var _this = this;
 
-            var _a, _b;
+            var _a, _b, _c, _d;
 
-            return tslib.__generator(this, function (_c) {
-              switch (_c.label) {
+            return tslib.__generator(this, function (_e) {
+              switch (_e.label) {
                 case 0:
                   if (this.mapInitialized && this.map) {
                     if (this.map.getDiv() === divElement) {
@@ -355,22 +355,27 @@ var GoogleMintMapController = function (_super) {
                   return [4, this.loadMapApi()];
 
                 case 1:
-                  _c.sent();
+                  _e.sent();
 
-                  _c.label = 2;
+                  _e.label = 2;
 
                 case 2:
                   map = new google.maps.Map(divElement, {
                     mapId: this.mapProps.mapId,
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
-                    maxZoom: 21,
-                    minZoom: 1,
-                    zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
+                    maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
+                    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'
                   });
                   map.addListener('dragend', function () {
                     console.log('map dragend');
                     _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
+                  map.addListener('idle', function () {
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
                   map.addListener('zoom_changed', function () {
                     console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
@@ -425,6 +430,12 @@ var GoogleMintMapController = function (_super) {
     return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
   };
 
+  GoogleMintMapController.prototype.setZoomLevel = function (zoom) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
+  };
+
   return GoogleMintMapController;
 }(MintMapController.MintMapController);
 

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

@@ -1,4 +1,4 @@
-export * from './MintMap';
-export * from './core';
-export * from './naver/NaverMintMapController';
-export * from './google/GoogleMintMapController';
+export * from './MintMap';
+export * from './core';
+export * from './naver/NaverMintMapController';
+export * from './google/GoogleMintMapController';

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -1,36 +1,38 @@
-/// <reference types="navermaps" />
-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 NaverMintMapController extends MintMapController {
-    type: MapType;
-    map: naver.maps.Map | null;
-    scriptUrl: string;
-    scriptModules: string[];
-    markerPool?: ObjectPool<naver.maps.Marker>;
-    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;
-    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>;
-    destroyMap(): void;
-    getCurrBounds(): Bounds;
-    panningTo(targetCenter: Position): void;
-    getZoomLevel(): number;
-}
+/// <reference types="navermaps" />
+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 NaverMintMapController extends MintMapController {
+    type: MapType;
+    map: naver.maps.Map | null;
+    scriptUrl: string;
+    scriptModules: string[];
+    markerPool?: ObjectPool<naver.maps.Marker>;
+    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;
+    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;
+}

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -38,7 +38,7 @@ var NaverMintMapController = function (_super) {
       });
     }).setClear(function (item) {
       item.setMap(null);
-    }).createPool(1000).setCheckLiveTimeInterval(1000);
+    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
   };
 
   NaverMintMapController.prototype.createPolyline = function (polyline) {
@@ -351,14 +351,14 @@ var NaverMintMapController = function (_super) {
       return tslib.__generator(this, function (_a) {
         return [2, new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
-            var map;
+            var options, maxZoom, minZoom, map;
 
             var _this = this;
 
-            var _a, _b;
+            var _a, _b, _c, _d;
 
-            return tslib.__generator(this, function (_c) {
-              switch (_c.label) {
+            return tslib.__generator(this, function (_e) {
+              switch (_e.label) {
                 case 0:
                   if (this.mapInitialized && this.map) {
                     if (this.map.getElement() === divElement) {
@@ -373,19 +373,37 @@ var NaverMintMapController = function (_super) {
                   return [4, this.loadMapApi()];
 
                 case 1:
-                  _c.sent();
+                  _e.sent();
 
-                  _c.label = 2;
+                  _e.label = 2;
 
                 case 2:
-                  map = new naver.maps.Map(divElement, {
+                  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,
                     logoControl: false,
                     mapDataControl: false,
                     mapTypeControl: false,
                     scaleControl: false
-                  });
+                  };
+                  maxZoom = 21;
+                  minZoom = 6;
+
+                  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 = 6;
+                  }
+
+                  options.minZoom = minZoom;
+                  options.maxZoom = maxZoom;
+                  map = new naver.maps.Map(divElement, options);
                   map.addListener('dragstart', function (e) {
                     _this.dragStartPoint[0] = e.domEvent.clientX;
                     _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -396,12 +414,12 @@ var NaverMintMapController = function (_super) {
                     } else {
                       _this.dragged = true;
                     }
-
+                  });
+                  map.addListener('idle', function () {
                     _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('zoom_changed', function () {
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('click', function (e) {
                     console.log('map click', e);
@@ -423,6 +441,16 @@ var NaverMintMapController = function (_super) {
     });
   };
 
+  NaverMintMapController.prototype.getSafeZoomValue = function (value) {
+    if (value > 21) {
+      return 21;
+    } else if (value < 6) {
+      return 6;
+    }
+
+    return value;
+  };
+
   NaverMintMapController.prototype.destroyMap = function () {
     var _a;
 
@@ -459,6 +487,12 @@ var NaverMintMapController = function (_super) {
     return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
   };
 
+  NaverMintMapController.prototype.setZoomLevel = function (zoom) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
+  };
+
   return NaverMintMapController;
 }(MintMapController.MintMapController);
 

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './components/mint-map';
+export * from './components/mint-map';

package/dist/index.es.js

@@ -38,6 +38,7 @@ function MintMapCore(_a) {
   var onLoad = _a.onLoad,
       _b = _a.visible,
       visible = _b === void 0 ? true : _b,
+      base = _a.base,
       children = _a.children;
   var controller = useMintMapController();
   var elementRef = useRef(null);
@@ -75,6 +76,15 @@ function MintMapCore(_a) {
       controller && controller.destroyMap();
     };
   }, [controller, elementRef]);
+  useEffect(function () {
+    if ((base === null || base === void 0 ? void 0 : base.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);
+      }
+    }
+  }, [base]);
   return React.createElement("div", {
     className: cn$2('mint-map-root'),
     style: {
@@ -148,22 +158,82 @@ var PolygonCalculator = function () {
     return false;
   };
 
+  PolygonCalculator.getIncludedPositions = function (polygon, position) {
+    var targets = Array.isArray(position) ? position : [position];
+    var result = [];
+    var maxX = Math.max.apply(Math, polygon.map(function (pos) {
+      return pos.lng;
+    })) + 1;
+    var lines = this.convertPolygonToLinePoints(polygon);
+
+    for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
+      var target = targets_1[_i];
+      var tempLine = this.convertPositionToPoints(target, new Position(target.lat, maxX));
+      var crossPoints = this.getCrossPointAll(lines, tempLine);
+
+      if (crossPoints.length > 0 && crossPoints.length % 2 != 0) {
+        result.push(target);
+      }
+    }
+
+    return result;
+  };
+
+  PolygonCalculator.convertPolygonToLinePoints = function (polygon) {
+    var lines = [];
+
+    for (var i = 0; i < polygon.length; i++) {
+      lines.push(this.convertPositionToPoints(polygon[i], polygon[i + 1 === polygon.length ? 0 : i + 1]));
+    }
+
+    return lines;
+  };
+
   PolygonCalculator.convertPositionToPoints = function (pos1, pos2) {
     return new LinePoints(pos1.lng, pos1.lat, pos2.lng, pos2.lat);
   };
 
-  PolygonCalculator.findCrossPoint = function (sr, tr) {
+  PolygonCalculator.getCrossPoint = function (sr, tr) {
+    var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2);
+
+    if (p1 != 0) {
+      var x = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.x1 - tr.x2) - (sr.x1 - sr.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+      var y = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+
+      if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0) {
+        return {
+          x: x,
+          y: y
+        };
+      }
+    }
+  };
+
+  PolygonCalculator.toFixedPosition = function (n) {
+    return Number(n.toFixed(15));
+  };
+
+  PolygonCalculator.getCrossPointAll = function (sr, tr) {
+    var result = [];
+
     for (var _i = 0, sr_1 = sr; _i < sr_1.length; _i++) {
       var tmp = sr_1[_i];
-      var p1 = (tmp.x1 - tmp.x2) * (tr.y1 - tr.y2) - (tmp.y1 - tmp.y2) * (tr.x1 - tr.x2);
+      var p = this.getCrossPoint(tmp, tr);
 
-      if (p1 != 0) {
-        var x = ((tmp.x1 * tmp.y2 - tmp.y1 * tmp.x2) * (tr.x1 - tr.x2) - (tmp.x1 - tmp.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
-        var y = ((tmp.x1 * tmp.y2 - tmp.y1 * tmp.x2) * (tr.y1 - tr.y2) - (tmp.y1 - tmp.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+      if (p) {
+        result.push(p);
+      }
+    }
 
-        if ((x - tmp.x1) * (x - tmp.x2) <= 0 && (y - tmp.y1) * (y - tmp.y2) <= 0 && (x - tr.x1) * (x - tr.x2) <= 0 && (y - tr.y1) * (y - tr.y2) <= 0) {
-          return true;
-        }
+    return result;
+  };
+
+  PolygonCalculator.findCrossPoint = function (sr, tr) {
+    for (var _i = 0, sr_2 = sr; _i < sr_2.length; _i++) {
+      var tmp = sr_2[_i];
+
+      if (this.getCrossPoint(tmp, tr)) {
+        return true;
       }
     }
 
@@ -352,7 +422,7 @@ var NaverMintMapController = function (_super) {
       });
     }).setClear(function (item) {
       item.setMap(null);
-    }).createPool(1000).setCheckLiveTimeInterval(1000);
+    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
   };
 
   NaverMintMapController.prototype.createPolyline = function (polyline) {
@@ -665,14 +735,14 @@ var NaverMintMapController = function (_super) {
       return __generator(this, function (_a) {
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
-            var map;
+            var options, maxZoom, minZoom, map;
 
             var _this = this;
 
-            var _a, _b;
+            var _a, _b, _c, _d;
 
-            return __generator(this, function (_c) {
-              switch (_c.label) {
+            return __generator(this, function (_e) {
+              switch (_e.label) {
                 case 0:
                   if (this.mapInitialized && this.map) {
                     if (this.map.getElement() === divElement) {
@@ -687,19 +757,37 @@ var NaverMintMapController = function (_super) {
                   return [4, this.loadMapApi()];
 
                 case 1:
-                  _c.sent();
+                  _e.sent();
 
-                  _c.label = 2;
+                  _e.label = 2;
 
                 case 2:
-                  map = new naver.maps.Map(divElement, {
+                  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,
                     logoControl: false,
                     mapDataControl: false,
                     mapTypeControl: false,
                     scaleControl: false
-                  });
+                  };
+                  maxZoom = 21;
+                  minZoom = 6;
+
+                  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 = 6;
+                  }
+
+                  options.minZoom = minZoom;
+                  options.maxZoom = maxZoom;
+                  map = new naver.maps.Map(divElement, options);
                   map.addListener('dragstart', function (e) {
                     _this.dragStartPoint[0] = e.domEvent.clientX;
                     _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -710,12 +798,12 @@ var NaverMintMapController = function (_super) {
                     } else {
                       _this.dragged = true;
                     }
-
+                  });
+                  map.addListener('idle', function () {
                     _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('zoom_changed', function () {
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('click', function (e) {
                     console.log('map click', e);
@@ -737,6 +825,16 @@ var NaverMintMapController = function (_super) {
     });
   };
 
+  NaverMintMapController.prototype.getSafeZoomValue = function (value) {
+    if (value > 21) {
+      return 21;
+    } else if (value < 6) {
+      return 6;
+    }
+
+    return value;
+  };
+
   NaverMintMapController.prototype.destroyMap = function () {
     var _a;
 
@@ -773,6 +871,12 @@ var NaverMintMapController = function (_super) {
     return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
   };
 
+  NaverMintMapController.prototype.setZoomLevel = function (zoom) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
+  };
+
   return NaverMintMapController;
 }(MintMapController);
 
@@ -1108,10 +1212,10 @@ var GoogleMintMapController = function (_super) {
 
             var _this = this;
 
-            var _a, _b;
+            var _a, _b, _c, _d;
 
-            return __generator(this, function (_c) {
-              switch (_c.label) {
+            return __generator(this, function (_e) {
+              switch (_e.label) {
                 case 0:
                   if (this.mapInitialized && this.map) {
                     if (this.map.getDiv() === divElement) {
@@ -1124,22 +1228,27 @@ var GoogleMintMapController = function (_super) {
                   return [4, this.loadMapApi()];
 
                 case 1:
-                  _c.sent();
+                  _e.sent();
 
-                  _c.label = 2;
+                  _e.label = 2;
 
                 case 2:
                   map = new google.maps.Map(divElement, {
                     mapId: this.mapProps.mapId,
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
-                    maxZoom: 21,
-                    minZoom: 1,
-                    zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
+                    maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
+                    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'
                   });
                   map.addListener('dragend', function () {
                     console.log('map dragend');
                     _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
+                  map.addListener('idle', function () {
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
                   map.addListener('zoom_changed', function () {
                     console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
@@ -1194,6 +1303,12 @@ var GoogleMintMapController = function (_super) {
     return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
   };
 
+  GoogleMintMapController.prototype.setZoomLevel = function (zoom) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
+  };
+
   return GoogleMintMapController;
 }(MintMapController);
 
@@ -1248,10 +1363,26 @@ var Bounds = function () {
     return new Position(this.nw.lat + (this.se.lat - this.nw.lat) / 2, this.nw.lng + (this.se.lng - this.nw.lng) / 2);
   };
 
-  Bounds.prototype.includes = function (positions) {
+  Bounds.prototype.getIncludedPositions = function (positions) {
+    var result = [];
+
     for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
       var pos = positions_1[_i];
 
+      if (!(this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng)) {
+        result.push(pos);
+      }
+    }
+
+    return result;
+  };
+
+  Bounds.prototype.includes = function (positions) {
+    positions = Array.isArray(positions) ? positions : [positions];
+
+    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
+      var pos = positions_2[_i];
+
       if (this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng) {
         return false;
       }
@@ -1261,8 +1392,8 @@ var Bounds = function () {
   };
 
   Bounds.prototype.includesOnlyOnePoint = function (positions) {
-    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
-      var pos = positions_2[_i];
+    for (var _i = 0, positions_3 = positions; _i < positions_3.length; _i++) {
+      var pos = positions_3[_i];
 
       if (!(this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng)) {
         return true;
@@ -1344,23 +1475,36 @@ var Polygon = function (_super) {
   return Polygon;
 }(Drawable);
 var cn$1 = classNames.bind(styles$2);
+var DEFAULT_CENTER = {
+  lat: 37.5036845,
+  lng: 127.0448698
+};
 function MintMap(_a) {
   var mapType = _a.mapType,
       children = _a.children,
-      props = __rest(_a, ["mapType", "children"]);
+      _b = _a.base,
+      base = _b === void 0 ? {
+    center: DEFAULT_CENTER,
+    zoomLevel: 12
+  } : _b,
+      props = __rest(_a, ["mapType", "children", "base"]);
 
-  var _b = useState(),
-      controller = _b[0],
-      setController = _b[1];
+  var _c = useState(),
+      controller = _c[0],
+      setController = _c[1];
 
   useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
-      var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign({
+      var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
         mapType: mapType
-      }, props)) : mapType === 'google' ? new GoogleMintMapController(__assign({
+      }, props), {
+        base: base
+      })) : mapType === 'google' ? new GoogleMintMapController(__assign(__assign({
         mapType: mapType
-      }, props)) : null;
+      }, props), {
+        base: base
+      })) : null;
 
       if (newController_1) {
         newController_1.loadMapApi().then(function () {
@@ -1377,7 +1521,9 @@ function MintMap(_a) {
     controller: controller
   }, React.createElement(MintMapCore, __assign({
     mapType: mapType
-  }, props), children)) : React.createElement(PointLoading, {
+  }, props, {
+    base: base
+  }), children)) : React.createElement(PointLoading, {
     text: "Loading"
   }));
 }
@@ -1717,7 +1863,7 @@ function MapMarkerWrapper(_a) {
           divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
 
           if (markerRef.current) {
-            console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+            controller.clearDrawable(markerRef.current);
           }
 
           divCloneRef.current = undefined;
@@ -1730,7 +1876,7 @@ function MapMarkerWrapper(_a) {
         divElement.removeEventListener('mouseover', onMouseOverHandler);
 
         if (markerRef.current) {
-          console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+          controller.clearDrawable(markerRef.current);
         }
       }
     };
@@ -1738,11 +1884,9 @@ function MapMarkerWrapper(_a) {
   useEffect(function () {
     if (options) {
       if (markerRef.current) {
-        console.log('update Marker');
         controller.updateMarker(markerRef.current, options);
         offsetCalibration(controller.getMapType(), divElement, options);
       } else {
-        console.log('create Marker');
         markerRef.current = new Marker(options);
         markerRef.current.element = divElement;
         controller.createMarker(markerRef.current);