@record-evolution/widget-mapbox 1.4.21 → 1.5.2
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/src/widget-mapbox.d.ts +3 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-mapbox.js +329 -329
- package/dist/widget-mapbox.js.map +1 -1
- package/package.json +30 -26
- package/src/default-data.json +3 -5
- package/src/definition-schema.d.ts +10 -14
- package/src/definition-schema.json +50 -49
- package/src/widget-mapbox.ts +15 -15
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "REWidget widget-mapbox",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "widget-mapbox",
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.5.2",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/widget-mapbox.js",
|
|
9
9
|
"types": "dist/src/widget-mapbox.d.ts",
|
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
17
17
|
"build": "rollup -c rollup.config.js",
|
|
18
18
|
"watch": "rollup -w -c rollup.config.js",
|
|
19
|
+
"link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-mapbox",
|
|
20
|
+
"unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-mapbox && npm i @record-evolution/widget-mapbox",
|
|
19
21
|
"types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
|
|
20
22
|
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
21
23
|
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
@@ -23,37 +25,39 @@
|
|
|
23
25
|
"cors": "gcloud storage buckets update gs://reswarm-images --cors-file=src/cors-config.json"
|
|
24
26
|
},
|
|
25
27
|
"dependencies": {
|
|
26
|
-
"@types/geojson": "^7946.0.
|
|
27
|
-
"@types/mapbox-gl": "^
|
|
28
|
-
"lit": "^3.0
|
|
29
|
-
"mapbox-gl": "^
|
|
28
|
+
"@types/geojson": "^7946.0.14",
|
|
29
|
+
"@types/mapbox-gl": "^3.4.0",
|
|
30
|
+
"lit": "^3.2.0",
|
|
31
|
+
"mapbox-gl": "^3.7.0",
|
|
30
32
|
"tinycolor2": "^1.6.0"
|
|
31
33
|
},
|
|
32
34
|
"devDependencies": {
|
|
33
|
-
"@babel/plugin-syntax-import-assertions": "^7.
|
|
34
|
-
"@custom-elements-manifest/analyzer": "^0.
|
|
35
|
-
"@open-wc/eslint-config": "^12.0.2",
|
|
35
|
+
"@babel/plugin-syntax-import-assertions": "^7.25.7",
|
|
36
|
+
"@custom-elements-manifest/analyzer": "^0.10.3",
|
|
36
37
|
"@rollup/plugin-babel": "^6.0.4",
|
|
37
|
-
"@rollup/plugin-commonjs": "^
|
|
38
|
-
"@rollup/plugin-json": "^6.0
|
|
39
|
-
"@rollup/plugin-node-resolve": "^15.
|
|
40
|
-
"@rollup/plugin-replace": "^
|
|
41
|
-
"@rollup/plugin-typescript": "^
|
|
38
|
+
"@rollup/plugin-commonjs": "^28.0.0",
|
|
39
|
+
"@rollup/plugin-json": "^6.1.0",
|
|
40
|
+
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
41
|
+
"@rollup/plugin-replace": "^6.0.1",
|
|
42
|
+
"@rollup/plugin-typescript": "^12.1.0",
|
|
43
|
+
"@types/glob": "^8.1.0",
|
|
42
44
|
"@types/tinycolor2": "^1.4.6",
|
|
43
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
44
|
-
"@typescript-eslint/parser": "^
|
|
45
|
-
"@web/dev-server": "^0.4.
|
|
46
|
-
"concurrently": "^
|
|
47
|
-
"eslint": "^
|
|
48
|
-
"eslint-config-prettier": "^9.
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
45
|
+
"@typescript-eslint/eslint-plugin": "^8.8.0",
|
|
46
|
+
"@typescript-eslint/parser": "^8.8.0",
|
|
47
|
+
"@web/dev-server": "^0.4.6",
|
|
48
|
+
"concurrently": "^9.0.1",
|
|
49
|
+
"eslint": "^9.12.0",
|
|
50
|
+
"eslint-config-prettier": "^9.1.0",
|
|
51
|
+
"glob": "^11.0.0",
|
|
52
|
+
"husky": "^9.1.6",
|
|
53
|
+
"json-schema-to-typescript": "^15.0.2",
|
|
54
|
+
"lint-staged": "^15.2.10",
|
|
55
|
+
"minimatch": "3.1.2",
|
|
56
|
+
"prettier": "^3.3.3",
|
|
57
|
+
"rollup": "^4.24.0",
|
|
54
58
|
"rollup-plugin-copy": "^3.5.0",
|
|
55
|
-
"tslib": "^2.
|
|
56
|
-
"typescript": "
|
|
59
|
+
"tslib": "^2.7.0",
|
|
60
|
+
"typescript": "5.3.2"
|
|
57
61
|
},
|
|
58
62
|
"repository": {
|
|
59
63
|
"type": "git",
|
package/src/default-data.json
CHANGED
|
@@ -32,7 +32,6 @@ export type SeriesLabel = string;
|
|
|
32
32
|
* Create the specified type of layer on the map.
|
|
33
33
|
*/
|
|
34
34
|
export type LayerType = "circle" | "symbol" | "heatmap" | "line";
|
|
35
|
-
export type LayerBaseColor = string;
|
|
36
35
|
/**
|
|
37
36
|
* 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
37
|
*/
|
|
@@ -45,7 +44,6 @@ export type Blur = number;
|
|
|
45
44
|
* Opactity 1 means fully opaque, 0 means fully transparent.
|
|
46
45
|
*/
|
|
47
46
|
export type Opacity = number;
|
|
48
|
-
export type TextColor = string;
|
|
49
47
|
export type TextSize = number;
|
|
50
48
|
/**
|
|
51
49
|
* For available icons check the maki icon set here https://labs.mapbox.com/maki-icons/
|
|
@@ -97,21 +95,16 @@ export type Dataseries = {
|
|
|
97
95
|
/**
|
|
98
96
|
* A map-chart
|
|
99
97
|
*/
|
|
100
|
-
export interface
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
subTitle?: Subtitle;
|
|
107
|
-
style?: MapStyle;
|
|
108
|
-
showLegend?: ShowLegend;
|
|
109
|
-
follow?: AutoFollow;
|
|
110
|
-
[k: string]: unknown;
|
|
111
|
-
};
|
|
98
|
+
export interface InputData {
|
|
99
|
+
title?: Title;
|
|
100
|
+
subTitle?: Subtitle;
|
|
101
|
+
style?: MapStyle;
|
|
102
|
+
showLegend?: ShowLegend;
|
|
103
|
+
follow?: AutoFollow;
|
|
112
104
|
dataseries?: Dataseries;
|
|
113
105
|
[k: string]: unknown;
|
|
114
106
|
}
|
|
107
|
+
export type LayerBaseColor = string;
|
|
115
108
|
export interface LayerConfiguration {
|
|
116
109
|
circle?: CircleLayer;
|
|
117
110
|
symbol?: SymbolLayer;
|
|
@@ -131,6 +124,9 @@ export interface SymbolLayer {
|
|
|
131
124
|
"icon-size"?: IconSize;
|
|
132
125
|
[k: string]: unknown;
|
|
133
126
|
}
|
|
127
|
+
export interface TextColor {
|
|
128
|
+
[k: string]: unknown;
|
|
129
|
+
}
|
|
134
130
|
export interface HeatmapLayer {
|
|
135
131
|
"heatmap-intensity"?: Intensity;
|
|
136
132
|
"heatmap-opacity"?: Opacity1;
|
|
@@ -1,57 +1,54 @@
|
|
|
1
1
|
{
|
|
2
|
-
"title": "
|
|
2
|
+
"title": "InputData",
|
|
3
3
|
"description": "A map-chart",
|
|
4
4
|
"type": "object",
|
|
5
5
|
"properties": {
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"type": "
|
|
9
|
-
"order":
|
|
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
|
-
"type": "boolean",
|
|
47
|
-
"order": 5
|
|
48
|
-
}
|
|
49
|
-
}
|
|
6
|
+
"title": {
|
|
7
|
+
"title": "Title",
|
|
8
|
+
"type": "string",
|
|
9
|
+
"order": 1
|
|
10
|
+
},
|
|
11
|
+
"subTitle": {
|
|
12
|
+
"title": "Subtitle",
|
|
13
|
+
"type": "string",
|
|
14
|
+
"order": 2
|
|
15
|
+
},
|
|
16
|
+
"style": {
|
|
17
|
+
"title": "Map Style",
|
|
18
|
+
"description": "The basic style of the map.",
|
|
19
|
+
"type": "string",
|
|
20
|
+
"dataDrivenDisabled": true,
|
|
21
|
+
"enum": [
|
|
22
|
+
"streets-v12",
|
|
23
|
+
"outdoors-v12",
|
|
24
|
+
"light-v11",
|
|
25
|
+
"dark-v11",
|
|
26
|
+
"satellite-v9",
|
|
27
|
+
"satellite-streets-v12",
|
|
28
|
+
"navigation-day-v1",
|
|
29
|
+
"navigation-night-v1"
|
|
30
|
+
],
|
|
31
|
+
"required": true,
|
|
32
|
+
"order": 3
|
|
33
|
+
},
|
|
34
|
+
"showLegend": {
|
|
35
|
+
"title": "Show Legend",
|
|
36
|
+
"type": "boolean",
|
|
37
|
+
"dataDrivenDisabled": true,
|
|
38
|
+
"order": 4
|
|
39
|
+
},
|
|
40
|
+
"follow": {
|
|
41
|
+
"title": "Auto Follow",
|
|
42
|
+
"description": "If true, the map automatically keeps the drawn locations in focus.",
|
|
43
|
+
"type": "boolean",
|
|
44
|
+
"dataDrivenDisabled": true,
|
|
45
|
+
"order": 5
|
|
50
46
|
},
|
|
51
47
|
"dataseries": {
|
|
52
48
|
"title": "Dataseries",
|
|
53
49
|
"order": 8,
|
|
54
50
|
"type": "array",
|
|
51
|
+
"dataDrivenDisabled": true,
|
|
55
52
|
"items": {
|
|
56
53
|
"type": "object",
|
|
57
54
|
"properties": {
|
|
@@ -67,6 +64,7 @@
|
|
|
67
64
|
"description": "Create the specified type of layer on the map.",
|
|
68
65
|
"type": "string",
|
|
69
66
|
"required": true,
|
|
67
|
+
"dataDrivenDisabled": true,
|
|
70
68
|
"enum": ["circle", "symbol", "heatmap", "line"],
|
|
71
69
|
"order": 2
|
|
72
70
|
},
|
|
@@ -78,8 +76,9 @@
|
|
|
78
76
|
},
|
|
79
77
|
"latestValues": {
|
|
80
78
|
"title": "Latest Values",
|
|
81
|
-
"description": "Restrict the number of rows for this dataseries to the given number of newest values. (If
|
|
79
|
+
"description": "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.)",
|
|
82
80
|
"type": "number",
|
|
81
|
+
"dataDrivenDisabled": true,
|
|
83
82
|
"order": 4
|
|
84
83
|
},
|
|
85
84
|
"config": {
|
|
@@ -95,6 +94,7 @@
|
|
|
95
94
|
"circle-blur": {
|
|
96
95
|
"title": "Blur",
|
|
97
96
|
"description": "Blur of 1 means the whole circle is blurred starting from the center point. Blur 0 means no blur effect.",
|
|
97
|
+
"dataDrivenDisabled": true,
|
|
98
98
|
"min": 0,
|
|
99
99
|
"max": 1,
|
|
100
100
|
"type": "number",
|
|
@@ -103,6 +103,7 @@
|
|
|
103
103
|
"circle-opacity": {
|
|
104
104
|
"title": "Opacity",
|
|
105
105
|
"description": "Opactity 1 means fully opaque, 0 means fully transparent.",
|
|
106
|
+
"dataDrivenDisabled": true,
|
|
106
107
|
"min": 0,
|
|
107
108
|
"max": 1,
|
|
108
109
|
"type": "number",
|
|
@@ -212,13 +213,13 @@
|
|
|
212
213
|
"order": 3
|
|
213
214
|
},
|
|
214
215
|
"value": {
|
|
215
|
-
"title": "
|
|
216
|
+
"title": "Data point value",
|
|
216
217
|
"type": "number",
|
|
217
218
|
"order": 4
|
|
218
219
|
},
|
|
219
220
|
"pivot": {
|
|
220
|
-
"title": "
|
|
221
|
-
"description": "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
|
|
221
|
+
"title": "Split Data by",
|
|
222
|
+
"description": "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.",
|
|
222
223
|
"type": "string",
|
|
223
224
|
"order": 5
|
|
224
225
|
}
|
package/src/widget-mapbox.ts
CHANGED
|
@@ -6,14 +6,14 @@ import { repeat } from 'lit/directives/repeat.js'
|
|
|
6
6
|
import mapboxgl from 'https://esm.run/mapbox-gl@3.0.1'
|
|
7
7
|
import * as GeoJSON from 'geojson'
|
|
8
8
|
import tinycolor from 'tinycolor2'
|
|
9
|
-
import {
|
|
9
|
+
import { LayerBaseColor, InputData } from './definition-schema.js'
|
|
10
10
|
|
|
11
|
-
type Dataseries = Exclude<
|
|
11
|
+
type Dataseries = Exclude<InputData['dataseries'], undefined>[number]
|
|
12
12
|
type Point = Exclude<Dataseries['data'], undefined>[number]
|
|
13
13
|
|
|
14
14
|
export class WidgetMapbox extends LitElement {
|
|
15
15
|
@property({ type: Object })
|
|
16
|
-
inputData?:
|
|
16
|
+
inputData?: InputData
|
|
17
17
|
@state()
|
|
18
18
|
private map: any | undefined = undefined
|
|
19
19
|
|
|
@@ -86,16 +86,16 @@ export class WidgetMapbox extends LitElement {
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
transformInputData() {
|
|
89
|
-
if (!this?.inputData
|
|
89
|
+
if (!this?.inputData || !this?.inputData?.dataseries?.length) return
|
|
90
90
|
|
|
91
|
-
if (this.map && this.inputData
|
|
91
|
+
if (this.map && this.inputData?.style !== this.mapStyle) {
|
|
92
92
|
this.createMap()
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
// choose random color if dataseries has none and store it for furure updates
|
|
96
96
|
this.inputData.dataseries.forEach((ds) => {
|
|
97
97
|
if (!this.colors.has(ds.label)) {
|
|
98
|
-
ds.color = ds.color ?? tinycolor.random().toString()
|
|
98
|
+
ds.color = ds.color ?? (tinycolor.random().toString() as LayerBaseColor)
|
|
99
99
|
this.colors.set(ds.label, ds.color)
|
|
100
100
|
}
|
|
101
101
|
})
|
|
@@ -112,7 +112,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
112
112
|
distincts.forEach((piv, i) => {
|
|
113
113
|
const prefix = piv ? `${piv} - ` : ''
|
|
114
114
|
const pds: any = {
|
|
115
|
-
label: prefix + ds.label
|
|
115
|
+
label: prefix + ds.label,
|
|
116
116
|
order: ds.order,
|
|
117
117
|
type: ds.type,
|
|
118
118
|
latestValues: ds.latestValues,
|
|
@@ -436,7 +436,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
436
436
|
this.addLineLayer(ds)
|
|
437
437
|
}
|
|
438
438
|
})
|
|
439
|
-
if (this.inputData?.
|
|
439
|
+
if (this.inputData?.follow) this.fitBounds()
|
|
440
440
|
}
|
|
441
441
|
|
|
442
442
|
addBuildingLayer() {
|
|
@@ -490,7 +490,7 @@ export class WidgetMapbox extends LitElement {
|
|
|
490
490
|
|
|
491
491
|
createMap() {
|
|
492
492
|
if (this.map) return
|
|
493
|
-
this.mapStyle = this.inputData?.
|
|
493
|
+
this.mapStyle = this.inputData?.style
|
|
494
494
|
this.map = new mapboxgl.Map({
|
|
495
495
|
container: this.shadowRoot?.getElementById('map') as HTMLCanvasElement,
|
|
496
496
|
style: `mapbox://styles/mapbox/${this.mapStyle ?? 'light-v11'}`,
|
|
@@ -597,17 +597,17 @@ export class WidgetMapbox extends LitElement {
|
|
|
597
597
|
<div class="wrapper">
|
|
598
598
|
<header
|
|
599
599
|
class="paging"
|
|
600
|
-
?active=${this.inputData?.
|
|
600
|
+
?active=${this.inputData?.title || this.inputData?.subTitle}
|
|
601
601
|
>
|
|
602
602
|
<div class="title">
|
|
603
|
-
<h3 class="paging" ?active=${this.inputData?.
|
|
604
|
-
${this.inputData?.
|
|
603
|
+
<h3 class="paging" ?active=${this.inputData?.title}>
|
|
604
|
+
${this.inputData?.title}
|
|
605
605
|
</h3>
|
|
606
|
-
<p class="paging" ?active=${this.inputData?.
|
|
607
|
-
${this.inputData?.
|
|
606
|
+
<p class="paging" ?active=${this.inputData?.subTitle}>
|
|
607
|
+
${this.inputData?.subTitle}
|
|
608
608
|
</p>
|
|
609
609
|
</div>
|
|
610
|
-
<div class="legend paging" ?active=${this?.inputData?.
|
|
610
|
+
<div class="legend paging" ?active=${this?.inputData?.showLegend}>
|
|
611
611
|
${repeat(
|
|
612
612
|
this.dataSets,
|
|
613
613
|
(ds) => ds.label,
|