1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
import mapboxgl from "mapbox-gl";
function wrapElmApplication(elmApp) {
window.customElements.define(
"elm-mapbox-map",
class MapboxMap extends window.HTMLElement {
constructor() {
super();
this._refreshExpiredTiles = true;
this._renderWorldCopies = true;
this.interactive = true;
}
get mapboxStyle() {
return this._style;
}
set mapboxStyle(value) {
if (this._map) this._map.setStyle(value);
this._style = value;
}
get minZoom() {
return this._minZoom;
}
set minZoom(value) {
if (this._map) this._map.setMinZoom(value);
this._minZoom = value;
}
get maxZoom() {
return this._maxZoom;
}
set maxZoom(value) {
if (this._map) this._map.setMaxZoom(value);
this._maxZoom = value;
}
get map() {
return this._map;
}
get maxBounds() {
return this._maxBounds;
}
set maxBounds(value) {
if (this._map) this._map.setBounds(value);
this._maxBounds = value;
}
get renderWorldCopies() {
return this._renderWorldCopies;
}
set renderWorldCopies(value) {
if (this._map) this._map.setRenderWorldCopies(value);
this._renderWorldCopies = value;
}
connectedCallback() {
mapboxgl.accessToken = this.token;
this.style.display = "block";
this.style.width = "100%";
this.style.height = "100%";
this._map = new mapboxgl.Map({
container: this,
style: this._style,
minZoom: this._minZoom || 0,
maxZoom: this._maxZoom || 22,
interactive: this.interactive,
attributionControl: false,
logoPosition: this.logoPosition || "bottom-left",
refreshExpiredTiles: this._refreshExpiredTiles,
maxBounds: this._maxBounds,
center: this.center,
// zoom: this.zoom,
// bearing: this.bearing,
// pitch: this.pitch,
renderWorldCopies: this._renderWorldCopies
// maxTileCacheSize: this._maxTileCacheSize,
// localIdeographFamily: this._localIdeographFamily
});
}
disconnectedCallback() {
this._map.remove();
delete this._map;
}
}
);
return elmApp;
}
export default wrapElmApplication;
|
