@mint-ui/map 0.7.3-beta → 0.7.5-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.
- package/dist/components/mint-map/MintMap.js +21 -12
- package/dist/components/mint-map/core/MintMapController.d.ts +2 -0
- package/dist/components/mint-map/google/GoogleMintMapController.d.ts +2 -0
- package/dist/components/mint-map/google/GoogleMintMapController.js +17 -6
- package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +2 -0
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +15 -6
- package/dist/components/mint-map/naver/NaverMintMapController.d.ts +2 -0
- package/dist/components/mint-map/naver/NaverMintMapController.js +15 -6
- package/dist/components/mint-map/types/MintMapProps.d.ts +5 -0
- package/dist/index.es.js +68 -30
- package/dist/index.umd.js +68 -30
- package/package.json +1 -1
|
@@ -23,6 +23,17 @@ var DEFAULT_CENTER = {
|
|
|
23
23
|
lat: 37.5036845,
|
|
24
24
|
lng: 127.0448698
|
|
25
25
|
};
|
|
26
|
+
var DEFAULT_ZOOM_LEVEL = 12;
|
|
27
|
+
var DEFAULT_MAP_BASE_CONFIG = {
|
|
28
|
+
center: DEFAULT_CENTER,
|
|
29
|
+
zoomLevel: DEFAULT_ZOOM_LEVEL
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
function makeBaseProps(base) {
|
|
33
|
+
!base.center && (base.center = DEFAULT_CENTER);
|
|
34
|
+
!base.zoomLevel && (base.zoomLevel = DEFAULT_ZOOM_LEVEL);
|
|
35
|
+
return base;
|
|
36
|
+
}
|
|
26
37
|
/**
|
|
27
38
|
* Mint Map 컴포넌트
|
|
28
39
|
*
|
|
@@ -31,24 +42,22 @@ var DEFAULT_CENTER = {
|
|
|
31
42
|
* @returns {JSX.Element} JSX
|
|
32
43
|
*/
|
|
33
44
|
|
|
45
|
+
|
|
34
46
|
function MintMap(_a) {
|
|
35
47
|
var mapLoadingComponent = _a.mapLoadingComponent,
|
|
36
48
|
_b = _a.dissolveEffectWhenLoaded,
|
|
37
49
|
dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
|
|
38
50
|
mapType = _a.mapType,
|
|
39
51
|
children = _a.children,
|
|
40
|
-
|
|
41
|
-
base = _c === void 0 ? {
|
|
42
|
-
center: DEFAULT_CENTER,
|
|
43
|
-
zoomLevel: 12
|
|
44
|
-
} : _c,
|
|
52
|
+
base = _a.base,
|
|
45
53
|
props = tslib.__rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
|
|
46
54
|
|
|
55
|
+
var mapBaseConfig = base ? makeBaseProps(base) : DEFAULT_MAP_BASE_CONFIG;
|
|
47
56
|
var loadingRef = React.useRef(null);
|
|
48
57
|
|
|
49
|
-
var
|
|
50
|
-
controller =
|
|
51
|
-
setController =
|
|
58
|
+
var _c = React.useState(),
|
|
59
|
+
controller = _c[0],
|
|
60
|
+
setController = _c[1];
|
|
52
61
|
|
|
53
62
|
var loading = React.useMemo(function () {
|
|
54
63
|
return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
@@ -65,15 +74,15 @@ function MintMap(_a) {
|
|
|
65
74
|
var newController_1 = mapType === 'naver' ? new NaverMintMapController.NaverMintMapController(tslib.__assign(tslib.__assign({
|
|
66
75
|
mapType: mapType
|
|
67
76
|
}, props), {
|
|
68
|
-
base:
|
|
77
|
+
base: mapBaseConfig
|
|
69
78
|
})) : mapType === 'google' ? new GoogleMintMapController.GoogleMintMapController(tslib.__assign(tslib.__assign({
|
|
70
79
|
mapType: mapType
|
|
71
80
|
}, props), {
|
|
72
|
-
base:
|
|
81
|
+
base: mapBaseConfig
|
|
73
82
|
})) : mapType === 'kakao' ? new KakaoMintMapController.KakaoMintMapController(tslib.__assign(tslib.__assign({
|
|
74
83
|
mapType: mapType
|
|
75
84
|
}, props), {
|
|
76
|
-
base:
|
|
85
|
+
base: mapBaseConfig
|
|
77
86
|
})) : null;
|
|
78
87
|
newController_1 && (prevController.current = newController_1);
|
|
79
88
|
|
|
@@ -109,7 +118,7 @@ function MintMap(_a) {
|
|
|
109
118
|
}), React__default["default"].createElement(MintMapCore.MintMapCore, tslib.__assign({
|
|
110
119
|
mapType: mapType
|
|
111
120
|
}, props, {
|
|
112
|
-
base:
|
|
121
|
+
base: mapBaseConfig
|
|
113
122
|
}), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, dissolveEffectWhenLoaded && React__default["default"].createElement("div", {
|
|
114
123
|
ref: function (refs) {
|
|
115
124
|
loadingRef.current = refs;
|
|
@@ -3,6 +3,7 @@ import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, Pol
|
|
|
3
3
|
import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from '../types/MapEventTypes';
|
|
4
4
|
import { Bounds, Offset, Position } from '../types/MapTypes';
|
|
5
5
|
import { MintMapProps } from '../types/MintMapProps';
|
|
6
|
+
import { Property } from "csstype";
|
|
6
7
|
export declare abstract class MintMapController {
|
|
7
8
|
abstract type: MapType;
|
|
8
9
|
abstract map: MapVendorType | null;
|
|
@@ -17,6 +18,7 @@ export declare abstract class MintMapController {
|
|
|
17
18
|
abstract setZoomLevel(zoom: number): void;
|
|
18
19
|
abstract getCenter(): Position;
|
|
19
20
|
abstract setCenter(position: Position): void;
|
|
21
|
+
abstract setMapCursor(cursor: Property.Cursor): void;
|
|
20
22
|
abstract createMarker(marker: Marker): void;
|
|
21
23
|
abstract updateMarker(marker: Marker, options: MarkerOptions): void;
|
|
22
24
|
abstract clearDrawable(drawable: Drawable): boolean;
|
|
@@ -5,6 +5,7 @@ import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, Pol
|
|
|
5
5
|
import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
|
|
6
6
|
import { Bounds, Position } from "../types/MapTypes";
|
|
7
7
|
import { MintMapProps } from "../types/MintMapProps";
|
|
8
|
+
import { Property } from "csstype";
|
|
8
9
|
export declare class GoogleMintMapController extends MintMapController {
|
|
9
10
|
type: MapType;
|
|
10
11
|
map: google.maps.Map | null;
|
|
@@ -43,6 +44,7 @@ export declare class GoogleMintMapController extends MintMapController {
|
|
|
43
44
|
setZoomLevel(zoom: number): void;
|
|
44
45
|
getCenter(): Position;
|
|
45
46
|
setCenter(position: Position): void;
|
|
47
|
+
setMapCursor(cursor: Property.Cursor): void;
|
|
46
48
|
private eventMap;
|
|
47
49
|
addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
|
|
48
50
|
removeEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
|
|
@@ -440,10 +440,10 @@ function (_super) {
|
|
|
440
440
|
|
|
441
441
|
var _this = this;
|
|
442
442
|
|
|
443
|
-
var _a, _b, _c, _d;
|
|
443
|
+
var _a, _b, _c, _d, _e, _f;
|
|
444
444
|
|
|
445
|
-
return tslib.__generator(this, function (
|
|
446
|
-
switch (
|
|
445
|
+
return tslib.__generator(this, function (_g) {
|
|
446
|
+
switch (_g.label) {
|
|
447
447
|
case 0:
|
|
448
448
|
//이미 생성했으면
|
|
449
449
|
//1. divElement 가 그대로인 경우 기존 map 객체 리턴
|
|
@@ -465,9 +465,9 @@ function (_super) {
|
|
|
465
465
|
, this.loadMapApi()];
|
|
466
466
|
|
|
467
467
|
case 1:
|
|
468
|
-
|
|
468
|
+
_g.sent();
|
|
469
469
|
|
|
470
|
-
|
|
470
|
+
_g.label = 2;
|
|
471
471
|
|
|
472
472
|
case 2:
|
|
473
473
|
map = new google.maps.Map(divElement, {
|
|
@@ -481,7 +481,9 @@ function (_super) {
|
|
|
481
481
|
keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
|
|
482
482
|
clickableIcons: false
|
|
483
483
|
});
|
|
484
|
-
this.map = map;
|
|
484
|
+
this.map = map; //맵 커서 초기화
|
|
485
|
+
|
|
486
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
485
487
|
|
|
486
488
|
map.addListener('mousedown', function () {
|
|
487
489
|
_this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
|
|
@@ -590,6 +592,15 @@ function (_super) {
|
|
|
590
592
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
|
|
591
593
|
};
|
|
592
594
|
|
|
595
|
+
GoogleMintMapController.prototype.setMapCursor = function (cursor) {
|
|
596
|
+
var _a;
|
|
597
|
+
|
|
598
|
+
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
599
|
+
draggingCursor: cursor,
|
|
600
|
+
draggableCursor: cursor
|
|
601
|
+
});
|
|
602
|
+
};
|
|
603
|
+
|
|
593
604
|
GoogleMintMapController.prototype.addEventListener = function (eventName, callback) {
|
|
594
605
|
var _this = this;
|
|
595
606
|
|
|
@@ -6,6 +6,7 @@ import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, Pol
|
|
|
6
6
|
import { Bounds, Position } from "../types/MapTypes";
|
|
7
7
|
import { MintMapProps } from "../types/MintMapProps";
|
|
8
8
|
import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
|
|
9
|
+
import { Property } from "csstype";
|
|
9
10
|
export declare class KakaoMintMapController extends MintMapController {
|
|
10
11
|
type: MapType;
|
|
11
12
|
map: kakao.maps.Map | null;
|
|
@@ -45,6 +46,7 @@ export declare class KakaoMintMapController extends MintMapController {
|
|
|
45
46
|
setZoomLevel(zoom: number): void;
|
|
46
47
|
getCenter(): Position;
|
|
47
48
|
setCenter(position: Position): void;
|
|
49
|
+
setMapCursor(cursor: Property.Cursor): void;
|
|
48
50
|
private positionToLatLng;
|
|
49
51
|
private latLngToPosition;
|
|
50
52
|
private eventMap;
|
|
@@ -445,10 +445,10 @@ function (_super) {
|
|
|
445
445
|
|
|
446
446
|
var _this = this;
|
|
447
447
|
|
|
448
|
-
var _a, _b, _c, _d;
|
|
448
|
+
var _a, _b, _c, _d, _e, _f;
|
|
449
449
|
|
|
450
|
-
return tslib.__generator(this, function (
|
|
451
|
-
switch (
|
|
450
|
+
return tslib.__generator(this, function (_g) {
|
|
451
|
+
switch (_g.label) {
|
|
452
452
|
case 0:
|
|
453
453
|
if (!!this.mapApiLoaded) return [3
|
|
454
454
|
/*break*/
|
|
@@ -458,9 +458,9 @@ function (_super) {
|
|
|
458
458
|
, this.loadMapApi()];
|
|
459
459
|
|
|
460
460
|
case 1:
|
|
461
|
-
|
|
461
|
+
_g.sent();
|
|
462
462
|
|
|
463
|
-
|
|
463
|
+
_g.label = 2;
|
|
464
464
|
|
|
465
465
|
case 2:
|
|
466
466
|
options = {
|
|
@@ -489,7 +489,9 @@ function (_super) {
|
|
|
489
489
|
map = new kakao.maps.Map(divElement, options);
|
|
490
490
|
map.setMaxLevel(minZoom);
|
|
491
491
|
map.setMinLevel(maxZoom);
|
|
492
|
-
this.map = map;
|
|
492
|
+
this.map = map; //맵 커서 초기화
|
|
493
|
+
|
|
494
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
493
495
|
// map.addListener('dragstart', (e)=>{
|
|
494
496
|
// //console.log('map dragstart', e);
|
|
495
497
|
// this.dragStartPoint[0] = e.domEvent.clientX
|
|
@@ -624,6 +626,13 @@ function (_super) {
|
|
|
624
626
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(this.positionToLatLng(position));
|
|
625
627
|
};
|
|
626
628
|
|
|
629
|
+
KakaoMintMapController.prototype.setMapCursor = function (cursor) {
|
|
630
|
+
var _a;
|
|
631
|
+
|
|
632
|
+
var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
|
|
633
|
+
target && (target.style.cursor = cursor);
|
|
634
|
+
};
|
|
635
|
+
|
|
627
636
|
KakaoMintMapController.prototype.positionToLatLng = function (pos) {
|
|
628
637
|
return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : new kakao.maps.LatLng(0, 0);
|
|
629
638
|
};
|
|
@@ -6,6 +6,7 @@ import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, Pol
|
|
|
6
6
|
import { Bounds, Offset, Position } from "../types/MapTypes";
|
|
7
7
|
import { MintMapProps } from "../types/MintMapProps";
|
|
8
8
|
import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
|
|
9
|
+
import { Property } from "csstype";
|
|
9
10
|
export declare class NaverMintMapController extends MintMapController {
|
|
10
11
|
type: MapType;
|
|
11
12
|
map: naver.maps.Map | null;
|
|
@@ -44,6 +45,7 @@ export declare class NaverMintMapController extends MintMapController {
|
|
|
44
45
|
setZoomLevel(zoom: number): void;
|
|
45
46
|
getCenter(): Position;
|
|
46
47
|
setCenter(position: Position): void;
|
|
48
|
+
setMapCursor(cursor: Property.Cursor): void;
|
|
47
49
|
naverPositionToOffset(position: Position): Offset;
|
|
48
50
|
private eventMap;
|
|
49
51
|
addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
|
|
@@ -460,10 +460,10 @@ function (_super) {
|
|
|
460
460
|
|
|
461
461
|
var _this = this;
|
|
462
462
|
|
|
463
|
-
var _a, _b, _c, _d;
|
|
463
|
+
var _a, _b, _c, _d, _e, _f;
|
|
464
464
|
|
|
465
|
-
return tslib.__generator(this, function (
|
|
466
|
-
switch (
|
|
465
|
+
return tslib.__generator(this, function (_g) {
|
|
466
|
+
switch (_g.label) {
|
|
467
467
|
case 0:
|
|
468
468
|
//이미 생성했으면
|
|
469
469
|
//1. divElement 가 그대로인 경우 기존 map 객체 리턴
|
|
@@ -487,9 +487,9 @@ function (_super) {
|
|
|
487
487
|
, this.loadMapApi()];
|
|
488
488
|
|
|
489
489
|
case 1:
|
|
490
|
-
|
|
490
|
+
_g.sent();
|
|
491
491
|
|
|
492
|
-
|
|
492
|
+
_g.label = 2;
|
|
493
493
|
|
|
494
494
|
case 2:
|
|
495
495
|
options = {
|
|
@@ -522,7 +522,9 @@ function (_super) {
|
|
|
522
522
|
options.maxZoom = maxZoom;
|
|
523
523
|
divElement.innerHTML = '';
|
|
524
524
|
map = new naver.maps.Map(divElement, options);
|
|
525
|
-
this.map = map;
|
|
525
|
+
this.map = map; //맵 커서 초기화
|
|
526
|
+
|
|
527
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
526
528
|
|
|
527
529
|
map.addListener('mousedown', function () {
|
|
528
530
|
_this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
|
|
@@ -637,6 +639,13 @@ function (_super) {
|
|
|
637
639
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
|
|
638
640
|
};
|
|
639
641
|
|
|
642
|
+
NaverMintMapController.prototype.setMapCursor = function (cursor) {
|
|
643
|
+
var _a;
|
|
644
|
+
|
|
645
|
+
var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
|
|
646
|
+
target && (target.style.cursor = cursor);
|
|
647
|
+
};
|
|
648
|
+
|
|
640
649
|
NaverMintMapController.prototype.naverPositionToOffset = function (position) {
|
|
641
650
|
if (!this.map) {
|
|
642
651
|
return new MapTypes.Offset(0, 0);
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { MapType } from "./CommonTypes";
|
|
3
3
|
import { Position } from "./MapTypes";
|
|
4
4
|
import { MintMapEvents } from "./MintMapEvents";
|
|
5
|
+
import { Property } from "csstype";
|
|
5
6
|
/**
|
|
6
7
|
* Mint Map Props
|
|
7
8
|
*/
|
|
@@ -98,4 +99,8 @@ export interface BaseProps {
|
|
|
98
99
|
* 지도의 최소 줌 레벨
|
|
99
100
|
*/
|
|
100
101
|
minZoomLevel?: number;
|
|
102
|
+
/**
|
|
103
|
+
* 지도의 기본 커서
|
|
104
|
+
*/
|
|
105
|
+
mapCursor?: Property.Cursor;
|
|
101
106
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1952,10 +1952,10 @@ function (_super) {
|
|
|
1952
1952
|
|
|
1953
1953
|
var _this = this;
|
|
1954
1954
|
|
|
1955
|
-
var _a, _b, _c, _d;
|
|
1955
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1956
1956
|
|
|
1957
|
-
return __generator(this, function (
|
|
1958
|
-
switch (
|
|
1957
|
+
return __generator(this, function (_g) {
|
|
1958
|
+
switch (_g.label) {
|
|
1959
1959
|
case 0:
|
|
1960
1960
|
//이미 생성했으면
|
|
1961
1961
|
//1. divElement 가 그대로인 경우 기존 map 객체 리턴
|
|
@@ -1979,9 +1979,9 @@ function (_super) {
|
|
|
1979
1979
|
, this.loadMapApi()];
|
|
1980
1980
|
|
|
1981
1981
|
case 1:
|
|
1982
|
-
|
|
1982
|
+
_g.sent();
|
|
1983
1983
|
|
|
1984
|
-
|
|
1984
|
+
_g.label = 2;
|
|
1985
1985
|
|
|
1986
1986
|
case 2:
|
|
1987
1987
|
options = {
|
|
@@ -2014,7 +2014,9 @@ function (_super) {
|
|
|
2014
2014
|
options.maxZoom = maxZoom;
|
|
2015
2015
|
divElement.innerHTML = '';
|
|
2016
2016
|
map = new naver.maps.Map(divElement, options);
|
|
2017
|
-
this.map = map;
|
|
2017
|
+
this.map = map; //맵 커서 초기화
|
|
2018
|
+
|
|
2019
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
2018
2020
|
|
|
2019
2021
|
map.addListener('mousedown', function () {
|
|
2020
2022
|
_this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
|
|
@@ -2129,6 +2131,13 @@ function (_super) {
|
|
|
2129
2131
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
|
|
2130
2132
|
};
|
|
2131
2133
|
|
|
2134
|
+
NaverMintMapController.prototype.setMapCursor = function (cursor) {
|
|
2135
|
+
var _a;
|
|
2136
|
+
|
|
2137
|
+
var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
|
|
2138
|
+
target && (target.style.cursor = cursor);
|
|
2139
|
+
};
|
|
2140
|
+
|
|
2132
2141
|
NaverMintMapController.prototype.naverPositionToOffset = function (position) {
|
|
2133
2142
|
if (!this.map) {
|
|
2134
2143
|
return new Offset(0, 0);
|
|
@@ -2664,10 +2673,10 @@ function (_super) {
|
|
|
2664
2673
|
|
|
2665
2674
|
var _this = this;
|
|
2666
2675
|
|
|
2667
|
-
var _a, _b, _c, _d;
|
|
2676
|
+
var _a, _b, _c, _d, _e, _f;
|
|
2668
2677
|
|
|
2669
|
-
return __generator(this, function (
|
|
2670
|
-
switch (
|
|
2678
|
+
return __generator(this, function (_g) {
|
|
2679
|
+
switch (_g.label) {
|
|
2671
2680
|
case 0:
|
|
2672
2681
|
//이미 생성했으면
|
|
2673
2682
|
//1. divElement 가 그대로인 경우 기존 map 객체 리턴
|
|
@@ -2689,9 +2698,9 @@ function (_super) {
|
|
|
2689
2698
|
, this.loadMapApi()];
|
|
2690
2699
|
|
|
2691
2700
|
case 1:
|
|
2692
|
-
|
|
2701
|
+
_g.sent();
|
|
2693
2702
|
|
|
2694
|
-
|
|
2703
|
+
_g.label = 2;
|
|
2695
2704
|
|
|
2696
2705
|
case 2:
|
|
2697
2706
|
map = new google.maps.Map(divElement, {
|
|
@@ -2705,7 +2714,9 @@ function (_super) {
|
|
|
2705
2714
|
keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
|
|
2706
2715
|
clickableIcons: false
|
|
2707
2716
|
});
|
|
2708
|
-
this.map = map;
|
|
2717
|
+
this.map = map; //맵 커서 초기화
|
|
2718
|
+
|
|
2719
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
2709
2720
|
|
|
2710
2721
|
map.addListener('mousedown', function () {
|
|
2711
2722
|
_this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
|
|
@@ -2814,6 +2825,15 @@ function (_super) {
|
|
|
2814
2825
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
|
|
2815
2826
|
};
|
|
2816
2827
|
|
|
2828
|
+
GoogleMintMapController.prototype.setMapCursor = function (cursor) {
|
|
2829
|
+
var _a;
|
|
2830
|
+
|
|
2831
|
+
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
2832
|
+
draggingCursor: cursor,
|
|
2833
|
+
draggableCursor: cursor
|
|
2834
|
+
});
|
|
2835
|
+
};
|
|
2836
|
+
|
|
2817
2837
|
GoogleMintMapController.prototype.addEventListener = function (eventName, callback) {
|
|
2818
2838
|
var _this = this;
|
|
2819
2839
|
|
|
@@ -3359,10 +3379,10 @@ function (_super) {
|
|
|
3359
3379
|
|
|
3360
3380
|
var _this = this;
|
|
3361
3381
|
|
|
3362
|
-
var _a, _b, _c, _d;
|
|
3382
|
+
var _a, _b, _c, _d, _e, _f;
|
|
3363
3383
|
|
|
3364
|
-
return __generator(this, function (
|
|
3365
|
-
switch (
|
|
3384
|
+
return __generator(this, function (_g) {
|
|
3385
|
+
switch (_g.label) {
|
|
3366
3386
|
case 0:
|
|
3367
3387
|
if (!!this.mapApiLoaded) return [3
|
|
3368
3388
|
/*break*/
|
|
@@ -3372,9 +3392,9 @@ function (_super) {
|
|
|
3372
3392
|
, this.loadMapApi()];
|
|
3373
3393
|
|
|
3374
3394
|
case 1:
|
|
3375
|
-
|
|
3395
|
+
_g.sent();
|
|
3376
3396
|
|
|
3377
|
-
|
|
3397
|
+
_g.label = 2;
|
|
3378
3398
|
|
|
3379
3399
|
case 2:
|
|
3380
3400
|
options = {
|
|
@@ -3403,7 +3423,9 @@ function (_super) {
|
|
|
3403
3423
|
map = new kakao.maps.Map(divElement, options);
|
|
3404
3424
|
map.setMaxLevel(minZoom);
|
|
3405
3425
|
map.setMinLevel(maxZoom);
|
|
3406
|
-
this.map = map;
|
|
3426
|
+
this.map = map; //맵 커서 초기화
|
|
3427
|
+
|
|
3428
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
3407
3429
|
// map.addListener('dragstart', (e)=>{
|
|
3408
3430
|
// //console.log('map dragstart', e);
|
|
3409
3431
|
// this.dragStartPoint[0] = e.domEvent.clientX
|
|
@@ -3538,6 +3560,13 @@ function (_super) {
|
|
|
3538
3560
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(this.positionToLatLng(position));
|
|
3539
3561
|
};
|
|
3540
3562
|
|
|
3563
|
+
KakaoMintMapController.prototype.setMapCursor = function (cursor) {
|
|
3564
|
+
var _a;
|
|
3565
|
+
|
|
3566
|
+
var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
|
|
3567
|
+
target && (target.style.cursor = cursor);
|
|
3568
|
+
};
|
|
3569
|
+
|
|
3541
3570
|
KakaoMintMapController.prototype.positionToLatLng = function (pos) {
|
|
3542
3571
|
return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : new kakao.maps.LatLng(0, 0);
|
|
3543
3572
|
};
|
|
@@ -3663,6 +3692,17 @@ var DEFAULT_CENTER = {
|
|
|
3663
3692
|
lat: 37.5036845,
|
|
3664
3693
|
lng: 127.0448698
|
|
3665
3694
|
};
|
|
3695
|
+
var DEFAULT_ZOOM_LEVEL = 12;
|
|
3696
|
+
var DEFAULT_MAP_BASE_CONFIG = {
|
|
3697
|
+
center: DEFAULT_CENTER,
|
|
3698
|
+
zoomLevel: DEFAULT_ZOOM_LEVEL
|
|
3699
|
+
};
|
|
3700
|
+
|
|
3701
|
+
function makeBaseProps(base) {
|
|
3702
|
+
!base.center && (base.center = DEFAULT_CENTER);
|
|
3703
|
+
!base.zoomLevel && (base.zoomLevel = DEFAULT_ZOOM_LEVEL);
|
|
3704
|
+
return base;
|
|
3705
|
+
}
|
|
3666
3706
|
/**
|
|
3667
3707
|
* Mint Map 컴포넌트
|
|
3668
3708
|
*
|
|
@@ -3671,24 +3711,22 @@ var DEFAULT_CENTER = {
|
|
|
3671
3711
|
* @returns {JSX.Element} JSX
|
|
3672
3712
|
*/
|
|
3673
3713
|
|
|
3714
|
+
|
|
3674
3715
|
function MintMap(_a) {
|
|
3675
3716
|
var mapLoadingComponent = _a.mapLoadingComponent,
|
|
3676
3717
|
_b = _a.dissolveEffectWhenLoaded,
|
|
3677
3718
|
dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
|
|
3678
3719
|
mapType = _a.mapType,
|
|
3679
3720
|
children = _a.children,
|
|
3680
|
-
|
|
3681
|
-
base = _c === void 0 ? {
|
|
3682
|
-
center: DEFAULT_CENTER,
|
|
3683
|
-
zoomLevel: 12
|
|
3684
|
-
} : _c,
|
|
3721
|
+
base = _a.base,
|
|
3685
3722
|
props = __rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
|
|
3686
3723
|
|
|
3724
|
+
var mapBaseConfig = base ? makeBaseProps(base) : DEFAULT_MAP_BASE_CONFIG;
|
|
3687
3725
|
var loadingRef = useRef(null);
|
|
3688
3726
|
|
|
3689
|
-
var
|
|
3690
|
-
controller =
|
|
3691
|
-
setController =
|
|
3727
|
+
var _c = useState(),
|
|
3728
|
+
controller = _c[0],
|
|
3729
|
+
setController = _c[1];
|
|
3692
3730
|
|
|
3693
3731
|
var loading = useMemo(function () {
|
|
3694
3732
|
return mapLoadingComponent ? mapLoadingComponent() : React.createElement(React.Fragment, null);
|
|
@@ -3705,15 +3743,15 @@ function MintMap(_a) {
|
|
|
3705
3743
|
var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
|
|
3706
3744
|
mapType: mapType
|
|
3707
3745
|
}, props), {
|
|
3708
|
-
base:
|
|
3746
|
+
base: mapBaseConfig
|
|
3709
3747
|
})) : mapType === 'google' ? new GoogleMintMapController(__assign(__assign({
|
|
3710
3748
|
mapType: mapType
|
|
3711
3749
|
}, props), {
|
|
3712
|
-
base:
|
|
3750
|
+
base: mapBaseConfig
|
|
3713
3751
|
})) : mapType === 'kakao' ? new KakaoMintMapController(__assign(__assign({
|
|
3714
3752
|
mapType: mapType
|
|
3715
3753
|
}, props), {
|
|
3716
|
-
base:
|
|
3754
|
+
base: mapBaseConfig
|
|
3717
3755
|
})) : null;
|
|
3718
3756
|
newController_1 && (prevController.current = newController_1);
|
|
3719
3757
|
|
|
@@ -3749,7 +3787,7 @@ function MintMap(_a) {
|
|
|
3749
3787
|
}), React.createElement(MintMapCore, __assign({
|
|
3750
3788
|
mapType: mapType
|
|
3751
3789
|
}, props, {
|
|
3752
|
-
base:
|
|
3790
|
+
base: mapBaseConfig
|
|
3753
3791
|
}), children)) : React.createElement(React.Fragment, null, dissolveEffectWhenLoaded && React.createElement("div", {
|
|
3754
3792
|
ref: function (refs) {
|
|
3755
3793
|
loadingRef.current = refs;
|
package/dist/index.umd.js
CHANGED
|
@@ -1956,10 +1956,10 @@
|
|
|
1956
1956
|
|
|
1957
1957
|
var _this = this;
|
|
1958
1958
|
|
|
1959
|
-
var _a, _b, _c, _d;
|
|
1959
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1960
1960
|
|
|
1961
|
-
return tslib.__generator(this, function (
|
|
1962
|
-
switch (
|
|
1961
|
+
return tslib.__generator(this, function (_g) {
|
|
1962
|
+
switch (_g.label) {
|
|
1963
1963
|
case 0:
|
|
1964
1964
|
//이미 생성했으면
|
|
1965
1965
|
//1. divElement 가 그대로인 경우 기존 map 객체 리턴
|
|
@@ -1983,9 +1983,9 @@
|
|
|
1983
1983
|
, this.loadMapApi()];
|
|
1984
1984
|
|
|
1985
1985
|
case 1:
|
|
1986
|
-
|
|
1986
|
+
_g.sent();
|
|
1987
1987
|
|
|
1988
|
-
|
|
1988
|
+
_g.label = 2;
|
|
1989
1989
|
|
|
1990
1990
|
case 2:
|
|
1991
1991
|
options = {
|
|
@@ -2018,7 +2018,9 @@
|
|
|
2018
2018
|
options.maxZoom = maxZoom;
|
|
2019
2019
|
divElement.innerHTML = '';
|
|
2020
2020
|
map = new naver.maps.Map(divElement, options);
|
|
2021
|
-
this.map = map;
|
|
2021
|
+
this.map = map; //맵 커서 초기화
|
|
2022
|
+
|
|
2023
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
2022
2024
|
|
|
2023
2025
|
map.addListener('mousedown', function () {
|
|
2024
2026
|
_this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
|
|
@@ -2133,6 +2135,13 @@
|
|
|
2133
2135
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
|
|
2134
2136
|
};
|
|
2135
2137
|
|
|
2138
|
+
NaverMintMapController.prototype.setMapCursor = function (cursor) {
|
|
2139
|
+
var _a;
|
|
2140
|
+
|
|
2141
|
+
var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
|
|
2142
|
+
target && (target.style.cursor = cursor);
|
|
2143
|
+
};
|
|
2144
|
+
|
|
2136
2145
|
NaverMintMapController.prototype.naverPositionToOffset = function (position) {
|
|
2137
2146
|
if (!this.map) {
|
|
2138
2147
|
return new Offset(0, 0);
|
|
@@ -2668,10 +2677,10 @@
|
|
|
2668
2677
|
|
|
2669
2678
|
var _this = this;
|
|
2670
2679
|
|
|
2671
|
-
var _a, _b, _c, _d;
|
|
2680
|
+
var _a, _b, _c, _d, _e, _f;
|
|
2672
2681
|
|
|
2673
|
-
return tslib.__generator(this, function (
|
|
2674
|
-
switch (
|
|
2682
|
+
return tslib.__generator(this, function (_g) {
|
|
2683
|
+
switch (_g.label) {
|
|
2675
2684
|
case 0:
|
|
2676
2685
|
//이미 생성했으면
|
|
2677
2686
|
//1. divElement 가 그대로인 경우 기존 map 객체 리턴
|
|
@@ -2693,9 +2702,9 @@
|
|
|
2693
2702
|
, this.loadMapApi()];
|
|
2694
2703
|
|
|
2695
2704
|
case 1:
|
|
2696
|
-
|
|
2705
|
+
_g.sent();
|
|
2697
2706
|
|
|
2698
|
-
|
|
2707
|
+
_g.label = 2;
|
|
2699
2708
|
|
|
2700
2709
|
case 2:
|
|
2701
2710
|
map = new google.maps.Map(divElement, {
|
|
@@ -2709,7 +2718,9 @@
|
|
|
2709
2718
|
keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
|
|
2710
2719
|
clickableIcons: false
|
|
2711
2720
|
});
|
|
2712
|
-
this.map = map;
|
|
2721
|
+
this.map = map; //맵 커서 초기화
|
|
2722
|
+
|
|
2723
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
2713
2724
|
|
|
2714
2725
|
map.addListener('mousedown', function () {
|
|
2715
2726
|
_this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
|
|
@@ -2818,6 +2829,15 @@
|
|
|
2818
2829
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
|
|
2819
2830
|
};
|
|
2820
2831
|
|
|
2832
|
+
GoogleMintMapController.prototype.setMapCursor = function (cursor) {
|
|
2833
|
+
var _a;
|
|
2834
|
+
|
|
2835
|
+
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setOptions({
|
|
2836
|
+
draggingCursor: cursor,
|
|
2837
|
+
draggableCursor: cursor
|
|
2838
|
+
});
|
|
2839
|
+
};
|
|
2840
|
+
|
|
2821
2841
|
GoogleMintMapController.prototype.addEventListener = function (eventName, callback) {
|
|
2822
2842
|
var _this = this;
|
|
2823
2843
|
|
|
@@ -3363,10 +3383,10 @@
|
|
|
3363
3383
|
|
|
3364
3384
|
var _this = this;
|
|
3365
3385
|
|
|
3366
|
-
var _a, _b, _c, _d;
|
|
3386
|
+
var _a, _b, _c, _d, _e, _f;
|
|
3367
3387
|
|
|
3368
|
-
return tslib.__generator(this, function (
|
|
3369
|
-
switch (
|
|
3388
|
+
return tslib.__generator(this, function (_g) {
|
|
3389
|
+
switch (_g.label) {
|
|
3370
3390
|
case 0:
|
|
3371
3391
|
if (!!this.mapApiLoaded) return [3
|
|
3372
3392
|
/*break*/
|
|
@@ -3376,9 +3396,9 @@
|
|
|
3376
3396
|
, this.loadMapApi()];
|
|
3377
3397
|
|
|
3378
3398
|
case 1:
|
|
3379
|
-
|
|
3399
|
+
_g.sent();
|
|
3380
3400
|
|
|
3381
|
-
|
|
3401
|
+
_g.label = 2;
|
|
3382
3402
|
|
|
3383
3403
|
case 2:
|
|
3384
3404
|
options = {
|
|
@@ -3407,7 +3427,9 @@
|
|
|
3407
3427
|
map = new kakao.maps.Map(divElement, options);
|
|
3408
3428
|
map.setMaxLevel(minZoom);
|
|
3409
3429
|
map.setMinLevel(maxZoom);
|
|
3410
|
-
this.map = map;
|
|
3430
|
+
this.map = map; //맵 커서 초기화
|
|
3431
|
+
|
|
3432
|
+
((_e = this.mapProps.base) === null || _e === void 0 ? void 0 : _e.mapCursor) && this.setMapCursor((_f = this.mapProps.base) === null || _f === void 0 ? void 0 : _f.mapCursor); //@ts-ignore
|
|
3411
3433
|
// map.addListener('dragstart', (e)=>{
|
|
3412
3434
|
// //console.log('map dragstart', e);
|
|
3413
3435
|
// this.dragStartPoint[0] = e.domEvent.clientX
|
|
@@ -3542,6 +3564,13 @@
|
|
|
3542
3564
|
(_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(this.positionToLatLng(position));
|
|
3543
3565
|
};
|
|
3544
3566
|
|
|
3567
|
+
KakaoMintMapController.prototype.setMapCursor = function (cursor) {
|
|
3568
|
+
var _a;
|
|
3569
|
+
|
|
3570
|
+
var target = (_a = this.mapDivElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
|
|
3571
|
+
target && (target.style.cursor = cursor);
|
|
3572
|
+
};
|
|
3573
|
+
|
|
3545
3574
|
KakaoMintMapController.prototype.positionToLatLng = function (pos) {
|
|
3546
3575
|
return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : new kakao.maps.LatLng(0, 0);
|
|
3547
3576
|
};
|
|
@@ -3667,6 +3696,17 @@
|
|
|
3667
3696
|
lat: 37.5036845,
|
|
3668
3697
|
lng: 127.0448698
|
|
3669
3698
|
};
|
|
3699
|
+
var DEFAULT_ZOOM_LEVEL = 12;
|
|
3700
|
+
var DEFAULT_MAP_BASE_CONFIG = {
|
|
3701
|
+
center: DEFAULT_CENTER,
|
|
3702
|
+
zoomLevel: DEFAULT_ZOOM_LEVEL
|
|
3703
|
+
};
|
|
3704
|
+
|
|
3705
|
+
function makeBaseProps(base) {
|
|
3706
|
+
!base.center && (base.center = DEFAULT_CENTER);
|
|
3707
|
+
!base.zoomLevel && (base.zoomLevel = DEFAULT_ZOOM_LEVEL);
|
|
3708
|
+
return base;
|
|
3709
|
+
}
|
|
3670
3710
|
/**
|
|
3671
3711
|
* Mint Map 컴포넌트
|
|
3672
3712
|
*
|
|
@@ -3675,24 +3715,22 @@
|
|
|
3675
3715
|
* @returns {JSX.Element} JSX
|
|
3676
3716
|
*/
|
|
3677
3717
|
|
|
3718
|
+
|
|
3678
3719
|
function MintMap(_a) {
|
|
3679
3720
|
var mapLoadingComponent = _a.mapLoadingComponent,
|
|
3680
3721
|
_b = _a.dissolveEffectWhenLoaded,
|
|
3681
3722
|
dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
|
|
3682
3723
|
mapType = _a.mapType,
|
|
3683
3724
|
children = _a.children,
|
|
3684
|
-
|
|
3685
|
-
base = _c === void 0 ? {
|
|
3686
|
-
center: DEFAULT_CENTER,
|
|
3687
|
-
zoomLevel: 12
|
|
3688
|
-
} : _c,
|
|
3725
|
+
base = _a.base,
|
|
3689
3726
|
props = tslib.__rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
|
|
3690
3727
|
|
|
3728
|
+
var mapBaseConfig = base ? makeBaseProps(base) : DEFAULT_MAP_BASE_CONFIG;
|
|
3691
3729
|
var loadingRef = React.useRef(null);
|
|
3692
3730
|
|
|
3693
|
-
var
|
|
3694
|
-
controller =
|
|
3695
|
-
setController =
|
|
3731
|
+
var _c = React.useState(),
|
|
3732
|
+
controller = _c[0],
|
|
3733
|
+
setController = _c[1];
|
|
3696
3734
|
|
|
3697
3735
|
var loading = React.useMemo(function () {
|
|
3698
3736
|
return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
@@ -3709,15 +3747,15 @@
|
|
|
3709
3747
|
var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
|
|
3710
3748
|
mapType: mapType
|
|
3711
3749
|
}, props), {
|
|
3712
|
-
base:
|
|
3750
|
+
base: mapBaseConfig
|
|
3713
3751
|
})) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign(tslib.__assign({
|
|
3714
3752
|
mapType: mapType
|
|
3715
3753
|
}, props), {
|
|
3716
|
-
base:
|
|
3754
|
+
base: mapBaseConfig
|
|
3717
3755
|
})) : mapType === 'kakao' ? new KakaoMintMapController(tslib.__assign(tslib.__assign({
|
|
3718
3756
|
mapType: mapType
|
|
3719
3757
|
}, props), {
|
|
3720
|
-
base:
|
|
3758
|
+
base: mapBaseConfig
|
|
3721
3759
|
})) : null;
|
|
3722
3760
|
newController_1 && (prevController.current = newController_1);
|
|
3723
3761
|
|
|
@@ -3753,7 +3791,7 @@
|
|
|
3753
3791
|
}), React__default["default"].createElement(MintMapCore, tslib.__assign({
|
|
3754
3792
|
mapType: mapType
|
|
3755
3793
|
}, props, {
|
|
3756
|
-
base:
|
|
3794
|
+
base: mapBaseConfig
|
|
3757
3795
|
}), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, dissolveEffectWhenLoaded && React__default["default"].createElement("div", {
|
|
3758
3796
|
ref: function (refs) {
|
|
3759
3797
|
loadingRef.current = refs;
|