@mint-ui/map 0.1.6-beta → 0.1.8-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/mint-map/MintMap.d.ts +4 -1
  2. package/dist/components/mint-map/MintMap.js +23 -8
  3. package/dist/components/mint-map/core/MintMapController.d.ts +1 -0
  4. package/dist/components/mint-map/core/MintMapCore.d.ts +1 -1
  5. package/dist/components/mint-map/core/MintMapCore.js +10 -0
  6. package/dist/components/mint-map/google/GoogleMintMapController.d.ts +1 -0
  7. package/dist/components/mint-map/google/GoogleMintMapController.js +16 -8
  8. package/dist/components/mint-map/naver/NaverMintMapController.d.ts +5 -0
  9. package/dist/components/mint-map/naver/NaverMintMapController.js +99 -27
  10. package/dist/index.es.js +148 -43
  11. package/dist/index.umd.js +151 -47
  12. package/package.json +2 -1
package/dist/components/mint-map/MintMap.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface MintMapProps extends MintMapEvents {
10
10
  mapId?: string;
11
11
  base?: BaseProps;
12
12
  visible?: boolean;
13
+ markerCache?: boolean;
13
14
  }
14
15
  export interface MintMapEvents {
15
16
  onBoundsChanged?: (bounds: Bounds) => void;
@@ -46,6 +47,8 @@ export declare class Offset {
46
47
  export interface BaseProps {
47
48
  center?: Position;
48
49
  zoomLevel?: number;
50
+ maxZoomLevel?: number;
51
+ minZoomLevel?: number;
49
52
  }
50
53
  export interface DrawableOptions {
51
54
  position: Position | Position[] | [number, number][];
@@ -84,4 +87,4 @@ export declare class Polygon extends Drawable {
84
87
  constructor(options: PolygonOptions);
85
88
  getCenter(): Position;
86
89
  }
87
- export declare function MintMap({ mapType, children, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;
90
+ export declare function MintMap({ mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;
package/dist/components/mint-map/MintMap.js CHANGED
@@ -164,23 +164,36 @@ var Polygon = function (_super) {
164
164
  return Polygon;
165
165
  }(Drawable);
166
166
  var cn = classNames__default["default"].bind(MintMap_module);
167
+ var DEFAULT_CENTER = {
168
+ lat: 37.5036845,
169
+ lng: 127.0448698
170
+ };
167
171
  function MintMap(_a) {
168
172
  var mapType = _a.mapType,
169
173
  children = _a.children,
170
- props = tslib.__rest(_a, ["mapType", "children"]);
174
+ _b = _a.base,
175
+ base = _b === void 0 ? {
176
+ center: DEFAULT_CENTER,
177
+ zoomLevel: 12
178
+ } : _b,
179
+ props = tslib.__rest(_a, ["mapType", "children", "base"]);
171
180
 
172
- var _b = React.useState(),
173
- controller = _b[0],
174
- setController = _b[1];
181
+ var _c = React.useState(),
182
+ controller = _c[0],
183
+ setController = _c[1];
175
184
 
176
185
  React.useEffect(function () {
177
186
  if (mapType && mapType.length > 0) {
178
187
  setController(undefined);
179
- var newController_1 = mapType === 'naver' ? new NaverMintMapController.NaverMintMapController(tslib.__assign({
188
+ var newController_1 = mapType === 'naver' ? new NaverMintMapController.NaverMintMapController(tslib.__assign(tslib.__assign({
180
189
  mapType: mapType
181
- }, props)) : mapType === 'google' ? new GoogleMintMapController.GoogleMintMapController(tslib.__assign({
190
+ }, props), {
191
+ base: base
192
+ })) : mapType === 'google' ? new GoogleMintMapController.GoogleMintMapController(tslib.__assign(tslib.__assign({
182
193
  mapType: mapType
183
- }, props)) : null;
194
+ }, props), {
195
+ base: base
196
+ })) : null;
184
197
 
185
198
  if (newController_1) {
186
199
  newController_1.loadMapApi().then(function () {
@@ -197,7 +210,9 @@ function MintMap(_a) {
197
210
  controller: controller
198
211
  }, React__default["default"].createElement(MintMapCore.MintMapCore, tslib.__assign({
199
212
  mapType: mapType
200
- }, props), children)) : React__default["default"].createElement(PointLoading, {
213
+ }, props, {
214
+ base: base
215
+ }), children)) : React__default["default"].createElement(PointLoading, {
201
216
  text: "Loading"
202
217
  }));
203
218
  }
package/dist/components/mint-map/core/MintMapController.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare abstract class MintMapController {
9
9
  abstract getCurrBounds(): Bounds;
10
10
  abstract panningTo(targetCenter: Position): void;
11
11
  abstract getZoomLevel(): number;
12
+ abstract setZoomLevel(zoom: number): void;
12
13
  abstract createMarker(marker: Marker): void;
13
14
  abstract updateMarker(marker: Marker, options: MarkerOptions): void;
14
15
  abstract clearDrawable(drawable: Drawable): boolean;
package/dist/components/mint-map/core/MintMapCore.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { PropsWithChildren } from "react";
2
2
  import { MintMapProps } from "../MintMap";
3
- export declare function MintMapCore({ onLoad, visible, children }: PropsWithChildren<MintMapProps>): JSX.Element;
3
+ export declare function MintMapCore({ onLoad, visible, base, children }: PropsWithChildren<MintMapProps>): JSX.Element;
package/dist/components/mint-map/core/MintMapCore.js CHANGED
@@ -20,6 +20,7 @@ function MintMapCore(_a) {
20
20
  var onLoad = _a.onLoad,
21
21
  _b = _a.visible,
22
22
  visible = _b === void 0 ? true : _b,
23
+ base = _a.base,
23
24
  children = _a.children;
24
25
  var controller = MintMapProvider.useMintMapController();
25
26
  var elementRef = React.useRef(null);
@@ -57,6 +58,15 @@ function MintMapCore(_a) {
57
58
  controller && controller.destroyMap();
58
59
  };
59
60
  }, [controller, elementRef]);
61
+ React.useEffect(function () {
62
+ if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
63
+ var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
64
+
65
+ if (prevZoomLevel !== base.zoomLevel) {
66
+ controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
67
+ }
68
+ }
69
+ }, [base]);
60
70
  return React__default["default"].createElement("div", {
61
71
  className: cn('mint-map-root'),
62
72
  style: {
package/dist/components/mint-map/google/GoogleMintMapController.d.ts CHANGED
@@ -31,4 +31,5 @@ export declare class GoogleMintMapController extends MintMapController {
31
31
  getCurrBounds(): Bounds;
32
32
  panningTo(targetCenter: Position): void;
33
33
  getZoomLevel(): number;
34
+ setZoomLevel(zoom: number): void;
34
35
  }
package/dist/components/mint-map/google/GoogleMintMapController.js CHANGED
@@ -339,10 +339,10 @@ var GoogleMintMapController = function (_super) {
339
339
 
340
340
  var _this = this;
341
341
 
342
- var _a, _b;
342
+ var _a, _b, _c, _d;
343
343
 
344
- return tslib.__generator(this, function (_c) {
345
- switch (_c.label) {
344
+ return tslib.__generator(this, function (_e) {
345
+ switch (_e.label) {
346
346
  case 0:
347
347
  if (this.mapInitialized && this.map) {
348
348
  if (this.map.getDiv() === divElement) {
@@ -355,17 +355,19 @@ var GoogleMintMapController = function (_super) {
355
355
  return [4, this.loadMapApi()];
356
356
 
357
357
  case 1:
358
- _c.sent();
358
+ _e.sent();
359
359
 
360
- _c.label = 2;
360
+ _e.label = 2;
361
361
 
362
362
  case 2:
363
363
  map = new google.maps.Map(divElement, {
364
364
  mapId: this.mapProps.mapId,
365
365
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
366
- maxZoom: 21,
367
- minZoom: 1,
368
- zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
366
+ maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
367
+ minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
368
+ zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
369
+ disableDefaultUI: true,
370
+ gestureHandling: 'greedy'
369
371
  });
370
372
  map.addListener('dragend', function () {
371
373
  console.log('map dragend');
@@ -425,6 +427,12 @@ var GoogleMintMapController = function (_super) {
425
427
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
426
428
  };
427
429
 
430
+ GoogleMintMapController.prototype.setZoomLevel = function (zoom) {
431
+ var _a;
432
+
433
+ (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
434
+ };
435
+
428
436
  return GoogleMintMapController;
429
437
  }(MintMapController.MintMapController);
430
438
 
package/dist/components/mint-map/naver/NaverMintMapController.d.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  /// <reference types="navermaps" />
2
2
  import { MintMapController } from "../core/MintMapController";
3
3
  import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
4
+ import { ObjectPool } from '@mint-ui/tools';
4
5
  export declare class NaverMintMapController extends MintMapController {
5
6
  type: MapType;
6
7
  map: naver.maps.Map | null;
7
8
  scriptUrl: string;
8
9
  scriptModules: string[];
10
+ markerPool?: ObjectPool<naver.maps.Marker>;
9
11
  constructor(props: MintMapProps);
12
+ private initMarkerPool;
10
13
  polylineEvents: string[];
11
14
  createPolyline(polyline: Polyline): void;
12
15
  updatePolyline(polyline: Polyline, options: PolylineOptions): void;
@@ -26,8 +29,10 @@ export declare class NaverMintMapController extends MintMapController {
26
29
  setMapDragged(value: boolean): void;
27
30
  loadMapApi(): Promise<boolean>;
28
31
  initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
32
+ private getSafeZoomValue;
29
33
  destroyMap(): void;
30
34
  getCurrBounds(): Bounds;
31
35
  panningTo(targetCenter: Position): void;
32
36
  getZoomLevel(): number;
37
+ setZoomLevel(zoom: number): void;
33
38
  }
package/dist/components/mint-map/naver/NaverMintMapController.js CHANGED
@@ -6,6 +6,7 @@ var tslib = require('tslib');
6
6
  var MintMapController = require('../core/MintMapController.js');
7
7
  var waiting = require('../core/util/waiting.js');
8
8
  var MintMap = require('../MintMap.js');
9
+ var tools = require('@mint-ui/tools');
9
10
 
10
11
  var NaverMintMapController = function (_super) {
11
12
  tslib.__extends(NaverMintMapController, _super);
@@ -26,6 +27,20 @@ var NaverMintMapController = function (_super) {
26
27
  return _this;
27
28
  }
28
29
 
30
+ NaverMintMapController.prototype.initMarkerPool = function () {
31
+ var _this = this;
32
+
33
+ if (!this.mapProps.markerCache) return;
34
+ this.markerPool = new tools.ObjectPool().setFactory(function () {
35
+ return new naver.maps.Marker({
36
+ position: new MintMap.Position(0, 0),
37
+ map: _this.map || undefined
38
+ });
39
+ }).setClear(function (item) {
40
+ item.setMap(null);
41
+ }).createPool(1000).setCheckLiveTimeInterval(1000);
42
+ };
43
+
29
44
  NaverMintMapController.prototype.createPolyline = function (polyline) {
30
45
  var _this = this;
31
46
 
@@ -163,8 +178,19 @@ var NaverMintMapController = function (_super) {
163
178
  content: marker.element,
164
179
  anchor: marker.options.anchor
165
180
  });
166
- var naverMarker_1 = new naver.maps.Marker(options);
167
- marker.native = naverMarker_1;
181
+ var naverMarker_1;
182
+
183
+ if (this.mapProps.markerCache && this.markerPool) {
184
+ naverMarker_1 = this.markerPool.getPoolItem();
185
+ naverMarker_1.setVisible(true);
186
+ options.icon && naverMarker_1.setIcon(options.icon);
187
+ marker.native = naverMarker_1;
188
+ this.updateMarker(marker, marker.options);
189
+ } else {
190
+ naverMarker_1 = new naver.maps.Marker(options);
191
+ marker.native = naverMarker_1;
192
+ }
193
+
168
194
  ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
169
195
  if (_this.markerEvents.includes(key)) {
170
196
  naver.maps.Event.addListener(naverMarker_1, key, handler);
@@ -178,26 +204,19 @@ var NaverMintMapController = function (_super) {
178
204
  var map = marker.native.getMap();
179
205
 
180
206
  if (map) {
181
- var newOption = {
182
- map: map,
183
- position: options.position instanceof MintMap.Position ? options.position : marker.native.getPosition(),
184
- visible: options.visible === undefined || options.visible
185
- };
207
+ if (options.position && options.position instanceof MintMap.Position) {
208
+ marker.native.setPosition(options.position);
209
+ }
186
210
 
187
- if (options.anchor) {
188
- newOption.icon = tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
189
- anchor: options.anchor
190
- });
211
+ if (options.visible !== undefined) {
212
+ marker.native.setVisible(options.visible);
191
213
  }
192
214
 
193
- marker.native.setOptions({
194
- map: map,
195
- position: options.position instanceof MintMap.Position ? options.position : marker.native.getPosition(),
196
- visible: options.visible === undefined || options.visible,
197
- icon: tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
215
+ if (options.anchor) {
216
+ marker.native.setIcon(tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
198
217
  anchor: options.anchor
199
- })
200
- });
218
+ }));
219
+ }
201
220
  }
202
221
  }
203
222
  };
@@ -241,8 +260,23 @@ var NaverMintMapController = function (_super) {
241
260
  };
242
261
 
243
262
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
263
+ var _a;
264
+
244
265
  if (drawable && drawable.native && drawable.native instanceof naver.maps.OverlayView) {
245
- drawable.native.setMap(null);
266
+ if (drawable.native instanceof naver.maps.Marker) {
267
+ if (this.mapProps.markerCache && this.markerPool) {
268
+ drawable.native.setVisible(false);
269
+ this.markerEvents.map(function (eName) {
270
+ drawable.native.clearListeners(eName);
271
+ });
272
+ (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
273
+ } else {
274
+ drawable.native.setMap(null);
275
+ }
276
+ } else {
277
+ drawable.native.setMap(null);
278
+ }
279
+
246
280
  return true;
247
281
  }
248
282
 
@@ -317,14 +351,14 @@ var NaverMintMapController = function (_super) {
317
351
  return tslib.__generator(this, function (_a) {
318
352
  return [2, new Promise(function (resolve) {
319
353
  return tslib.__awaiter(_this, void 0, void 0, function () {
320
- var map;
354
+ var options, maxZoom, minZoom, map;
321
355
 
322
356
  var _this = this;
323
357
 
324
- var _a, _b;
358
+ var _a, _b, _c, _d;
325
359
 
326
- return tslib.__generator(this, function (_c) {
327
- switch (_c.label) {
360
+ return tslib.__generator(this, function (_e) {
361
+ switch (_e.label) {
328
362
  case 0:
329
363
  if (this.mapInitialized && this.map) {
330
364
  if (this.map.getElement() === divElement) {
@@ -339,19 +373,37 @@ var NaverMintMapController = function (_super) {
339
373
  return [4, this.loadMapApi()];
340
374
 
341
375
  case 1:
342
- _c.sent();
376
+ _e.sent();
343
377
 
344
- _c.label = 2;
378
+ _e.label = 2;
345
379
 
346
380
  case 2:
347
- map = new naver.maps.Map(divElement, {
381
+ options = {
348
382
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
349
383
  zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
350
384
  logoControl: false,
351
385
  mapDataControl: false,
352
386
  mapTypeControl: false,
353
387
  scaleControl: false
354
- });
388
+ };
389
+ maxZoom = 21;
390
+ minZoom = 6;
391
+
392
+ if ((_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.maxZoomLevel) {
393
+ maxZoom = this.getSafeZoomValue(this.mapProps.base.maxZoomLevel);
394
+ }
395
+
396
+ if ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.minZoomLevel) {
397
+ minZoom = this.getSafeZoomValue(this.mapProps.base.minZoomLevel);
398
+ }
399
+
400
+ if (minZoom > maxZoom) {
401
+ minZoom = 6;
402
+ }
403
+
404
+ options.minZoom = minZoom;
405
+ options.maxZoom = maxZoom;
406
+ map = new naver.maps.Map(divElement, options);
355
407
  map.addListener('dragstart', function (e) {
356
408
  _this.dragStartPoint[0] = e.domEvent.clientX;
357
409
  _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -377,6 +429,7 @@ var NaverMintMapController = function (_super) {
377
429
  });
378
430
  this.map = map;
379
431
  this.mapInitialized = true;
432
+ this.initMarkerPool();
380
433
  console.log("".concat(this.type, " map script initialized"), divElement);
381
434
  resolve(map);
382
435
  return [2];
@@ -388,11 +441,24 @@ var NaverMintMapController = function (_super) {
388
441
  });
389
442
  };
390
443
 
444
+ NaverMintMapController.prototype.getSafeZoomValue = function (value) {
445
+ if (value > 21) {
446
+ return 21;
447
+ } else if (value < 6) {
448
+ return 6;
449
+ }
450
+
451
+ return value;
452
+ };
453
+
391
454
  NaverMintMapController.prototype.destroyMap = function () {
455
+ var _a;
456
+
392
457
  console.log("".concat(this.type, " map destroyed"));
393
458
 
394
459
  try {
395
460
  this.map && this.map.destroy();
461
+ (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
396
462
  } catch (e) {
397
463
  console.log('naver map destroy error', e);
398
464
  }
@@ -421,6 +487,12 @@ var NaverMintMapController = function (_super) {
421
487
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
422
488
  };
423
489
 
490
+ NaverMintMapController.prototype.setZoomLevel = function (zoom) {
491
+ var _a;
492
+
493
+ (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
494
+ };
495
+
424
496
  return NaverMintMapController;
425
497
  }(MintMapController.MintMapController);
426
498
 
package/dist/index.es.js CHANGED
@@ -2,6 +2,7 @@ import { __awaiter, __generator, __extends, __spreadArray, __assign, __rest } fr
2
2
  import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
3
3
  import classNames from 'classnames/bind';
4
4
  import styleInject from 'style-inject';
5
+ import { ObjectPool } from '@mint-ui/tools';
5
6
  import { createPortal } from 'react-dom';
6
7
 
7
8
  var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n\n.MintMap-module_ani-blink__K89JK {\n animation: MintMap-module_blink__mqfeV infinite 0.6s;\n}\n\n@keyframes MintMap-module_blink__mqfeV {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.3;\n }\n 100% {\n opacity: 1;\n }\n}\n.MintMap-module_ani-fade-in__lpHuy {\n animation: MintMap-module_fade-in__jHpv1 1s;\n}\n\n@keyframes MintMap-module_fade-in__jHpv1 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n.MintMap-module_ani-fade-out__5-esw {\n animation: MintMap-module_fade-out__CIjGe 1s;\n}\n\n@keyframes MintMap-module_fade-out__CIjGe {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n.MintMap-module_ani-expansion__S2vOZ {\n animation: MintMap-module_expansion__WMo5- ease 0.6s;\n}\n\n@keyframes MintMap-module_expansion__WMo5- {\n 0% {\n width: 0%;\n }\n 100% {\n width: 100%;\n }\n}";
@@ -37,6 +38,7 @@ function MintMapCore(_a) {
37
38
  var onLoad = _a.onLoad,
38
39
  _b = _a.visible,
39
40
  visible = _b === void 0 ? true : _b,
41
+ base = _a.base,
40
42
  children = _a.children;
41
43
  var controller = useMintMapController();
42
44
  var elementRef = useRef(null);
@@ -74,6 +76,15 @@ function MintMapCore(_a) {
74
76
  controller && controller.destroyMap();
75
77
  };
76
78
  }, [controller, elementRef]);
79
+ useEffect(function () {
80
+ if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
81
+ var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
82
+
83
+ if (prevZoomLevel !== base.zoomLevel) {
84
+ controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
85
+ }
86
+ }
87
+ }, [base]);
77
88
  return React.createElement("div", {
78
89
  className: cn$2('mint-map-root'),
79
90
  style: {
@@ -340,6 +351,20 @@ var NaverMintMapController = function (_super) {
340
351
  return _this;
341
352
  }
342
353
 
354
+ NaverMintMapController.prototype.initMarkerPool = function () {
355
+ var _this = this;
356
+
357
+ if (!this.mapProps.markerCache) return;
358
+ this.markerPool = new ObjectPool().setFactory(function () {
359
+ return new naver.maps.Marker({
360
+ position: new Position(0, 0),
361
+ map: _this.map || undefined
362
+ });
363
+ }).setClear(function (item) {
364
+ item.setMap(null);
365
+ }).createPool(1000).setCheckLiveTimeInterval(1000);
366
+ };
367
+
343
368
  NaverMintMapController.prototype.createPolyline = function (polyline) {
344
369
  var _this = this;
345
370
 
@@ -477,8 +502,19 @@ var NaverMintMapController = function (_super) {
477
502
  content: marker.element,
478
503
  anchor: marker.options.anchor
479
504
  });
480
- var naverMarker_1 = new naver.maps.Marker(options);
481
- marker.native = naverMarker_1;
505
+ var naverMarker_1;
506
+
507
+ if (this.mapProps.markerCache && this.markerPool) {
508
+ naverMarker_1 = this.markerPool.getPoolItem();
509
+ naverMarker_1.setVisible(true);
510
+ options.icon && naverMarker_1.setIcon(options.icon);
511
+ marker.native = naverMarker_1;
512
+ this.updateMarker(marker, marker.options);
513
+ } else {
514
+ naverMarker_1 = new naver.maps.Marker(options);
515
+ marker.native = naverMarker_1;
516
+ }
517
+
482
518
  ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
483
519
  if (_this.markerEvents.includes(key)) {
484
520
  naver.maps.Event.addListener(naverMarker_1, key, handler);
@@ -492,26 +528,19 @@ var NaverMintMapController = function (_super) {
492
528
  var map = marker.native.getMap();
493
529
 
494
530
  if (map) {
495
- var newOption = {
496
- map: map,
497
- position: options.position instanceof Position ? options.position : marker.native.getPosition(),
498
- visible: options.visible === undefined || options.visible
499
- };
531
+ if (options.position && options.position instanceof Position) {
532
+ marker.native.setPosition(options.position);
533
+ }
500
534
 
501
- if (options.anchor) {
502
- newOption.icon = __assign(__assign({}, marker.native.getIcon()), {
503
- anchor: options.anchor
504
- });
535
+ if (options.visible !== undefined) {
536
+ marker.native.setVisible(options.visible);
505
537
  }
506
538
 
507
- marker.native.setOptions({
508
- map: map,
509
- position: options.position instanceof Position ? options.position : marker.native.getPosition(),
510
- visible: options.visible === undefined || options.visible,
511
- icon: __assign(__assign({}, marker.native.getIcon()), {
539
+ if (options.anchor) {
540
+ marker.native.setIcon(__assign(__assign({}, marker.native.getIcon()), {
512
541
  anchor: options.anchor
513
- })
514
- });
542
+ }));
543
+ }
515
544
  }
516
545
  }
517
546
  };
@@ -555,8 +584,23 @@ var NaverMintMapController = function (_super) {
555
584
  };
556
585
 
557
586
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
587
+ var _a;
588
+
558
589
  if (drawable && drawable.native && drawable.native instanceof naver.maps.OverlayView) {
559
- drawable.native.setMap(null);
590
+ if (drawable.native instanceof naver.maps.Marker) {
591
+ if (this.mapProps.markerCache && this.markerPool) {
592
+ drawable.native.setVisible(false);
593
+ this.markerEvents.map(function (eName) {
594
+ drawable.native.clearListeners(eName);
595
+ });
596
+ (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
597
+ } else {
598
+ drawable.native.setMap(null);
599
+ }
600
+ } else {
601
+ drawable.native.setMap(null);
602
+ }
603
+
560
604
  return true;
561
605
  }
562
606
 
@@ -631,14 +675,14 @@ var NaverMintMapController = function (_super) {
631
675
  return __generator(this, function (_a) {
632
676
  return [2, new Promise(function (resolve) {
633
677
  return __awaiter(_this, void 0, void 0, function () {
634
- var map;
678
+ var options, maxZoom, minZoom, map;
635
679
 
636
680
  var _this = this;
637
681
 
638
- var _a, _b;
682
+ var _a, _b, _c, _d;
639
683
 
640
- return __generator(this, function (_c) {
641
- switch (_c.label) {
684
+ return __generator(this, function (_e) {
685
+ switch (_e.label) {
642
686
  case 0:
643
687
  if (this.mapInitialized && this.map) {
644
688
  if (this.map.getElement() === divElement) {
@@ -653,19 +697,37 @@ var NaverMintMapController = function (_super) {
653
697
  return [4, this.loadMapApi()];
654
698
 
655
699
  case 1:
656
- _c.sent();
700
+ _e.sent();
657
701
 
658
- _c.label = 2;
702
+ _e.label = 2;
659
703
 
660
704
  case 2:
661
- map = new naver.maps.Map(divElement, {
705
+ options = {
662
706
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
663
707
  zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
664
708
  logoControl: false,
665
709
  mapDataControl: false,
666
710
  mapTypeControl: false,
667
711
  scaleControl: false
668
- });
712
+ };
713
+ maxZoom = 21;
714
+ minZoom = 6;
715
+
716
+ if ((_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.maxZoomLevel) {
717
+ maxZoom = this.getSafeZoomValue(this.mapProps.base.maxZoomLevel);
718
+ }
719
+
720
+ if ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.minZoomLevel) {
721
+ minZoom = this.getSafeZoomValue(this.mapProps.base.minZoomLevel);
722
+ }
723
+
724
+ if (minZoom > maxZoom) {
725
+ minZoom = 6;
726
+ }
727
+
728
+ options.minZoom = minZoom;
729
+ options.maxZoom = maxZoom;
730
+ map = new naver.maps.Map(divElement, options);
669
731
  map.addListener('dragstart', function (e) {
670
732
  _this.dragStartPoint[0] = e.domEvent.clientX;
671
733
  _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -691,6 +753,7 @@ var NaverMintMapController = function (_super) {
691
753
  });
692
754
  this.map = map;
693
755
  this.mapInitialized = true;
756
+ this.initMarkerPool();
694
757
  console.log("".concat(this.type, " map script initialized"), divElement);
695
758
  resolve(map);
696
759
  return [2];
@@ -702,11 +765,24 @@ var NaverMintMapController = function (_super) {
702
765
  });
703
766
  };
704
767
 
768
+ NaverMintMapController.prototype.getSafeZoomValue = function (value) {
769
+ if (value > 21) {
770
+ return 21;
771
+ } else if (value < 6) {
772
+ return 6;
773
+ }
774
+
775
+ return value;
776
+ };
777
+
705
778
  NaverMintMapController.prototype.destroyMap = function () {
779
+ var _a;
780
+
706
781
  console.log("".concat(this.type, " map destroyed"));
707
782
 
708
783
  try {
709
784
  this.map && this.map.destroy();
785
+ (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
710
786
  } catch (e) {
711
787
  console.log('naver map destroy error', e);
712
788
  }
@@ -735,6 +811,12 @@ var NaverMintMapController = function (_super) {
735
811
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
736
812
  };
737
813
 
814
+ NaverMintMapController.prototype.setZoomLevel = function (zoom) {
815
+ var _a;
816
+
817
+ (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
818
+ };
819
+
738
820
  return NaverMintMapController;
739
821
  }(MintMapController);
740
822
 
@@ -1070,10 +1152,10 @@ var GoogleMintMapController = function (_super) {
1070
1152
 
1071
1153
  var _this = this;
1072
1154
 
1073
- var _a, _b;
1155
+ var _a, _b, _c, _d;
1074
1156
 
1075
- return __generator(this, function (_c) {
1076
- switch (_c.label) {
1157
+ return __generator(this, function (_e) {
1158
+ switch (_e.label) {
1077
1159
  case 0:
1078
1160
  if (this.mapInitialized && this.map) {
1079
1161
  if (this.map.getDiv() === divElement) {
@@ -1086,17 +1168,19 @@ var GoogleMintMapController = function (_super) {
1086
1168
  return [4, this.loadMapApi()];
1087
1169
 
1088
1170
  case 1:
1089
- _c.sent();
1171
+ _e.sent();
1090
1172
 
1091
- _c.label = 2;
1173
+ _e.label = 2;
1092
1174
 
1093
1175
  case 2:
1094
1176
  map = new google.maps.Map(divElement, {
1095
1177
  mapId: this.mapProps.mapId,
1096
1178
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
1097
- maxZoom: 21,
1098
- minZoom: 1,
1099
- zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
1179
+ maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
1180
+ minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
1181
+ zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
1182
+ disableDefaultUI: true,
1183
+ gestureHandling: 'greedy'
1100
1184
  });
1101
1185
  map.addListener('dragend', function () {
1102
1186
  console.log('map dragend');
@@ -1156,6 +1240,12 @@ var GoogleMintMapController = function (_super) {
1156
1240
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
1157
1241
  };
1158
1242
 
1243
+ GoogleMintMapController.prototype.setZoomLevel = function (zoom) {
1244
+ var _a;
1245
+
1246
+ (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
1247
+ };
1248
+
1159
1249
  return GoogleMintMapController;
1160
1250
  }(MintMapController);
1161
1251
 
@@ -1306,23 +1396,36 @@ var Polygon = function (_super) {
1306
1396
  return Polygon;
1307
1397
  }(Drawable);
1308
1398
  var cn$1 = classNames.bind(styles$2);
1399
+ var DEFAULT_CENTER = {
1400
+ lat: 37.5036845,
1401
+ lng: 127.0448698
1402
+ };
1309
1403
  function MintMap(_a) {
1310
1404
  var mapType = _a.mapType,
1311
1405
  children = _a.children,
1312
- props = __rest(_a, ["mapType", "children"]);
1406
+ _b = _a.base,
1407
+ base = _b === void 0 ? {
1408
+ center: DEFAULT_CENTER,
1409
+ zoomLevel: 12
1410
+ } : _b,
1411
+ props = __rest(_a, ["mapType", "children", "base"]);
1313
1412
 
1314
- var _b = useState(),
1315
- controller = _b[0],
1316
- setController = _b[1];
1413
+ var _c = useState(),
1414
+ controller = _c[0],
1415
+ setController = _c[1];
1317
1416
 
1318
1417
  useEffect(function () {
1319
1418
  if (mapType && mapType.length > 0) {
1320
1419
  setController(undefined);
1321
- var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign({
1420
+ var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
1322
1421
  mapType: mapType
1323
- }, props)) : mapType === 'google' ? new GoogleMintMapController(__assign({
1422
+ }, props), {
1423
+ base: base
1424
+ })) : mapType === 'google' ? new GoogleMintMapController(__assign(__assign({
1324
1425
  mapType: mapType
1325
- }, props)) : null;
1426
+ }, props), {
1427
+ base: base
1428
+ })) : null;
1326
1429
 
1327
1430
  if (newController_1) {
1328
1431
  newController_1.loadMapApi().then(function () {
@@ -1339,7 +1442,9 @@ function MintMap(_a) {
1339
1442
  controller: controller
1340
1443
  }, React.createElement(MintMapCore, __assign({
1341
1444
  mapType: mapType
1342
- }, props), children)) : React.createElement(PointLoading, {
1445
+ }, props, {
1446
+ base: base
1447
+ }), children)) : React.createElement(PointLoading, {
1343
1448
  text: "Loading"
1344
1449
  }));
1345
1450
  }
package/dist/index.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('react'), require('classnames/bind'), require('style-inject'), require('react-dom')) :
3
- typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'react', 'classnames/bind', 'style-inject', 'react-dom'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@mint-ui/map"] = {}, global.tslib, global.React, global.classNames, global.styleInject, global.reactDom));
5
- })(this, (function (exports, tslib, React, classNames, styleInject, reactDom) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('react'), require('classnames/bind'), require('style-inject'), require('@mint-ui/tools'), require('react-dom')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'react', 'classnames/bind', 'style-inject', '@mint-ui/tools', 'react-dom'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@mint-ui/map"] = {}, global.tslib, global.React, global.classNames, global.styleInject, global.tools, global.reactDom));
5
+ })(this, (function (exports, tslib, React, classNames, styleInject, tools, reactDom) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -43,6 +43,7 @@
43
43
  var onLoad = _a.onLoad,
44
44
  _b = _a.visible,
45
45
  visible = _b === void 0 ? true : _b,
46
+ base = _a.base,
46
47
  children = _a.children;
47
48
  var controller = useMintMapController();
48
49
  var elementRef = React.useRef(null);
@@ -80,6 +81,15 @@
80
81
  controller && controller.destroyMap();
81
82
  };
82
83
  }, [controller, elementRef]);
84
+ React.useEffect(function () {
85
+ if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
86
+ var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
87
+
88
+ if (prevZoomLevel !== base.zoomLevel) {
89
+ controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
90
+ }
91
+ }
92
+ }, [base]);
83
93
  return React__default["default"].createElement("div", {
84
94
  className: cn$2('mint-map-root'),
85
95
  style: {
@@ -346,6 +356,20 @@
346
356
  return _this;
347
357
  }
348
358
 
359
+ NaverMintMapController.prototype.initMarkerPool = function () {
360
+ var _this = this;
361
+
362
+ if (!this.mapProps.markerCache) return;
363
+ this.markerPool = new tools.ObjectPool().setFactory(function () {
364
+ return new naver.maps.Marker({
365
+ position: new Position(0, 0),
366
+ map: _this.map || undefined
367
+ });
368
+ }).setClear(function (item) {
369
+ item.setMap(null);
370
+ }).createPool(1000).setCheckLiveTimeInterval(1000);
371
+ };
372
+
349
373
  NaverMintMapController.prototype.createPolyline = function (polyline) {
350
374
  var _this = this;
351
375
 
@@ -483,8 +507,19 @@
483
507
  content: marker.element,
484
508
  anchor: marker.options.anchor
485
509
  });
486
- var naverMarker_1 = new naver.maps.Marker(options);
487
- marker.native = naverMarker_1;
510
+ var naverMarker_1;
511
+
512
+ if (this.mapProps.markerCache && this.markerPool) {
513
+ naverMarker_1 = this.markerPool.getPoolItem();
514
+ naverMarker_1.setVisible(true);
515
+ options.icon && naverMarker_1.setIcon(options.icon);
516
+ marker.native = naverMarker_1;
517
+ this.updateMarker(marker, marker.options);
518
+ } else {
519
+ naverMarker_1 = new naver.maps.Marker(options);
520
+ marker.native = naverMarker_1;
521
+ }
522
+
488
523
  ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
489
524
  if (_this.markerEvents.includes(key)) {
490
525
  naver.maps.Event.addListener(naverMarker_1, key, handler);
@@ -498,26 +533,19 @@
498
533
  var map = marker.native.getMap();
499
534
 
500
535
  if (map) {
501
- var newOption = {
502
- map: map,
503
- position: options.position instanceof Position ? options.position : marker.native.getPosition(),
504
- visible: options.visible === undefined || options.visible
505
- };
536
+ if (options.position && options.position instanceof Position) {
537
+ marker.native.setPosition(options.position);
538
+ }
506
539
 
507
- if (options.anchor) {
508
- newOption.icon = tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
509
- anchor: options.anchor
510
- });
540
+ if (options.visible !== undefined) {
541
+ marker.native.setVisible(options.visible);
511
542
  }
512
543
 
513
- marker.native.setOptions({
514
- map: map,
515
- position: options.position instanceof Position ? options.position : marker.native.getPosition(),
516
- visible: options.visible === undefined || options.visible,
517
- icon: tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
544
+ if (options.anchor) {
545
+ marker.native.setIcon(tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
518
546
  anchor: options.anchor
519
- })
520
- });
547
+ }));
548
+ }
521
549
  }
522
550
  }
523
551
  };
@@ -561,8 +589,23 @@
561
589
  };
562
590
 
563
591
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
592
+ var _a;
593
+
564
594
  if (drawable && drawable.native && drawable.native instanceof naver.maps.OverlayView) {
565
- drawable.native.setMap(null);
595
+ if (drawable.native instanceof naver.maps.Marker) {
596
+ if (this.mapProps.markerCache && this.markerPool) {
597
+ drawable.native.setVisible(false);
598
+ this.markerEvents.map(function (eName) {
599
+ drawable.native.clearListeners(eName);
600
+ });
601
+ (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
602
+ } else {
603
+ drawable.native.setMap(null);
604
+ }
605
+ } else {
606
+ drawable.native.setMap(null);
607
+ }
608
+
566
609
  return true;
567
610
  }
568
611
 
@@ -637,14 +680,14 @@
637
680
  return tslib.__generator(this, function (_a) {
638
681
  return [2, new Promise(function (resolve) {
639
682
  return tslib.__awaiter(_this, void 0, void 0, function () {
640
- var map;
683
+ var options, maxZoom, minZoom, map;
641
684
 
642
685
  var _this = this;
643
686
 
644
- var _a, _b;
687
+ var _a, _b, _c, _d;
645
688
 
646
- return tslib.__generator(this, function (_c) {
647
- switch (_c.label) {
689
+ return tslib.__generator(this, function (_e) {
690
+ switch (_e.label) {
648
691
  case 0:
649
692
  if (this.mapInitialized && this.map) {
650
693
  if (this.map.getElement() === divElement) {
@@ -659,19 +702,37 @@
659
702
  return [4, this.loadMapApi()];
660
703
 
661
704
  case 1:
662
- _c.sent();
705
+ _e.sent();
663
706
 
664
- _c.label = 2;
707
+ _e.label = 2;
665
708
 
666
709
  case 2:
667
- map = new naver.maps.Map(divElement, {
710
+ options = {
668
711
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
669
712
  zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
670
713
  logoControl: false,
671
714
  mapDataControl: false,
672
715
  mapTypeControl: false,
673
716
  scaleControl: false
674
- });
717
+ };
718
+ maxZoom = 21;
719
+ minZoom = 6;
720
+
721
+ if ((_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.maxZoomLevel) {
722
+ maxZoom = this.getSafeZoomValue(this.mapProps.base.maxZoomLevel);
723
+ }
724
+
725
+ if ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.minZoomLevel) {
726
+ minZoom = this.getSafeZoomValue(this.mapProps.base.minZoomLevel);
727
+ }
728
+
729
+ if (minZoom > maxZoom) {
730
+ minZoom = 6;
731
+ }
732
+
733
+ options.minZoom = minZoom;
734
+ options.maxZoom = maxZoom;
735
+ map = new naver.maps.Map(divElement, options);
675
736
  map.addListener('dragstart', function (e) {
676
737
  _this.dragStartPoint[0] = e.domEvent.clientX;
677
738
  _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -697,6 +758,7 @@
697
758
  });
698
759
  this.map = map;
699
760
  this.mapInitialized = true;
761
+ this.initMarkerPool();
700
762
  console.log("".concat(this.type, " map script initialized"), divElement);
701
763
  resolve(map);
702
764
  return [2];
@@ -708,11 +770,24 @@
708
770
  });
709
771
  };
710
772
 
773
+ NaverMintMapController.prototype.getSafeZoomValue = function (value) {
774
+ if (value > 21) {
775
+ return 21;
776
+ } else if (value < 6) {
777
+ return 6;
778
+ }
779
+
780
+ return value;
781
+ };
782
+
711
783
  NaverMintMapController.prototype.destroyMap = function () {
784
+ var _a;
785
+
712
786
  console.log("".concat(this.type, " map destroyed"));
713
787
 
714
788
  try {
715
789
  this.map && this.map.destroy();
790
+ (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
716
791
  } catch (e) {
717
792
  console.log('naver map destroy error', e);
718
793
  }
@@ -741,6 +816,12 @@
741
816
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
742
817
  };
743
818
 
819
+ NaverMintMapController.prototype.setZoomLevel = function (zoom) {
820
+ var _a;
821
+
822
+ (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
823
+ };
824
+
744
825
  return NaverMintMapController;
745
826
  }(MintMapController);
746
827
 
@@ -1076,10 +1157,10 @@
1076
1157
 
1077
1158
  var _this = this;
1078
1159
 
1079
- var _a, _b;
1160
+ var _a, _b, _c, _d;
1080
1161
 
1081
- return tslib.__generator(this, function (_c) {
1082
- switch (_c.label) {
1162
+ return tslib.__generator(this, function (_e) {
1163
+ switch (_e.label) {
1083
1164
  case 0:
1084
1165
  if (this.mapInitialized && this.map) {
1085
1166
  if (this.map.getDiv() === divElement) {
@@ -1092,17 +1173,19 @@
1092
1173
  return [4, this.loadMapApi()];
1093
1174
 
1094
1175
  case 1:
1095
- _c.sent();
1176
+ _e.sent();
1096
1177
 
1097
- _c.label = 2;
1178
+ _e.label = 2;
1098
1179
 
1099
1180
  case 2:
1100
1181
  map = new google.maps.Map(divElement, {
1101
1182
  mapId: this.mapProps.mapId,
1102
1183
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
1103
- maxZoom: 21,
1104
- minZoom: 1,
1105
- zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
1184
+ maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
1185
+ minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
1186
+ zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
1187
+ disableDefaultUI: true,
1188
+ gestureHandling: 'greedy'
1106
1189
  });
1107
1190
  map.addListener('dragend', function () {
1108
1191
  console.log('map dragend');
@@ -1162,6 +1245,12 @@
1162
1245
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
1163
1246
  };
1164
1247
 
1248
+ GoogleMintMapController.prototype.setZoomLevel = function (zoom) {
1249
+ var _a;
1250
+
1251
+ (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
1252
+ };
1253
+
1165
1254
  return GoogleMintMapController;
1166
1255
  }(MintMapController);
1167
1256
 
@@ -1312,23 +1401,36 @@
1312
1401
  return Polygon;
1313
1402
  }(Drawable);
1314
1403
  var cn$1 = classNames__default["default"].bind(styles$2);
1404
+ var DEFAULT_CENTER = {
1405
+ lat: 37.5036845,
1406
+ lng: 127.0448698
1407
+ };
1315
1408
  function MintMap(_a) {
1316
1409
  var mapType = _a.mapType,
1317
1410
  children = _a.children,
1318
- props = tslib.__rest(_a, ["mapType", "children"]);
1411
+ _b = _a.base,
1412
+ base = _b === void 0 ? {
1413
+ center: DEFAULT_CENTER,
1414
+ zoomLevel: 12
1415
+ } : _b,
1416
+ props = tslib.__rest(_a, ["mapType", "children", "base"]);
1319
1417
 
1320
- var _b = React.useState(),
1321
- controller = _b[0],
1322
- setController = _b[1];
1418
+ var _c = React.useState(),
1419
+ controller = _c[0],
1420
+ setController = _c[1];
1323
1421
 
1324
1422
  React.useEffect(function () {
1325
1423
  if (mapType && mapType.length > 0) {
1326
1424
  setController(undefined);
1327
- var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign({
1425
+ var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
1328
1426
  mapType: mapType
1329
- }, props)) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign({
1427
+ }, props), {
1428
+ base: base
1429
+ })) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign(tslib.__assign({
1330
1430
  mapType: mapType
1331
- }, props)) : null;
1431
+ }, props), {
1432
+ base: base
1433
+ })) : null;
1332
1434
 
1333
1435
  if (newController_1) {
1334
1436
  newController_1.loadMapApi().then(function () {
@@ -1345,7 +1447,9 @@
1345
1447
  controller: controller
1346
1448
  }, React__default["default"].createElement(MintMapCore, tslib.__assign({
1347
1449
  mapType: mapType
1348
- }, props), children)) : React__default["default"].createElement(PointLoading, {
1450
+ }, props, {
1451
+ base: base
1452
+ }), children)) : React__default["default"].createElement(PointLoading, {
1349
1453
  text: "Loading"
1350
1454
  }));
1351
1455
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mint-ui/map",
3
- "version": "0.1.6-beta",
3
+ "version": "0.1.8-beta",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "browser": "./dist/index.umd.js",
@@ -59,6 +59,7 @@
59
59
  "dependencies": {
60
60
  "@types/google.maps": "^3.50.5",
61
61
  "@types/navermaps": "^3.6.1",
62
+ "@mint-ui/tools":"1.0.3",
62
63
  "axios": "^1.2.0",
63
64
  "classnames": "^2.3.1",
64
65
  "style-inject": "^0.3.0",