@record-evolution/widget-mapbox 1.4.17 → 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/package.json CHANGED
@@ -1,68 +1,69 @@
1
1
  {
2
- "name": "@record-evolution/widget-mapbox",
3
- "description": "REWidget widget-mapbox",
4
- "license": "MIT",
5
- "author": "widget-mapbox",
6
- "version": "1.4.17",
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
- "tslib": "^2.6.2",
54
- "typescript": "^5.2.2"
55
- },
56
- "repository": {
57
- "type": "git",
58
- "url": "git+https://github.com/RecordEvolution/widget-mapbox.git"
59
- },
60
- "keywords": [
61
- "widget",
62
- "mapbox"
63
- ],
64
- "bugs": {
65
- "url": "https://github.com/RecordEvolution/widget-mapbox/issues"
66
- },
67
- "homepage": "https://github.com/RecordEvolution/widget-mapbox#readme"
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
  }
@@ -175,7 +175,7 @@
175
175
  "line-width": 3
176
176
  },
177
177
  "symbol": {
178
- "icon-image": "car",
178
+ "icon-image": "car-front",
179
179
  "icon-size": 1
180
180
  }
181
181
  },
@@ -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: Longitude;
192
- lat: Latitude;
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: SeriesLabel;
200
- type: LayerType;
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: MapStyle;
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?: TextLayer;
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 TextLayer {
127
+ export interface SymbolLayer {
239
128
  "text-color"?: TextColor;
240
129
  "text-size"?: TextSize;
241
130
  "icon-image"?: IconName;
@@ -131,125 +131,7 @@
131
131
  "title": "Icon Name",
132
132
  "description": "For available icons check the maki icon set here https://labs.mapbox.com/maki-icons/",
133
133
  "type": "string",
134
- "enum": [
135
- "marker",
136
- "airfield",
137
- "airport",
138
- "alcohol-shop",
139
- "america-football",
140
- "amusement-park",
141
- "aquarium",
142
- "art-gallery",
143
- "bakery",
144
- "bank",
145
- "bar",
146
- "baseball",
147
- "basketball",
148
- "beer",
149
- "bicycle",
150
- "building",
151
- "bus",
152
- "cafe",
153
- "campsite",
154
- "car",
155
- "cemetery",
156
- "cinema",
157
- "circle",
158
- "college",
159
- "commerical",
160
- "cricket",
161
- "cross",
162
- "dam",
163
- "danger",
164
- "dog-park",
165
- "embassy",
166
- "emergency-telephone",
167
- "entrance",
168
- "farm",
169
- "fast-food",
170
- "ferry",
171
- "fire-station",
172
- "fuel",
173
- "garden",
174
- "golf",
175
- "grocery-store",
176
- "hairdresser",
177
- "harbor",
178
- "heart",
179
- "heliport",
180
- "hospital",
181
- "industrial",
182
- "information",
183
- "laundry",
184
- "library",
185
- "lighthouse",
186
- "lodging",
187
- "logging",
188
- "london-underground",
189
- "marker-stroked",
190
- "minefield",
191
- "mobile-phone",
192
- "monument",
193
- "mountain",
194
- "museum",
195
- "music",
196
- "oil-well",
197
- "park",
198
- "parking",
199
- "parking-garage",
200
- "pharmacy",
201
- "picnic-site",
202
- "pitch",
203
- "place-of-worship",
204
- "playground",
205
- "police",
206
- "polling-place",
207
- "post",
208
- "prison",
209
- "rail",
210
- "rail-above",
211
- "rail-light",
212
- "rail-metro",
213
- "rail-underground",
214
- "railway",
215
- "religious-christian",
216
- "religious-jewish",
217
- "religious-muslim",
218
- "religious-islam",
219
- "restaurant",
220
- "roadblock",
221
- "rocket",
222
- "school",
223
- "scooter",
224
- "shop",
225
- "skiing",
226
- "slaughterhouse",
227
- "soccer",
228
- "square",
229
- "stadium",
230
- "star",
231
- "star-stroked",
232
- "suitcase",
233
- "swimming",
234
- "table-tennis",
235
- "teahouse",
236
- "tennis",
237
- "theatre",
238
- "toilet",
239
- "town-hall",
240
- "trash",
241
- "tree-1",
242
- "tree-2",
243
- "triangle",
244
- "triangle-stroked",
245
- "veterinary",
246
- "volcano",
247
- "warehouse",
248
- "waste-basket",
249
- "water",
250
- "wetland",
251
- "zoo"
252
- ],
134
+ "enum": ["marker", "car-front", "car-top"],
253
135
  "order": 3
254
136
  },
255
137
  "icon-size": {
@@ -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(() => {
@@ -125,9 +126,9 @@ export class WidgetMapbox extends LitElement {
125
126
  features: this.createGEOJson(ds)
126
127
  } as GeoJSON.FeatureCollection)
127
128
 
128
- if (this.map) this.syncDataLayers()
129
129
  // console.log('mapbox DataLayers', this.dataSources)
130
130
  })
131
+ if (this.map) this.syncDataLayers()
131
132
  }
132
133
 
133
134
  createGEOJson(ds: Dataseries): GeoJSON.Feature[] | undefined {
@@ -144,9 +145,9 @@ export class WidgetMapbox extends LitElement {
144
145
  const features: GeoJSON.Feature[] | undefined = ds.data
145
146
  ?.filter(
146
147
  (p) =>
147
- p.lon !== undefined &&
148
- p.lat !== undefined &&
149
- p.value !== undefined &&
148
+ p.lon != null &&
149
+ p.lat != null &&
150
+ p.value != null &&
150
151
  typeof p.lon === 'number' &&
151
152
  typeof p.lat === 'number' &&
152
153
  typeof p.value === 'number'
@@ -156,6 +157,7 @@ export class WidgetMapbox extends LitElement {
156
157
  type: 'Feature',
157
158
  geometry: {
158
159
  type: 'Point',
160
+ // @ts-ignore
159
161
  coordinates: [p.lon, p.lat]
160
162
  },
161
163
  properties: {
@@ -234,8 +236,10 @@ export class WidgetMapbox extends LitElement {
234
236
  'text-field': ['get', 'value'],
235
237
  'text-size': dataSet.config?.['symbol']?.['text-size'] ?? 14,
236
238
  'text-anchor': 'center',
237
- 'icon-image': dataSet.config?.symbol?.['icon-image'],
238
- 'icon-size': dataSet.config?.symbol?.['icon-size']
239
+ 'icon-image':
240
+ (dataSet.config?.symbol?.['icon-image'] ?? '') +
241
+ (dataSet.config?.symbol?.['icon-size'] ?? 1),
242
+ 'icon-size': 1
239
243
  },
240
244
  paint: {
241
245
  'text-color': dataSet.config?.['symbol']?.['text-color']
@@ -339,8 +343,10 @@ export class WidgetMapbox extends LitElement {
339
343
  type: 'symbol',
340
344
  source: 'input:' + dataSet.label,
341
345
  layout: {
342
- 'icon-image': dataSet.config.symbol?.['icon-image'],
343
- 'icon-size': dataSet.config.symbol?.['icon-size']
346
+ 'icon-image':
347
+ (dataSet.config?.symbol?.['icon-image'] ?? '') +
348
+ (dataSet.config?.symbol?.['icon-size'] ?? 1),
349
+ 'icon-size': 1
344
350
  },
345
351
  paint: {
346
352
  'icon-color': dataSet.color
@@ -374,7 +380,16 @@ export class WidgetMapbox extends LitElement {
374
380
  })
375
381
 
376
382
  // add new layers or update the data of existing layers
377
- 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
+ }
378
393
  const fc = this.dataSources.get('input:' + ds.label)
379
394
  const src = this.map.getSource('input:' + ds.label)
380
395
  if (src) {