@mint-ui/map 0.1.7-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 (13) hide show
  1. package/dist/components/mint-map/MintMap.d.ts +3 -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/core/wrapper/MapMarkerWrapper.js +0 -2
  7. package/dist/components/mint-map/google/GoogleMintMapController.d.ts +1 -0
  8. package/dist/components/mint-map/google/GoogleMintMapController.js +16 -8
  9. package/dist/components/mint-map/naver/NaverMintMapController.d.ts +2 -0
  10. package/dist/components/mint-map/naver/NaverMintMapController.js +42 -8
  11. package/dist/index.es.js +91 -26
  12. package/dist/index.umd.js +91 -26
  13. package/package.json +1 -1
package/dist/components/mint-map/MintMap.d.ts CHANGED
@@ -47,6 +47,8 @@ export declare class Offset {
47
47
  export interface BaseProps {
48
48
  center?: Position;
49
49
  zoomLevel?: number;
50
+ maxZoomLevel?: number;
51
+ minZoomLevel?: number;
50
52
  }
51
53
  export interface DrawableOptions {
52
54
  position: Position | Position[] | [number, number][];
@@ -85,4 +87,4 @@ export declare class Polygon extends Drawable {
85
87
  constructor(options: PolygonOptions);
86
88
  getCenter(): Position;
87
89
  }
88
- 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/core/wrapper/MapMarkerWrapper.js CHANGED
@@ -121,11 +121,9 @@ function MapMarkerWrapper(_a) {
121
121
  React.useEffect(function () {
122
122
  if (options) {
123
123
  if (markerRef.current) {
124
- console.log('update Marker');
125
124
  controller.updateMarker(markerRef.current, options);
126
125
  offsetCalibration(controller.getMapType(), divElement, options);
127
126
  } else {
128
- console.log('create Marker');
129
127
  markerRef.current = new MintMap.Marker(options);
130
128
  markerRef.current.element = divElement;
131
129
  controller.createMarker(markerRef.current);
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
@@ -29,8 +29,10 @@ export declare class NaverMintMapController extends MintMapController {
29
29
  setMapDragged(value: boolean): void;
30
30
  loadMapApi(): Promise<boolean>;
31
31
  initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
32
+ private getSafeZoomValue;
32
33
  destroyMap(): void;
33
34
  getCurrBounds(): Bounds;
34
35
  panningTo(targetCenter: Position): void;
35
36
  getZoomLevel(): number;
37
+ setZoomLevel(zoom: number): void;
36
38
  }
package/dist/components/mint-map/naver/NaverMintMapController.js CHANGED
@@ -351,14 +351,14 @@ var NaverMintMapController = function (_super) {
351
351
  return tslib.__generator(this, function (_a) {
352
352
  return [2, new Promise(function (resolve) {
353
353
  return tslib.__awaiter(_this, void 0, void 0, function () {
354
- var map;
354
+ var options, maxZoom, minZoom, map;
355
355
 
356
356
  var _this = this;
357
357
 
358
- var _a, _b;
358
+ var _a, _b, _c, _d;
359
359
 
360
- return tslib.__generator(this, function (_c) {
361
- switch (_c.label) {
360
+ return tslib.__generator(this, function (_e) {
361
+ switch (_e.label) {
362
362
  case 0:
363
363
  if (this.mapInitialized && this.map) {
364
364
  if (this.map.getElement() === divElement) {
@@ -373,19 +373,37 @@ var NaverMintMapController = function (_super) {
373
373
  return [4, this.loadMapApi()];
374
374
 
375
375
  case 1:
376
- _c.sent();
376
+ _e.sent();
377
377
 
378
- _c.label = 2;
378
+ _e.label = 2;
379
379
 
380
380
  case 2:
381
- map = new naver.maps.Map(divElement, {
381
+ options = {
382
382
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
383
383
  zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
384
384
  logoControl: false,
385
385
  mapDataControl: false,
386
386
  mapTypeControl: false,
387
387
  scaleControl: false
388
- });
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);
389
407
  map.addListener('dragstart', function (e) {
390
408
  _this.dragStartPoint[0] = e.domEvent.clientX;
391
409
  _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -423,6 +441,16 @@ var NaverMintMapController = function (_super) {
423
441
  });
424
442
  };
425
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
+
426
454
  NaverMintMapController.prototype.destroyMap = function () {
427
455
  var _a;
428
456
 
@@ -459,6 +487,12 @@ var NaverMintMapController = function (_super) {
459
487
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
460
488
  };
461
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
+
462
496
  return NaverMintMapController;
463
497
  }(MintMapController.MintMapController);
464
498
 
package/dist/index.es.js CHANGED
@@ -38,6 +38,7 @@ function MintMapCore(_a) {
38
38
  var onLoad = _a.onLoad,
39
39
  _b = _a.visible,
40
40
  visible = _b === void 0 ? true : _b,
41
+ base = _a.base,
41
42
  children = _a.children;
42
43
  var controller = useMintMapController();
43
44
  var elementRef = useRef(null);
@@ -75,6 +76,15 @@ function MintMapCore(_a) {
75
76
  controller && controller.destroyMap();
76
77
  };
77
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]);
78
88
  return React.createElement("div", {
79
89
  className: cn$2('mint-map-root'),
80
90
  style: {
@@ -665,14 +675,14 @@ var NaverMintMapController = function (_super) {
665
675
  return __generator(this, function (_a) {
666
676
  return [2, new Promise(function (resolve) {
667
677
  return __awaiter(_this, void 0, void 0, function () {
668
- var map;
678
+ var options, maxZoom, minZoom, map;
669
679
 
670
680
  var _this = this;
671
681
 
672
- var _a, _b;
682
+ var _a, _b, _c, _d;
673
683
 
674
- return __generator(this, function (_c) {
675
- switch (_c.label) {
684
+ return __generator(this, function (_e) {
685
+ switch (_e.label) {
676
686
  case 0:
677
687
  if (this.mapInitialized && this.map) {
678
688
  if (this.map.getElement() === divElement) {
@@ -687,19 +697,37 @@ var NaverMintMapController = function (_super) {
687
697
  return [4, this.loadMapApi()];
688
698
 
689
699
  case 1:
690
- _c.sent();
700
+ _e.sent();
691
701
 
692
- _c.label = 2;
702
+ _e.label = 2;
693
703
 
694
704
  case 2:
695
- map = new naver.maps.Map(divElement, {
705
+ options = {
696
706
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
697
707
  zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
698
708
  logoControl: false,
699
709
  mapDataControl: false,
700
710
  mapTypeControl: false,
701
711
  scaleControl: false
702
- });
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);
703
731
  map.addListener('dragstart', function (e) {
704
732
  _this.dragStartPoint[0] = e.domEvent.clientX;
705
733
  _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -737,6 +765,16 @@ var NaverMintMapController = function (_super) {
737
765
  });
738
766
  };
739
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
+
740
778
  NaverMintMapController.prototype.destroyMap = function () {
741
779
  var _a;
742
780
 
@@ -773,6 +811,12 @@ var NaverMintMapController = function (_super) {
773
811
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
774
812
  };
775
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
+
776
820
  return NaverMintMapController;
777
821
  }(MintMapController);
778
822
 
@@ -1108,10 +1152,10 @@ var GoogleMintMapController = function (_super) {
1108
1152
 
1109
1153
  var _this = this;
1110
1154
 
1111
- var _a, _b;
1155
+ var _a, _b, _c, _d;
1112
1156
 
1113
- return __generator(this, function (_c) {
1114
- switch (_c.label) {
1157
+ return __generator(this, function (_e) {
1158
+ switch (_e.label) {
1115
1159
  case 0:
1116
1160
  if (this.mapInitialized && this.map) {
1117
1161
  if (this.map.getDiv() === divElement) {
@@ -1124,17 +1168,19 @@ var GoogleMintMapController = function (_super) {
1124
1168
  return [4, this.loadMapApi()];
1125
1169
 
1126
1170
  case 1:
1127
- _c.sent();
1171
+ _e.sent();
1128
1172
 
1129
- _c.label = 2;
1173
+ _e.label = 2;
1130
1174
 
1131
1175
  case 2:
1132
1176
  map = new google.maps.Map(divElement, {
1133
1177
  mapId: this.mapProps.mapId,
1134
1178
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
1135
- maxZoom: 21,
1136
- minZoom: 1,
1137
- 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'
1138
1184
  });
1139
1185
  map.addListener('dragend', function () {
1140
1186
  console.log('map dragend');
@@ -1194,6 +1240,12 @@ var GoogleMintMapController = function (_super) {
1194
1240
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
1195
1241
  };
1196
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
+
1197
1249
  return GoogleMintMapController;
1198
1250
  }(MintMapController);
1199
1251
 
@@ -1344,23 +1396,36 @@ var Polygon = function (_super) {
1344
1396
  return Polygon;
1345
1397
  }(Drawable);
1346
1398
  var cn$1 = classNames.bind(styles$2);
1399
+ var DEFAULT_CENTER = {
1400
+ lat: 37.5036845,
1401
+ lng: 127.0448698
1402
+ };
1347
1403
  function MintMap(_a) {
1348
1404
  var mapType = _a.mapType,
1349
1405
  children = _a.children,
1350
- 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"]);
1351
1412
 
1352
- var _b = useState(),
1353
- controller = _b[0],
1354
- setController = _b[1];
1413
+ var _c = useState(),
1414
+ controller = _c[0],
1415
+ setController = _c[1];
1355
1416
 
1356
1417
  useEffect(function () {
1357
1418
  if (mapType && mapType.length > 0) {
1358
1419
  setController(undefined);
1359
- var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign({
1420
+ var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
1360
1421
  mapType: mapType
1361
- }, props)) : mapType === 'google' ? new GoogleMintMapController(__assign({
1422
+ }, props), {
1423
+ base: base
1424
+ })) : mapType === 'google' ? new GoogleMintMapController(__assign(__assign({
1362
1425
  mapType: mapType
1363
- }, props)) : null;
1426
+ }, props), {
1427
+ base: base
1428
+ })) : null;
1364
1429
 
1365
1430
  if (newController_1) {
1366
1431
  newController_1.loadMapApi().then(function () {
@@ -1377,7 +1442,9 @@ function MintMap(_a) {
1377
1442
  controller: controller
1378
1443
  }, React.createElement(MintMapCore, __assign({
1379
1444
  mapType: mapType
1380
- }, props), children)) : React.createElement(PointLoading, {
1445
+ }, props, {
1446
+ base: base
1447
+ }), children)) : React.createElement(PointLoading, {
1381
1448
  text: "Loading"
1382
1449
  }));
1383
1450
  }
@@ -1738,11 +1805,9 @@ function MapMarkerWrapper(_a) {
1738
1805
  useEffect(function () {
1739
1806
  if (options) {
1740
1807
  if (markerRef.current) {
1741
- console.log('update Marker');
1742
1808
  controller.updateMarker(markerRef.current, options);
1743
1809
  offsetCalibration(controller.getMapType(), divElement, options);
1744
1810
  } else {
1745
- console.log('create Marker');
1746
1811
  markerRef.current = new Marker(options);
1747
1812
  markerRef.current.element = divElement;
1748
1813
  controller.createMarker(markerRef.current);
package/dist/index.umd.js CHANGED
@@ -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: {
@@ -670,14 +680,14 @@
670
680
  return tslib.__generator(this, function (_a) {
671
681
  return [2, new Promise(function (resolve) {
672
682
  return tslib.__awaiter(_this, void 0, void 0, function () {
673
- var map;
683
+ var options, maxZoom, minZoom, map;
674
684
 
675
685
  var _this = this;
676
686
 
677
- var _a, _b;
687
+ var _a, _b, _c, _d;
678
688
 
679
- return tslib.__generator(this, function (_c) {
680
- switch (_c.label) {
689
+ return tslib.__generator(this, function (_e) {
690
+ switch (_e.label) {
681
691
  case 0:
682
692
  if (this.mapInitialized && this.map) {
683
693
  if (this.map.getElement() === divElement) {
@@ -692,19 +702,37 @@
692
702
  return [4, this.loadMapApi()];
693
703
 
694
704
  case 1:
695
- _c.sent();
705
+ _e.sent();
696
706
 
697
- _c.label = 2;
707
+ _e.label = 2;
698
708
 
699
709
  case 2:
700
- map = new naver.maps.Map(divElement, {
710
+ options = {
701
711
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
702
712
  zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
703
713
  logoControl: false,
704
714
  mapDataControl: false,
705
715
  mapTypeControl: false,
706
716
  scaleControl: false
707
- });
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);
708
736
  map.addListener('dragstart', function (e) {
709
737
  _this.dragStartPoint[0] = e.domEvent.clientX;
710
738
  _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -742,6 +770,16 @@
742
770
  });
743
771
  };
744
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
+
745
783
  NaverMintMapController.prototype.destroyMap = function () {
746
784
  var _a;
747
785
 
@@ -778,6 +816,12 @@
778
816
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
779
817
  };
780
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
+
781
825
  return NaverMintMapController;
782
826
  }(MintMapController);
783
827
 
@@ -1113,10 +1157,10 @@
1113
1157
 
1114
1158
  var _this = this;
1115
1159
 
1116
- var _a, _b;
1160
+ var _a, _b, _c, _d;
1117
1161
 
1118
- return tslib.__generator(this, function (_c) {
1119
- switch (_c.label) {
1162
+ return tslib.__generator(this, function (_e) {
1163
+ switch (_e.label) {
1120
1164
  case 0:
1121
1165
  if (this.mapInitialized && this.map) {
1122
1166
  if (this.map.getDiv() === divElement) {
@@ -1129,17 +1173,19 @@
1129
1173
  return [4, this.loadMapApi()];
1130
1174
 
1131
1175
  case 1:
1132
- _c.sent();
1176
+ _e.sent();
1133
1177
 
1134
- _c.label = 2;
1178
+ _e.label = 2;
1135
1179
 
1136
1180
  case 2:
1137
1181
  map = new google.maps.Map(divElement, {
1138
1182
  mapId: this.mapProps.mapId,
1139
1183
  center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
1140
- maxZoom: 21,
1141
- minZoom: 1,
1142
- 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'
1143
1189
  });
1144
1190
  map.addListener('dragend', function () {
1145
1191
  console.log('map dragend');
@@ -1199,6 +1245,12 @@
1199
1245
  return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
1200
1246
  };
1201
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
+
1202
1254
  return GoogleMintMapController;
1203
1255
  }(MintMapController);
1204
1256
 
@@ -1349,23 +1401,36 @@
1349
1401
  return Polygon;
1350
1402
  }(Drawable);
1351
1403
  var cn$1 = classNames__default["default"].bind(styles$2);
1404
+ var DEFAULT_CENTER = {
1405
+ lat: 37.5036845,
1406
+ lng: 127.0448698
1407
+ };
1352
1408
  function MintMap(_a) {
1353
1409
  var mapType = _a.mapType,
1354
1410
  children = _a.children,
1355
- 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"]);
1356
1417
 
1357
- var _b = React.useState(),
1358
- controller = _b[0],
1359
- setController = _b[1];
1418
+ var _c = React.useState(),
1419
+ controller = _c[0],
1420
+ setController = _c[1];
1360
1421
 
1361
1422
  React.useEffect(function () {
1362
1423
  if (mapType && mapType.length > 0) {
1363
1424
  setController(undefined);
1364
- var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign({
1425
+ var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
1365
1426
  mapType: mapType
1366
- }, props)) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign({
1427
+ }, props), {
1428
+ base: base
1429
+ })) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign(tslib.__assign({
1367
1430
  mapType: mapType
1368
- }, props)) : null;
1431
+ }, props), {
1432
+ base: base
1433
+ })) : null;
1369
1434
 
1370
1435
  if (newController_1) {
1371
1436
  newController_1.loadMapApi().then(function () {
@@ -1382,7 +1447,9 @@
1382
1447
  controller: controller
1383
1448
  }, React__default["default"].createElement(MintMapCore, tslib.__assign({
1384
1449
  mapType: mapType
1385
- }, props), children)) : React__default["default"].createElement(PointLoading, {
1450
+ }, props, {
1451
+ base: base
1452
+ }), children)) : React__default["default"].createElement(PointLoading, {
1386
1453
  text: "Loading"
1387
1454
  }));
1388
1455
  }
@@ -1743,11 +1810,9 @@
1743
1810
  React.useEffect(function () {
1744
1811
  if (options) {
1745
1812
  if (markerRef.current) {
1746
- console.log('update Marker');
1747
1813
  controller.updateMarker(markerRef.current, options);
1748
1814
  offsetCalibration(controller.getMapType(), divElement, options);
1749
1815
  } else {
1750
- console.log('create Marker');
1751
1816
  markerRef.current = new Marker(options);
1752
1817
  markerRef.current.element = divElement;
1753
1818
  controller.createMarker(markerRef.current);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mint-ui/map",
3
- "version": "0.1.7-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",