@record-evolution/widget-mapbox 1.5.6 → 1.5.9
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/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-mapbox.js +31 -33
- package/dist/widget-mapbox.js.map +1 -1
- package/package.json +1 -1
- package/src/definition-schema.d.ts +11 -13
- package/src/definition-schema.json +106 -97
- package/src/widget-mapbox.ts +17 -21
package/package.json
CHANGED
|
@@ -33,7 +33,7 @@ export type SeriesLabel = string;
|
|
|
33
33
|
*/
|
|
34
34
|
export type LayerType = "circle" | "symbol" | "heatmap" | "line";
|
|
35
35
|
/**
|
|
36
|
-
* Restrict the number of rows for this dataseries to the given number of newest values. (If
|
|
36
|
+
* Restrict the number of rows for this dataseries to the given number of newest values. (If you use split data, then per each of the split dataseries.)
|
|
37
37
|
*/
|
|
38
38
|
export type LatestValues = number;
|
|
39
39
|
/**
|
|
@@ -66,11 +66,11 @@ export type LineWidth = number;
|
|
|
66
66
|
export type Longitude = number;
|
|
67
67
|
export type Latitude = number;
|
|
68
68
|
export type Altitude = number;
|
|
69
|
-
export type
|
|
69
|
+
export type DataPointValue = number;
|
|
70
70
|
/**
|
|
71
|
-
* You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, lon, lat, temperature] and specify 'city' as
|
|
71
|
+
* You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, lon, lat, temperature] and specify 'city' as split column, then you will get a layer for each city.
|
|
72
72
|
*/
|
|
73
|
-
export type
|
|
73
|
+
export type SplitDataBy = string;
|
|
74
74
|
/**
|
|
75
75
|
* This is the map data
|
|
76
76
|
*/
|
|
@@ -78,8 +78,8 @@ export type MapData = {
|
|
|
78
78
|
lon?: Longitude;
|
|
79
79
|
lat?: Latitude;
|
|
80
80
|
alt?: Altitude;
|
|
81
|
-
value?:
|
|
82
|
-
pivot?:
|
|
81
|
+
value?: DataPointValue;
|
|
82
|
+
pivot?: SplitDataBy;
|
|
83
83
|
[k: string]: unknown;
|
|
84
84
|
}[];
|
|
85
85
|
export type Dataseries = {
|
|
@@ -87,7 +87,10 @@ export type Dataseries = {
|
|
|
87
87
|
type?: LayerType;
|
|
88
88
|
color?: LayerBaseColor;
|
|
89
89
|
latestValues?: LatestValues;
|
|
90
|
-
|
|
90
|
+
circle?: CircleLayer;
|
|
91
|
+
symbol?: SymbolLayer;
|
|
92
|
+
heatmap?: HeatmapLayer;
|
|
93
|
+
line?: TrackLayer;
|
|
91
94
|
data?: MapData;
|
|
92
95
|
[k: string]: unknown;
|
|
93
96
|
}[];
|
|
@@ -104,12 +107,7 @@ export interface InputData {
|
|
|
104
107
|
dataseries?: Dataseries;
|
|
105
108
|
[k: string]: unknown;
|
|
106
109
|
}
|
|
107
|
-
export
|
|
108
|
-
export interface LayerConfiguration {
|
|
109
|
-
circle?: CircleLayer;
|
|
110
|
-
symbol?: SymbolLayer;
|
|
111
|
-
heatmap?: HeatmapLayer;
|
|
112
|
-
line?: TrackLayer;
|
|
110
|
+
export interface LayerBaseColor {
|
|
113
111
|
[k: string]: unknown;
|
|
114
112
|
}
|
|
115
113
|
export interface CircleLayer {
|
|
@@ -81,109 +81,118 @@
|
|
|
81
81
|
"dataDrivenDisabled": true,
|
|
82
82
|
"order": 4
|
|
83
83
|
},
|
|
84
|
-
"
|
|
85
|
-
"title": "Layer Configuration",
|
|
84
|
+
"circle": {
|
|
85
|
+
"title": "Circle Layer Configuration",
|
|
86
86
|
"type": "object",
|
|
87
87
|
"order": 5,
|
|
88
|
+
"condition": {
|
|
89
|
+
"relativePath": "../type",
|
|
90
|
+
"showIfValueIn": ["circle"]
|
|
91
|
+
},
|
|
88
92
|
"properties": {
|
|
89
|
-
"circle": {
|
|
90
|
-
"title": "
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
"dataDrivenDisabled": true,
|
|
98
|
-
"min": 0,
|
|
99
|
-
"max": 1,
|
|
100
|
-
"type": "number",
|
|
101
|
-
"order": 1
|
|
102
|
-
},
|
|
103
|
-
"circle-opacity": {
|
|
104
|
-
"title": "Opacity",
|
|
105
|
-
"description": "Opactity 1 means fully opaque, 0 means fully transparent.",
|
|
106
|
-
"dataDrivenDisabled": true,
|
|
107
|
-
"min": 0,
|
|
108
|
-
"max": 1,
|
|
109
|
-
"type": "number",
|
|
110
|
-
"order": 2
|
|
111
|
-
}
|
|
112
|
-
}
|
|
93
|
+
"circle-blur": {
|
|
94
|
+
"title": "Blur",
|
|
95
|
+
"description": "Blur of 1 means the whole circle is blurred starting from the center point. Blur 0 means no blur effect.",
|
|
96
|
+
"dataDrivenDisabled": true,
|
|
97
|
+
"min": 0,
|
|
98
|
+
"max": 1,
|
|
99
|
+
"type": "number",
|
|
100
|
+
"order": 1
|
|
113
101
|
},
|
|
114
|
-
"
|
|
115
|
-
"title": "
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
"title": "Icon size",
|
|
140
|
-
"description": "In multiples of the original icon size",
|
|
141
|
-
"type": "number",
|
|
142
|
-
"min": 0,
|
|
143
|
-
"order": 4
|
|
144
|
-
}
|
|
145
|
-
}
|
|
102
|
+
"circle-opacity": {
|
|
103
|
+
"title": "Opacity",
|
|
104
|
+
"description": "Opactity 1 means fully opaque, 0 means fully transparent.",
|
|
105
|
+
"dataDrivenDisabled": true,
|
|
106
|
+
"min": 0,
|
|
107
|
+
"max": 1,
|
|
108
|
+
"type": "number",
|
|
109
|
+
"order": 2
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
"symbol": {
|
|
114
|
+
"title": "Symbol Layer Configuration",
|
|
115
|
+
"type": "object",
|
|
116
|
+
"order": 5,
|
|
117
|
+
"condition": {
|
|
118
|
+
"relativePath": "../type",
|
|
119
|
+
"showIfValueIn": ["symbol"]
|
|
120
|
+
},
|
|
121
|
+
"properties": {
|
|
122
|
+
"text-color": {
|
|
123
|
+
"title": "Text Color",
|
|
124
|
+
"type": "color",
|
|
125
|
+
"color": true,
|
|
126
|
+
"order": 1
|
|
146
127
|
},
|
|
147
|
-
"
|
|
148
|
-
"title": "
|
|
149
|
-
"type": "
|
|
150
|
-
"
|
|
151
|
-
"
|
|
152
|
-
"heatmap-intensity": {
|
|
153
|
-
"title": "Intensity",
|
|
154
|
-
"description": "The higher the intensity, the more 'hot' the heatmap becomes. The value is a multiple with default value 1. e.g. to double the intensitiy choose 2.",
|
|
155
|
-
"type": "number",
|
|
156
|
-
"min": 0,
|
|
157
|
-
"order": 1
|
|
158
|
-
},
|
|
159
|
-
"heatmap-opacity": {
|
|
160
|
-
"title": "Opacity",
|
|
161
|
-
"type": "number",
|
|
162
|
-
"min": 0,
|
|
163
|
-
"max": 1,
|
|
164
|
-
"order": 2
|
|
165
|
-
},
|
|
166
|
-
"heatmap-radius": {
|
|
167
|
-
"title": "Radius Base Size",
|
|
168
|
-
"description": "The radius will be combined with the data value to to determine the heat radius of a point.",
|
|
169
|
-
"type": "number",
|
|
170
|
-
"min": 0,
|
|
171
|
-
"order": 3
|
|
172
|
-
}
|
|
173
|
-
}
|
|
128
|
+
"text-size": {
|
|
129
|
+
"title": "Text Size",
|
|
130
|
+
"type": "number",
|
|
131
|
+
"min": 1,
|
|
132
|
+
"order": 2
|
|
174
133
|
},
|
|
175
|
-
"
|
|
176
|
-
"title": "
|
|
177
|
-
"
|
|
178
|
-
"
|
|
179
|
-
"
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
134
|
+
"icon-image": {
|
|
135
|
+
"title": "Icon Name",
|
|
136
|
+
"description": "For available icons check the maki icon set here https://labs.mapbox.com/maki-icons/",
|
|
137
|
+
"type": "string",
|
|
138
|
+
"enum": ["marker", "car-front", "car-top"],
|
|
139
|
+
"order": 3
|
|
140
|
+
},
|
|
141
|
+
"icon-size": {
|
|
142
|
+
"title": "Icon size",
|
|
143
|
+
"description": "In multiples of the original icon size",
|
|
144
|
+
"type": "number",
|
|
145
|
+
"min": 0,
|
|
146
|
+
"order": 4
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
"heatmap": {
|
|
151
|
+
"title": "Heatmap Layer Configuration",
|
|
152
|
+
"type": "object",
|
|
153
|
+
"order": 5,
|
|
154
|
+
"condition": {
|
|
155
|
+
"relativePath": "../type",
|
|
156
|
+
"showIfValueIn": ["heatmap"]
|
|
157
|
+
},
|
|
158
|
+
"properties": {
|
|
159
|
+
"heatmap-intensity": {
|
|
160
|
+
"title": "Intensity",
|
|
161
|
+
"description": "The higher the intensity, the more 'hot' the heatmap becomes. The value is a multiple with default value 1. e.g. to double the intensitiy choose 2.",
|
|
162
|
+
"type": "number",
|
|
163
|
+
"min": 0,
|
|
164
|
+
"order": 1
|
|
165
|
+
},
|
|
166
|
+
"heatmap-opacity": {
|
|
167
|
+
"title": "Opacity",
|
|
168
|
+
"type": "number",
|
|
169
|
+
"min": 0,
|
|
170
|
+
"max": 1,
|
|
171
|
+
"order": 2
|
|
172
|
+
},
|
|
173
|
+
"heatmap-radius": {
|
|
174
|
+
"title": "Radius Base Size",
|
|
175
|
+
"description": "The radius will be combined with the data value to to determine the heat radius of a point.",
|
|
176
|
+
"type": "number",
|
|
177
|
+
"min": 0,
|
|
178
|
+
"order": 3
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
"line": {
|
|
183
|
+
"title": "Track Layer Configuration",
|
|
184
|
+
"type": "object",
|
|
185
|
+
"order": 5,
|
|
186
|
+
"condition": {
|
|
187
|
+
"relativePath": "../type",
|
|
188
|
+
"showIfValueIn": ["line"]
|
|
189
|
+
},
|
|
190
|
+
"properties": {
|
|
191
|
+
"line-width": {
|
|
192
|
+
"title": "Line Width",
|
|
193
|
+
"type": "number",
|
|
194
|
+
"min": 1,
|
|
195
|
+
"order": 1
|
|
187
196
|
}
|
|
188
197
|
}
|
|
189
198
|
},
|
package/src/widget-mapbox.ts
CHANGED
|
@@ -81,7 +81,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
81
81
|
|
|
82
82
|
registerTheme(theme?: Theme) {
|
|
83
83
|
const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
|
|
84
|
-
const cssBgColor = getComputedStyle(this).getPropertyValue('--re-background-color').trim()
|
|
84
|
+
const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
|
|
85
85
|
this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
|
|
86
86
|
this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
|
|
87
87
|
this.themeSubtitleColor =
|
|
@@ -138,7 +138,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
138
138
|
// choose random color if dataseries has none and store it for furure updates
|
|
139
139
|
this.inputData.dataseries.forEach((ds) => {
|
|
140
140
|
if (!this.colors.has(ds.label)) {
|
|
141
|
-
ds.color = ds.color ?? (tinycolor.random().toString() as
|
|
141
|
+
ds.color = ds.color ?? (tinycolor.random().toString() as any)
|
|
142
142
|
this.colors.set(ds.label, ds.color)
|
|
143
143
|
}
|
|
144
144
|
})
|
|
@@ -253,8 +253,8 @@ export class WidgetMapbox extends LitElement {
|
|
|
253
253
|
type: 'circle',
|
|
254
254
|
source: 'input:' + dataSet.label,
|
|
255
255
|
paint: {
|
|
256
|
-
'circle-blur': dataSet
|
|
257
|
-
'circle-opacity': dataSet
|
|
256
|
+
'circle-blur': dataSet?.circle?.['circle-blur'] ?? 0,
|
|
257
|
+
'circle-opacity': dataSet?.circle?.['circle-opacity'] ?? 1,
|
|
258
258
|
'circle-radius': ['get', 'value'],
|
|
259
259
|
'circle-radius-transition': {
|
|
260
260
|
duration: 1000,
|
|
@@ -268,18 +268,18 @@ export class WidgetMapbox extends LitElement {
|
|
|
268
268
|
|
|
269
269
|
this.map?.addLayer(layerConfig)
|
|
270
270
|
|
|
271
|
-
if (!dataSet
|
|
271
|
+
if (!dataSet?.symbol) return
|
|
272
272
|
const layerConfig2 = {
|
|
273
273
|
id: dataSet.label + ':symbol',
|
|
274
274
|
type: 'symbol',
|
|
275
275
|
source: 'input:' + dataSet.label,
|
|
276
276
|
layout: {
|
|
277
277
|
'text-field': ['get', 'value'],
|
|
278
|
-
'text-size': dataSet
|
|
278
|
+
'text-size': dataSet?.symbol?.['text-size'] ?? 14,
|
|
279
279
|
'text-anchor': 'center'
|
|
280
280
|
},
|
|
281
281
|
paint: {
|
|
282
|
-
'text-color': dataSet
|
|
282
|
+
'text-color': dataSet?.symbol?.['text-color'] ?? '#000'
|
|
283
283
|
}
|
|
284
284
|
// Place polygons under labels, roads and buildings.
|
|
285
285
|
// 'aeroway-polygon'
|
|
@@ -295,15 +295,13 @@ export class WidgetMapbox extends LitElement {
|
|
|
295
295
|
source: 'input:' + dataSet.label,
|
|
296
296
|
layout: {
|
|
297
297
|
'text-field': ['get', 'value'],
|
|
298
|
-
'text-size': dataSet
|
|
298
|
+
'text-size': dataSet?.symbol?.['text-size'] ?? 14,
|
|
299
299
|
'text-anchor': 'center',
|
|
300
|
-
'icon-image':
|
|
301
|
-
(dataSet.config?.symbol?.['icon-image'] ?? '') +
|
|
302
|
-
(dataSet.config?.symbol?.['icon-size'] ?? 1),
|
|
300
|
+
'icon-image': (dataSet?.symbol?.['icon-image'] ?? '') + (dataSet?.symbol?.['icon-size'] ?? 1),
|
|
303
301
|
'icon-size': 1
|
|
304
302
|
},
|
|
305
303
|
paint: {
|
|
306
|
-
'text-color': dataSet
|
|
304
|
+
'text-color': dataSet?.symbol?.['text-color']
|
|
307
305
|
}
|
|
308
306
|
// Place polygons under labels, roads and buildings.
|
|
309
307
|
// 'aeroway-polygon'
|
|
@@ -321,7 +319,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
321
319
|
type: 'heatmap',
|
|
322
320
|
source: 'input:' + dataSet.label,
|
|
323
321
|
paint: {
|
|
324
|
-
...dataSet
|
|
322
|
+
...dataSet?.heatmap,
|
|
325
323
|
'heatmap-color': [
|
|
326
324
|
'interpolate',
|
|
327
325
|
['linear'],
|
|
@@ -358,7 +356,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
358
356
|
min,
|
|
359
357
|
30,
|
|
360
358
|
max,
|
|
361
|
-
30 + (dataSet
|
|
359
|
+
30 + (dataSet?.heatmap?.['heatmap-radius'] ?? 0)
|
|
362
360
|
],
|
|
363
361
|
'heatmap-radius-transition': {
|
|
364
362
|
duration: 1000,
|
|
@@ -389,7 +387,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
389
387
|
'line-cap': 'round'
|
|
390
388
|
},
|
|
391
389
|
paint: {
|
|
392
|
-
...dataSet
|
|
390
|
+
...dataSet?.line,
|
|
393
391
|
'line-color': dataSet.color
|
|
394
392
|
}
|
|
395
393
|
// Place polygons under labels, roads and buildings.
|
|
@@ -397,16 +395,14 @@ export class WidgetMapbox extends LitElement {
|
|
|
397
395
|
}
|
|
398
396
|
this.map?.addLayer(layerConfig)
|
|
399
397
|
|
|
400
|
-
if (!dataSet
|
|
398
|
+
if (!dataSet?.symbol?.['icon-image']) return
|
|
401
399
|
|
|
402
400
|
const layerConfig2 = {
|
|
403
401
|
id: dataSet.label + ':symbol',
|
|
404
402
|
type: 'symbol',
|
|
405
403
|
source: 'input:' + dataSet.label,
|
|
406
404
|
layout: {
|
|
407
|
-
'icon-image':
|
|
408
|
-
(dataSet.config?.symbol?.['icon-image'] ?? '') +
|
|
409
|
-
(dataSet.config?.symbol?.['icon-size'] ?? 1),
|
|
405
|
+
'icon-image': (dataSet?.symbol?.['icon-image'] ?? '') + (dataSet?.symbol?.['icon-size'] ?? 1),
|
|
410
406
|
'icon-size': 1
|
|
411
407
|
},
|
|
412
408
|
paint: {
|
|
@@ -442,8 +438,8 @@ export class WidgetMapbox extends LitElement {
|
|
|
442
438
|
|
|
443
439
|
// add new layers or update the data of existing layers
|
|
444
440
|
this.dataSets.forEach((ds: Dataseries) => {
|
|
445
|
-
const sz = ds
|
|
446
|
-
const _imageName = ds
|
|
441
|
+
const sz = ds?.symbol?.['icon-size'] ?? 1
|
|
442
|
+
const _imageName = ds?.symbol?.['icon-image'] ?? ''
|
|
447
443
|
const imageName = _imageName + sz
|
|
448
444
|
if (['line', 'symbol'].includes(ds.type ?? '') && !this.imageList.includes(imageName)) {
|
|
449
445
|
const img = new Image(24 * sz, 24 * sz) as HTMLImageElement
|