@record-evolution/widget-mapbox 1.4.16 → 1.4.18
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/icons/car-front.svg +16 -0
- package/dist/icons/car-top.svg +42 -0
- package/dist/icons/marker.svg +7 -0
- package/dist/src/widget-mapbox.d.ts +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-mapbox.js +57 -48
- package/dist/widget-mapbox.js.map +1 -1
- package/package.json +67 -66
- package/src/default-data.json +1 -1
- package/src/definition-schema.d.ts +14 -125
- package/src/definition-schema.json +4 -120
- package/src/widget-mapbox.ts +45 -32
package/package.json
CHANGED
|
@@ -1,68 +1,69 @@
|
|
|
1
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
|
-
|
|
2
|
+
"name": "@record-evolution/widget-mapbox",
|
|
3
|
+
"description": "REWidget widget-mapbox",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"author": "widget-mapbox",
|
|
6
|
+
"version": "1.4.18",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "dist/widget-mapbox.js",
|
|
9
|
+
"types": "dist/src/widget-mapbox.d.ts",
|
|
10
|
+
"files": [
|
|
11
|
+
"dist",
|
|
12
|
+
"src"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"analyze": "cem analyze --litelement",
|
|
16
|
+
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
17
|
+
"build": "rollup -c rollup.config.js",
|
|
18
|
+
"watch": "rollup -w -c rollup.config.js",
|
|
19
|
+
"types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
|
|
20
|
+
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
21
|
+
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
22
|
+
"release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@types/geojson": "^7946.0.12",
|
|
26
|
+
"@types/mapbox-gl": "^2.7.18",
|
|
27
|
+
"lit": "^3.0.2",
|
|
28
|
+
"mapbox-gl": "^2.15.0",
|
|
29
|
+
"tinycolor2": "^1.6.0"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@babel/plugin-syntax-import-assertions": "^7.22.5",
|
|
33
|
+
"@custom-elements-manifest/analyzer": "^0.9.0",
|
|
34
|
+
"@open-wc/eslint-config": "^12.0.2",
|
|
35
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
36
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
37
|
+
"@rollup/plugin-json": "^6.0.1",
|
|
38
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
39
|
+
"@rollup/plugin-replace": "^5.0.5",
|
|
40
|
+
"@rollup/plugin-typescript": "^11.1.5",
|
|
41
|
+
"@types/tinycolor2": "^1.4.6",
|
|
42
|
+
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
|
43
|
+
"@typescript-eslint/parser": "^6.9.1",
|
|
44
|
+
"@web/dev-server": "^0.4.0",
|
|
45
|
+
"concurrently": "^8.2.2",
|
|
46
|
+
"eslint": "^8.53.0",
|
|
47
|
+
"eslint-config-prettier": "^9.0.0",
|
|
48
|
+
"husky": "^8.0.3",
|
|
49
|
+
"json-schema-to-typescript": "^13.1.1",
|
|
50
|
+
"lint-staged": "^15.0.2",
|
|
51
|
+
"prettier": "^3.0.3",
|
|
52
|
+
"rollup": "^3.21.0",
|
|
53
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
54
|
+
"tslib": "^2.6.2",
|
|
55
|
+
"typescript": "^5.2.2"
|
|
56
|
+
},
|
|
57
|
+
"repository": {
|
|
58
|
+
"type": "git",
|
|
59
|
+
"url": "git+https://github.com/RecordEvolution/widget-mapbox.git"
|
|
60
|
+
},
|
|
61
|
+
"keywords": [
|
|
62
|
+
"widget",
|
|
63
|
+
"mapbox"
|
|
64
|
+
],
|
|
65
|
+
"bugs": {
|
|
66
|
+
"url": "https://github.com/RecordEvolution/widget-mapbox/issues"
|
|
67
|
+
},
|
|
68
|
+
"homepage": "https://github.com/RecordEvolution/widget-mapbox#readme"
|
|
68
69
|
}
|
package/src/default-data.json
CHANGED
|
@@ -37,131 +37,20 @@ export type LayerBaseColor = string;
|
|
|
37
37
|
* Restrict the number of rows for this dataseries to the given number of newest values. (If pivoted, then per each of the pivot dataseries.)
|
|
38
38
|
*/
|
|
39
39
|
export type LatestValues = number;
|
|
40
|
+
/**
|
|
41
|
+
* Blur of 1 means the whole circle is blurred starting from the center point. Blur 0 means no blur effect.
|
|
42
|
+
*/
|
|
40
43
|
export type Blur = number;
|
|
44
|
+
/**
|
|
45
|
+
* Opactity 1 means fully opaque, 0 means fully transparent.
|
|
46
|
+
*/
|
|
41
47
|
export type Opacity = number;
|
|
42
48
|
export type TextColor = string;
|
|
43
49
|
export type TextSize = number;
|
|
44
50
|
/**
|
|
45
51
|
* For available icons check the maki icon set here https://labs.mapbox.com/maki-icons/
|
|
46
52
|
*/
|
|
47
|
-
export type IconName =
|
|
48
|
-
| "marker"
|
|
49
|
-
| "airfield"
|
|
50
|
-
| "airport"
|
|
51
|
-
| "alcohol-shop"
|
|
52
|
-
| "america-football"
|
|
53
|
-
| "amusement-park"
|
|
54
|
-
| "aquarium"
|
|
55
|
-
| "art-gallery"
|
|
56
|
-
| "bakery"
|
|
57
|
-
| "bank"
|
|
58
|
-
| "bar"
|
|
59
|
-
| "baseball"
|
|
60
|
-
| "basketball"
|
|
61
|
-
| "beer"
|
|
62
|
-
| "bicycle"
|
|
63
|
-
| "building"
|
|
64
|
-
| "bus"
|
|
65
|
-
| "cafe"
|
|
66
|
-
| "campsite"
|
|
67
|
-
| "car"
|
|
68
|
-
| "cemetery"
|
|
69
|
-
| "cinema"
|
|
70
|
-
| "circle"
|
|
71
|
-
| "college"
|
|
72
|
-
| "commerical"
|
|
73
|
-
| "cricket"
|
|
74
|
-
| "cross"
|
|
75
|
-
| "dam"
|
|
76
|
-
| "danger"
|
|
77
|
-
| "dog-park"
|
|
78
|
-
| "embassy"
|
|
79
|
-
| "emergency-telephone"
|
|
80
|
-
| "entrance"
|
|
81
|
-
| "farm"
|
|
82
|
-
| "fast-food"
|
|
83
|
-
| "ferry"
|
|
84
|
-
| "fire-station"
|
|
85
|
-
| "fuel"
|
|
86
|
-
| "garden"
|
|
87
|
-
| "golf"
|
|
88
|
-
| "grocery-store"
|
|
89
|
-
| "hairdresser"
|
|
90
|
-
| "harbor"
|
|
91
|
-
| "heart"
|
|
92
|
-
| "heliport"
|
|
93
|
-
| "hospital"
|
|
94
|
-
| "industrial"
|
|
95
|
-
| "information"
|
|
96
|
-
| "laundry"
|
|
97
|
-
| "library"
|
|
98
|
-
| "lighthouse"
|
|
99
|
-
| "lodging"
|
|
100
|
-
| "logging"
|
|
101
|
-
| "london-underground"
|
|
102
|
-
| "marker-stroked"
|
|
103
|
-
| "minefield"
|
|
104
|
-
| "mobile-phone"
|
|
105
|
-
| "monument"
|
|
106
|
-
| "mountain"
|
|
107
|
-
| "museum"
|
|
108
|
-
| "music"
|
|
109
|
-
| "oil-well"
|
|
110
|
-
| "park"
|
|
111
|
-
| "parking"
|
|
112
|
-
| "parking-garage"
|
|
113
|
-
| "pharmacy"
|
|
114
|
-
| "picnic-site"
|
|
115
|
-
| "pitch"
|
|
116
|
-
| "place-of-worship"
|
|
117
|
-
| "playground"
|
|
118
|
-
| "police"
|
|
119
|
-
| "polling-place"
|
|
120
|
-
| "post"
|
|
121
|
-
| "prison"
|
|
122
|
-
| "rail"
|
|
123
|
-
| "rail-above"
|
|
124
|
-
| "rail-light"
|
|
125
|
-
| "rail-metro"
|
|
126
|
-
| "rail-underground"
|
|
127
|
-
| "railway"
|
|
128
|
-
| "religious-christian"
|
|
129
|
-
| "religious-jewish"
|
|
130
|
-
| "religious-muslim"
|
|
131
|
-
| "religious-islam"
|
|
132
|
-
| "restaurant"
|
|
133
|
-
| "roadblock"
|
|
134
|
-
| "rocket"
|
|
135
|
-
| "school"
|
|
136
|
-
| "scooter"
|
|
137
|
-
| "shop"
|
|
138
|
-
| "skiing"
|
|
139
|
-
| "slaughterhouse"
|
|
140
|
-
| "soccer"
|
|
141
|
-
| "square"
|
|
142
|
-
| "stadium"
|
|
143
|
-
| "star"
|
|
144
|
-
| "star-stroked"
|
|
145
|
-
| "suitcase"
|
|
146
|
-
| "swimming"
|
|
147
|
-
| "table-tennis"
|
|
148
|
-
| "teahouse"
|
|
149
|
-
| "tennis"
|
|
150
|
-
| "theatre"
|
|
151
|
-
| "toilet"
|
|
152
|
-
| "town-hall"
|
|
153
|
-
| "trash"
|
|
154
|
-
| "tree-1"
|
|
155
|
-
| "tree-2"
|
|
156
|
-
| "triangle"
|
|
157
|
-
| "triangle-stroked"
|
|
158
|
-
| "veterinary"
|
|
159
|
-
| "volcano"
|
|
160
|
-
| "warehouse"
|
|
161
|
-
| "waste-basket"
|
|
162
|
-
| "water"
|
|
163
|
-
| "wetland"
|
|
164
|
-
| "zoo";
|
|
53
|
+
export type IconName = "marker" | "car-front" | "car-top";
|
|
165
54
|
/**
|
|
166
55
|
* In multiples of the original icon size
|
|
167
56
|
*/
|
|
@@ -188,16 +77,16 @@ export type PivotColumn = string;
|
|
|
188
77
|
* This is the map data
|
|
189
78
|
*/
|
|
190
79
|
export type MapData = {
|
|
191
|
-
lon
|
|
192
|
-
lat
|
|
80
|
+
lon?: Longitude;
|
|
81
|
+
lat?: Latitude;
|
|
193
82
|
alt?: Altitude;
|
|
194
83
|
value?: AValueForTheDataPoint;
|
|
195
84
|
pivot?: PivotColumn;
|
|
196
85
|
[k: string]: unknown;
|
|
197
86
|
}[];
|
|
198
87
|
export type Dataseries = {
|
|
199
|
-
label
|
|
200
|
-
type
|
|
88
|
+
label?: SeriesLabel;
|
|
89
|
+
type?: LayerType;
|
|
201
90
|
color?: LayerBaseColor;
|
|
202
91
|
latestValues?: LatestValues;
|
|
203
92
|
config?: LayerConfiguration;
|
|
@@ -215,7 +104,7 @@ export interface MapConfiguration {
|
|
|
215
104
|
settings?: {
|
|
216
105
|
title?: Title;
|
|
217
106
|
subTitle?: Subtitle;
|
|
218
|
-
style
|
|
107
|
+
style?: MapStyle;
|
|
219
108
|
showLegend?: ShowLegend;
|
|
220
109
|
follow?: AutoFollow;
|
|
221
110
|
[k: string]: unknown;
|
|
@@ -225,7 +114,7 @@ export interface MapConfiguration {
|
|
|
225
114
|
}
|
|
226
115
|
export interface LayerConfiguration {
|
|
227
116
|
circle?: CircleLayer;
|
|
228
|
-
symbol?:
|
|
117
|
+
symbol?: SymbolLayer;
|
|
229
118
|
heatmap?: HeatmapLayer;
|
|
230
119
|
line?: TrackLayer;
|
|
231
120
|
[k: string]: unknown;
|
|
@@ -235,7 +124,7 @@ export interface CircleLayer {
|
|
|
235
124
|
"circle-opacity"?: Opacity;
|
|
236
125
|
[k: string]: unknown;
|
|
237
126
|
}
|
|
238
|
-
export interface
|
|
127
|
+
export interface SymbolLayer {
|
|
239
128
|
"text-color"?: TextColor;
|
|
240
129
|
"text-size"?: TextSize;
|
|
241
130
|
"icon-image"?: IconName;
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
"properties": {
|
|
95
95
|
"circle-blur": {
|
|
96
96
|
"title": "Blur",
|
|
97
|
+
"description": "Blur of 1 means the whole circle is blurred starting from the center point. Blur 0 means no blur effect.",
|
|
97
98
|
"min": 0,
|
|
98
99
|
"max": 1,
|
|
99
100
|
"type": "number",
|
|
@@ -101,6 +102,7 @@
|
|
|
101
102
|
},
|
|
102
103
|
"circle-opacity": {
|
|
103
104
|
"title": "Opacity",
|
|
105
|
+
"description": "Opactity 1 means fully opaque, 0 means fully transparent.",
|
|
104
106
|
"min": 0,
|
|
105
107
|
"max": 1,
|
|
106
108
|
"type": "number",
|
|
@@ -109,7 +111,7 @@
|
|
|
109
111
|
}
|
|
110
112
|
},
|
|
111
113
|
"symbol": {
|
|
112
|
-
"title": "
|
|
114
|
+
"title": "Symbol Layer",
|
|
113
115
|
"type": "object",
|
|
114
116
|
"order": 2,
|
|
115
117
|
"properties": {
|
|
@@ -129,125 +131,7 @@
|
|
|
129
131
|
"title": "Icon Name",
|
|
130
132
|
"description": "For available icons check the maki icon set here https://labs.mapbox.com/maki-icons/",
|
|
131
133
|
"type": "string",
|
|
132
|
-
"enum": [
|
|
133
|
-
"marker",
|
|
134
|
-
"airfield",
|
|
135
|
-
"airport",
|
|
136
|
-
"alcohol-shop",
|
|
137
|
-
"america-football",
|
|
138
|
-
"amusement-park",
|
|
139
|
-
"aquarium",
|
|
140
|
-
"art-gallery",
|
|
141
|
-
"bakery",
|
|
142
|
-
"bank",
|
|
143
|
-
"bar",
|
|
144
|
-
"baseball",
|
|
145
|
-
"basketball",
|
|
146
|
-
"beer",
|
|
147
|
-
"bicycle",
|
|
148
|
-
"building",
|
|
149
|
-
"bus",
|
|
150
|
-
"cafe",
|
|
151
|
-
"campsite",
|
|
152
|
-
"car",
|
|
153
|
-
"cemetery",
|
|
154
|
-
"cinema",
|
|
155
|
-
"circle",
|
|
156
|
-
"college",
|
|
157
|
-
"commerical",
|
|
158
|
-
"cricket",
|
|
159
|
-
"cross",
|
|
160
|
-
"dam",
|
|
161
|
-
"danger",
|
|
162
|
-
"dog-park",
|
|
163
|
-
"embassy",
|
|
164
|
-
"emergency-telephone",
|
|
165
|
-
"entrance",
|
|
166
|
-
"farm",
|
|
167
|
-
"fast-food",
|
|
168
|
-
"ferry",
|
|
169
|
-
"fire-station",
|
|
170
|
-
"fuel",
|
|
171
|
-
"garden",
|
|
172
|
-
"golf",
|
|
173
|
-
"grocery-store",
|
|
174
|
-
"hairdresser",
|
|
175
|
-
"harbor",
|
|
176
|
-
"heart",
|
|
177
|
-
"heliport",
|
|
178
|
-
"hospital",
|
|
179
|
-
"industrial",
|
|
180
|
-
"information",
|
|
181
|
-
"laundry",
|
|
182
|
-
"library",
|
|
183
|
-
"lighthouse",
|
|
184
|
-
"lodging",
|
|
185
|
-
"logging",
|
|
186
|
-
"london-underground",
|
|
187
|
-
"marker-stroked",
|
|
188
|
-
"minefield",
|
|
189
|
-
"mobile-phone",
|
|
190
|
-
"monument",
|
|
191
|
-
"mountain",
|
|
192
|
-
"museum",
|
|
193
|
-
"music",
|
|
194
|
-
"oil-well",
|
|
195
|
-
"park",
|
|
196
|
-
"parking",
|
|
197
|
-
"parking-garage",
|
|
198
|
-
"pharmacy",
|
|
199
|
-
"picnic-site",
|
|
200
|
-
"pitch",
|
|
201
|
-
"place-of-worship",
|
|
202
|
-
"playground",
|
|
203
|
-
"police",
|
|
204
|
-
"polling-place",
|
|
205
|
-
"post",
|
|
206
|
-
"prison",
|
|
207
|
-
"rail",
|
|
208
|
-
"rail-above",
|
|
209
|
-
"rail-light",
|
|
210
|
-
"rail-metro",
|
|
211
|
-
"rail-underground",
|
|
212
|
-
"railway",
|
|
213
|
-
"religious-christian",
|
|
214
|
-
"religious-jewish",
|
|
215
|
-
"religious-muslim",
|
|
216
|
-
"religious-islam",
|
|
217
|
-
"restaurant",
|
|
218
|
-
"roadblock",
|
|
219
|
-
"rocket",
|
|
220
|
-
"school",
|
|
221
|
-
"scooter",
|
|
222
|
-
"shop",
|
|
223
|
-
"skiing",
|
|
224
|
-
"slaughterhouse",
|
|
225
|
-
"soccer",
|
|
226
|
-
"square",
|
|
227
|
-
"stadium",
|
|
228
|
-
"star",
|
|
229
|
-
"star-stroked",
|
|
230
|
-
"suitcase",
|
|
231
|
-
"swimming",
|
|
232
|
-
"table-tennis",
|
|
233
|
-
"teahouse",
|
|
234
|
-
"tennis",
|
|
235
|
-
"theatre",
|
|
236
|
-
"toilet",
|
|
237
|
-
"town-hall",
|
|
238
|
-
"trash",
|
|
239
|
-
"tree-1",
|
|
240
|
-
"tree-2",
|
|
241
|
-
"triangle",
|
|
242
|
-
"triangle-stroked",
|
|
243
|
-
"veterinary",
|
|
244
|
-
"volcano",
|
|
245
|
-
"warehouse",
|
|
246
|
-
"waste-basket",
|
|
247
|
-
"water",
|
|
248
|
-
"wetland",
|
|
249
|
-
"zoo"
|
|
250
|
-
],
|
|
134
|
+
"enum": ["marker", "car-front", "car-top"],
|
|
251
135
|
"order": 3
|
|
252
136
|
},
|
|
253
137
|
"icon-size": {
|
package/src/widget-mapbox.ts
CHANGED
|
@@ -30,6 +30,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
30
30
|
private mapLoaded: boolean = false
|
|
31
31
|
private resizeObserver: ResizeObserver
|
|
32
32
|
private mapStyle?: string
|
|
33
|
+
private imageList: string[] = []
|
|
33
34
|
constructor() {
|
|
34
35
|
super()
|
|
35
36
|
this.resizeObserver = new ResizeObserver(() => {
|
|
@@ -63,7 +64,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
63
64
|
})
|
|
64
65
|
})
|
|
65
66
|
if (bounds.isEmpty()) {
|
|
66
|
-
bounds.extend([8.6820917, 50.1106444])
|
|
67
|
+
bounds.extend([8.6820917, 50.1106444]) // Frankfurt
|
|
67
68
|
}
|
|
68
69
|
this.map.fitBounds(bounds, { maxZoom: 14, padding: 16, duration: 100 })
|
|
69
70
|
}
|
|
@@ -83,7 +84,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
83
84
|
}
|
|
84
85
|
})
|
|
85
86
|
// console.log('The input data', this.inputData.dataseries[0], this.inputData.dataseries[1])
|
|
86
|
-
// Pivot
|
|
87
|
+
// Pivot data if required
|
|
87
88
|
this.dataSets = []
|
|
88
89
|
this.inputData.dataseries.forEach((ds) => {
|
|
89
90
|
const color = this.colors.get(ds.label)
|
|
@@ -91,23 +92,20 @@ export class WidgetMapbox extends LitElement {
|
|
|
91
92
|
const derivedColors = tinycolor(color)
|
|
92
93
|
.monochromatic(distincts.length)
|
|
93
94
|
.map((c: any) => c.toHexString())
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
ds.color = ds.color ?? this.colors[ds.label]
|
|
109
|
-
this.dataSets.push(ds)
|
|
110
|
-
}
|
|
95
|
+
|
|
96
|
+
distincts.forEach((piv, i) => {
|
|
97
|
+
const prefix = piv ? `${piv} - ` : ''
|
|
98
|
+
const pds: any = {
|
|
99
|
+
label: prefix + ds.label ?? '',
|
|
100
|
+
order: ds.order,
|
|
101
|
+
type: ds.type,
|
|
102
|
+
latestValues: ds.latestValues,
|
|
103
|
+
color: derivedColors[i],
|
|
104
|
+
config: ds.config,
|
|
105
|
+
data: distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv)
|
|
106
|
+
}
|
|
107
|
+
this.dataSets.push(pds)
|
|
108
|
+
})
|
|
111
109
|
})
|
|
112
110
|
|
|
113
111
|
this.inputData.dataseries = []
|
|
@@ -128,9 +126,9 @@ export class WidgetMapbox extends LitElement {
|
|
|
128
126
|
features: this.createGEOJson(ds)
|
|
129
127
|
} as GeoJSON.FeatureCollection)
|
|
130
128
|
|
|
131
|
-
if (this.map) this.syncDataLayers()
|
|
132
129
|
// console.log('mapbox DataLayers', this.dataSources)
|
|
133
130
|
})
|
|
131
|
+
if (this.map) this.syncDataLayers()
|
|
134
132
|
}
|
|
135
133
|
|
|
136
134
|
createGEOJson(ds: Dataseries): GeoJSON.Feature[] | undefined {
|
|
@@ -147,9 +145,9 @@ export class WidgetMapbox extends LitElement {
|
|
|
147
145
|
const features: GeoJSON.Feature[] | undefined = ds.data
|
|
148
146
|
?.filter(
|
|
149
147
|
(p) =>
|
|
150
|
-
p.lon
|
|
151
|
-
p.lat
|
|
152
|
-
p.value
|
|
148
|
+
p.lon != null &&
|
|
149
|
+
p.lat != null &&
|
|
150
|
+
p.value != null &&
|
|
153
151
|
typeof p.lon === 'number' &&
|
|
154
152
|
typeof p.lat === 'number' &&
|
|
155
153
|
typeof p.value === 'number'
|
|
@@ -159,6 +157,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
159
157
|
type: 'Feature',
|
|
160
158
|
geometry: {
|
|
161
159
|
type: 'Point',
|
|
160
|
+
// @ts-ignore
|
|
162
161
|
coordinates: [p.lon, p.lat]
|
|
163
162
|
},
|
|
164
163
|
properties: {
|
|
@@ -193,7 +192,8 @@ export class WidgetMapbox extends LitElement {
|
|
|
193
192
|
type: 'circle',
|
|
194
193
|
source: 'input:' + dataSet.label,
|
|
195
194
|
paint: {
|
|
196
|
-
|
|
195
|
+
'circle-blur': dataSet.config?.['circle']?.['circle-blur'] ?? 0,
|
|
196
|
+
'circle-opacity': dataSet.config?.['circle']?.['circle-opacity'] ?? 1,
|
|
197
197
|
'circle-radius': ['get', 'value'],
|
|
198
198
|
'circle-radius-transition': {
|
|
199
199
|
duration: 1000,
|
|
@@ -214,11 +214,11 @@ export class WidgetMapbox extends LitElement {
|
|
|
214
214
|
source: 'input:' + dataSet.label,
|
|
215
215
|
layout: {
|
|
216
216
|
'text-field': ['get', 'value'],
|
|
217
|
-
'text-size': dataSet.config['symbol']['text-size'],
|
|
217
|
+
'text-size': dataSet.config['symbol']?.['text-size'] ?? 14,
|
|
218
218
|
'text-anchor': 'center'
|
|
219
219
|
},
|
|
220
220
|
paint: {
|
|
221
|
-
'text-color': dataSet.config['symbol']['text-color']
|
|
221
|
+
'text-color': dataSet.config['symbol']?.['text-color'] ?? '#000'
|
|
222
222
|
}
|
|
223
223
|
// Place polygons under labels, roads and buildings.
|
|
224
224
|
// 'aeroway-polygon'
|
|
@@ -234,10 +234,12 @@ export class WidgetMapbox extends LitElement {
|
|
|
234
234
|
source: 'input:' + dataSet.label,
|
|
235
235
|
layout: {
|
|
236
236
|
'text-field': ['get', 'value'],
|
|
237
|
-
'text-size': dataSet.config?.['symbol']?.['text-size'],
|
|
237
|
+
'text-size': dataSet.config?.['symbol']?.['text-size'] ?? 14,
|
|
238
238
|
'text-anchor': 'center',
|
|
239
|
-
'icon-image':
|
|
240
|
-
|
|
239
|
+
'icon-image':
|
|
240
|
+
(dataSet.config?.symbol?.['icon-image'] ?? '') +
|
|
241
|
+
(dataSet.config?.symbol?.['icon-size'] ?? 1),
|
|
242
|
+
'icon-size': 1
|
|
241
243
|
},
|
|
242
244
|
paint: {
|
|
243
245
|
'text-color': dataSet.config?.['symbol']?.['text-color']
|
|
@@ -341,8 +343,10 @@ export class WidgetMapbox extends LitElement {
|
|
|
341
343
|
type: 'symbol',
|
|
342
344
|
source: 'input:' + dataSet.label,
|
|
343
345
|
layout: {
|
|
344
|
-
'icon-image':
|
|
345
|
-
|
|
346
|
+
'icon-image':
|
|
347
|
+
(dataSet.config?.symbol?.['icon-image'] ?? '') +
|
|
348
|
+
(dataSet.config?.symbol?.['icon-size'] ?? 1),
|
|
349
|
+
'icon-size': 1
|
|
346
350
|
},
|
|
347
351
|
paint: {
|
|
348
352
|
'icon-color': dataSet.color
|
|
@@ -376,7 +380,16 @@ export class WidgetMapbox extends LitElement {
|
|
|
376
380
|
})
|
|
377
381
|
|
|
378
382
|
// add new layers or update the data of existing layers
|
|
379
|
-
this.dataSets.forEach((ds) => {
|
|
383
|
+
this.dataSets.forEach((ds: Dataseries) => {
|
|
384
|
+
const sz = ds.config?.symbol?.['icon-size'] ?? 1
|
|
385
|
+
const _imageName = ds.config?.symbol?.['icon-image'] ?? ''
|
|
386
|
+
const imageName = _imageName + sz
|
|
387
|
+
if (['line', 'symbol'].includes(ds.type ?? '') && !this.imageList.includes(imageName)) {
|
|
388
|
+
const img = new Image(24 * sz, 24 * sz) as HTMLImageElement
|
|
389
|
+
img.onload = () => this.map.addImage(imageName, img, { sdf: true })
|
|
390
|
+
img.src = `/icons/${_imageName}.svg`
|
|
391
|
+
this.imageList.push(imageName)
|
|
392
|
+
}
|
|
380
393
|
const fc = this.dataSources.get('input:' + ds.label)
|
|
381
394
|
const src = this.map.getSource('input:' + ds.label)
|
|
382
395
|
if (src) {
|