@geospatial-sdk/maplibre 0.0.5-dev.56 → 0.0.5-dev.58

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.
Files changed (11) hide show
  1. package/dist/helpers/map.helpers.d.ts.map +1 -1
  2. package/dist/helpers/map.helpers.js +5 -5
  3. package/lib/helpers/map.helpers.ts +7 -4
  4. package/lib/map/apply-context-diff.test.ts +16 -5
  5. package/lib/map/create-map.test.ts +86 -90
  6. package/package.json +6 -5
  7. package/dist/helpers/style.helpers.d.ts +0 -4
  8. package/dist/helpers/style.helpers.d.ts.map +0 -1
  9. package/dist/helpers/style.helpers.js +0 -58
  10. package/lib/helpers/style.helpers.test.ts +0 -160
  11. package/lib/helpers/style.helpers.ts +0 -68
package/dist/helpers/map.helpers.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"map.helpers.d.ts","sourceRoot":"","sources":["../../lib/helpers/map.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAsB,MAAM,aAAa,CAAC;AAC/E,OAAO,EACL,OAAO,EACP,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEtD,OAAO,EAGL,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAW9B;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAC3C,UAAU,EAAE,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,MAAM,EACpD,QAAQ,EAAE,0BAA0B,GACnC,OAAO,CA+BT;AAED,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,GAC1B,4BAA4B,EAAE,CAkBhC;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,4BAA4B,EAAE,CAoBhC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CAoBpB;AAYD;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,UAAU,EAAE,eAAe,UAG5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAKT;AAED;;GAEG;AACH,wBAAgB,eAAe,WAE9B;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,kBAAkB,EACzB,UAAU,EAAE,eAAe,EAC3B,kBAAkB,EAAE,eAAe,QA+BpC"}
1
+ {"version":3,"file":"map.helpers.d.ts","sourceRoot":"","sources":["../../lib/helpers/map.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAsB,MAAM,aAAa,CAAC;AAC/E,OAAO,EACL,OAAO,EACP,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAIL,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAY9B;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAC3C,UAAU,EAAE,qBAAqB,EACjC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,MAAM,EACpD,QAAQ,EAAE,0BAA0B,GACnC,OAAO,CAiCT;AAED,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,eAAe,GAC1B,4BAA4B,EAAE,CAkBhC;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,4BAA4B,EAAE,CAoBhC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CAoBpB;AAYD;;;GAGG;AACH,wBAAgB,sCAAsC,CACpD,UAAU,EAAE,eAAe,UAG5B;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,GACxB,OAAO,CAKT;AAED;;GAEG;AACH,wBAAgB,eAAe,WAE9B;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,kBAAkB,EACzB,UAAU,EAAE,eAAe,EAC3B,kBAAkB,EAAE,eAAe,QA+BpC"}
package/dist/helpers/map.helpers.js CHANGED
@@ -1,5 +1,5 @@
1
- import { contextStyleToMaplibreLayers } from "./style.helpers.js";
2
- import { getHash, } from "@geospatial-sdk/core";
1
+ import { defaultStyle, getHash, } from "@geospatial-sdk/core";
2
+ import { openLayersStyleToMapLibreLayers } from "@geospatial-sdk/style";
3
3
  function getOpacityPaintPropNames(layerType) {
4
4
  switch (layerType) {
5
5
  case "circle":
@@ -16,10 +16,10 @@ function getOpacityPaintPropNames(layerType) {
16
16
  */
17
17
  export function createDatasetFromGeoJsonLayer(layerModel, geojson, metadata) {
18
18
  const sourceId = generateLayerId();
19
- const partialLayers = contextStyleToMaplibreLayers(layerModel.style);
20
- const layers = partialLayers.map((layer) => ({
19
+ const partialLayers = openLayersStyleToMapLibreLayers(layerModel.style ?? defaultStyle);
20
+ const layers = partialLayers.map((layer, index) => ({
21
21
  ...layer,
22
- id: `${sourceId}-${layer.type}`,
22
+ id: `${sourceId}-${index}`,
23
23
  source: sourceId,
24
24
  paint: {
25
25
  ...layer.paint,
package/lib/helpers/map.helpers.ts CHANGED
@@ -6,12 +6,13 @@ import {
6
6
  LayerSpecificationWithSource,
7
7
  } from "../maplibre.models.js";
8
8
  import { FeatureCollection, Geometry } from "geojson";
9
- import { contextStyleToMaplibreLayers } from "./style.helpers.js";
10
9
  import {
10
+ defaultStyle,
11
11
  getHash,
12
12
  MapContextBaseLayer,
13
13
  MapContextLayer,
14
14
  } from "@geospatial-sdk/core";
15
+ import { openLayersStyleToMapLibreLayers } from "@geospatial-sdk/style";
15
16
 
16
17
  function getOpacityPaintPropNames(layerType: string): string[] {
17
18
  switch (layerType) {
@@ -34,10 +35,12 @@ export function createDatasetFromGeoJsonLayer(
34
35
  metadata: LayerMetadataSpecification,
35
36
  ): Dataset {
36
37
  const sourceId = generateLayerId();
37
- const partialLayers = contextStyleToMaplibreLayers(layerModel.style);
38
- const layers = partialLayers.map((layer) => ({
38
+ const partialLayers = openLayersStyleToMapLibreLayers(
39
+ layerModel.style ?? defaultStyle,
40
+ );
41
+ const layers = partialLayers.map((layer, index) => ({
39
42
  ...layer,
40
- id: `${sourceId}-${layer.type}`,
43
+ id: `${sourceId}-${index}`,
41
44
  source: sourceId,
42
45
  paint: {
43
46
  ...layer.paint,
package/lib/map/apply-context-diff.test.ts CHANGED
@@ -387,6 +387,14 @@ describe("applyContextDiffToMap (mocked Map)", () => {
387
387
  });
388
388
  describe("4 layers moved", () => {
389
389
  let layer1WithId: MapContextLayer;
390
+ const layer4WithStyle = {
391
+ ...SAMPLE_LAYER4,
392
+ style: {
393
+ "stroke-width": 5,
394
+ "fill-color": "blue",
395
+ "circle-radius": 10,
396
+ },
397
+ };
390
398
 
391
399
  beforeEach(async () => {
392
400
  layer1WithId = {
@@ -395,7 +403,7 @@ describe("applyContextDiffToMap (mocked Map)", () => {
395
403
  };
396
404
  const context = {
397
405
  ...SAMPLE_CONTEXT,
398
- layers: [layer1WithId, SAMPLE_LAYER3, SAMPLE_LAYER4, SAMPLE_LAYER2],
406
+ layers: [layer1WithId, SAMPLE_LAYER3, layer4WithStyle, SAMPLE_LAYER2],
399
407
  };
400
408
  await resetMapFromContext(map, context);
401
409
  vi.clearAllMocks();
@@ -421,7 +429,7 @@ describe("applyContextDiffToMap (mocked Map)", () => {
421
429
  previousPosition: 0,
422
430
  },
423
431
  {
424
- layer: SAMPLE_LAYER4,
432
+ layer: layer4WithStyle,
425
433
  newPosition: 0,
426
434
  previousPosition: 2,
427
435
  },
@@ -434,17 +442,20 @@ describe("applyContextDiffToMap (mocked Map)", () => {
434
442
  expect(map.getStyle().layers).toEqual([
435
443
  expect.objectContaining({
436
444
  metadata: {
437
- layerHash: generateLayerHashWithoutUpdatableProps(SAMPLE_LAYER4),
445
+ layerHash:
446
+ generateLayerHashWithoutUpdatableProps(layer4WithStyle),
438
447
  },
439
448
  }),
440
449
  expect.objectContaining({
441
450
  metadata: {
442
- layerHash: generateLayerHashWithoutUpdatableProps(SAMPLE_LAYER4),
451
+ layerHash:
452
+ generateLayerHashWithoutUpdatableProps(layer4WithStyle),
443
453
  },
444
454
  }),
445
455
  expect.objectContaining({
446
456
  metadata: {
447
- layerHash: generateLayerHashWithoutUpdatableProps(SAMPLE_LAYER4),
457
+ layerHash:
458
+ generateLayerHashWithoutUpdatableProps(layer4WithStyle),
448
459
  },
449
460
  }),
450
461
  expect.objectContaining({
package/lib/map/create-map.test.ts CHANGED
@@ -20,11 +20,7 @@ import {
20
20
  LayerMetadataSpecification,
21
21
  PartialStyleSpecification,
22
22
  } from "../maplibre.models.js";
23
- import {
24
- CircleLayerSpecification,
25
- LineLayerSpecification,
26
- RasterSourceSpecification,
27
- } from "maplibre-gl";
23
+ import { RasterSourceSpecification } from "maplibre-gl";
28
24
 
29
25
  describe("MapContextService", () => {
30
26
  describe("#createLayer", () => {
@@ -97,33 +93,36 @@ describe("MapContextService", () => {
97
93
  expect(sourcesIds.length).toBe(1);
98
94
  expect(sourcesIds[0]).toBe("123456");
99
95
  });
100
- it("create 3 layers", () => {
96
+ it("create 5 layers", () => {
101
97
  expect(style.layers).toBeTruthy();
102
- expect(style.layers.length).toBe(3);
98
+ expect(style.layers.length).toBe(5);
103
99
 
104
100
  const sourceId = "123456";
105
- const fillLayer = style.layers[0] as FillLayerSpecification;
106
- const metadata = fillLayer.metadata as LayerMetadataSpecification;
107
-
108
- expect(fillLayer.id).toBe(`${sourceId}-fill`);
109
- expect(fillLayer.source).toBe(sourceId);
110
- expect(metadata.layerId).toBeUndefined();
111
- expect(metadata.layerHash).toBeTypeOf("string");
112
- expect(fillLayer.paint?.["fill-opacity"]).toBe(0.8);
113
- expect(fillLayer.layout?.visibility).toBe("visible");
114
-
115
- const lineLayer = style.layers[1] as LineLayerSpecification;
116
- expect(lineLayer.id).toBe(`${sourceId}-line`);
117
- expect(lineLayer.source).toBe(sourceId);
118
- expect(lineLayer.paint?.["line-opacity"]).toBe(0.8);
119
- expect(lineLayer.layout?.visibility).toBe("visible");
120
-
121
- const circleLayer = style.layers[2] as CircleLayerSpecification;
122
- expect(circleLayer.id).toBe(`${sourceId}-circle`);
123
- expect(circleLayer.source).toBe(sourceId);
124
- expect(circleLayer.paint?.["circle-opacity"]).toBe(0.8);
125
- expect(circleLayer.paint?.["circle-stroke-opacity"]).toBe(0.8);
126
- expect(circleLayer.layout?.visibility).toBe("visible");
101
+ expect(style.layers[0].id).toBe(`${sourceId}-0`);
102
+ expect((style.layers[0] as FillLayerSpecification).source).toBe(
103
+ sourceId,
104
+ );
105
+ expect(style.layers[0].type).toBe("line");
106
+ expect(style.layers[1].id).toBe(`${sourceId}-1`);
107
+ expect((style.layers[1] as FillLayerSpecification).source).toBe(
108
+ sourceId,
109
+ );
110
+ expect(style.layers[1].type).toBe("line");
111
+ expect(style.layers[2].id).toBe(`${sourceId}-2`);
112
+ expect((style.layers[2] as FillLayerSpecification).source).toBe(
113
+ sourceId,
114
+ );
115
+ expect(style.layers[2].type).toBe("fill");
116
+ expect(style.layers[3].id).toBe(`${sourceId}-3`);
117
+ expect((style.layers[3] as FillLayerSpecification).source).toBe(
118
+ sourceId,
119
+ );
120
+ expect(style.layers[3].type).toBe("line");
121
+ expect(style.layers[4].id).toBe(`${sourceId}-4`);
122
+ expect((style.layers[4] as FillLayerSpecification).source).toBe(
123
+ sourceId,
124
+ );
125
+ expect(style.layers[4].type).toBe("circle");
127
126
  });
128
127
 
129
128
  it("set correct source properties", () => {
@@ -134,12 +133,6 @@ describe("MapContextService", () => {
134
133
  expect(source.type).toBe("geojson");
135
134
  expect(source.data).toBe((layerModel as LayerGeojsonWithData).data);
136
135
  });
137
- it("set correct layer properties", () => {
138
- const layer = style.layers[0] as FillLayerSpecification;
139
- expect(layer.type).toBe(`fill`);
140
- expect(layer.paint?.["fill-color"]).toBe("rgba(255,255,255,0.4)");
141
- expect(layer.paint?.["fill-opacity"]).toBe(0.8);
142
- });
143
136
  });
144
137
  describe("with inline data as string", () => {
145
138
  beforeEach(async () => {
@@ -154,9 +147,9 @@ describe("MapContextService", () => {
154
147
  const sourcesIds = Object.keys(style.sources);
155
148
  expect(sourcesIds.length).toBe(1);
156
149
  });
157
- it("create 3 layers", () => {
150
+ it("create 5 layers", () => {
158
151
  expect(style.layers).toBeTruthy();
159
- expect(style.layers.length).toBe(3);
152
+ expect(style.layers.length).toBe(5);
160
153
  });
161
154
 
162
155
  it("set correct source properties", () => {
@@ -167,14 +160,6 @@ describe("MapContextService", () => {
167
160
  expect(source.type).toBe("geojson");
168
161
  expect(source.data).toEqual(MAP_CTX_LAYER_GEOJSON_FIXTURE.data);
169
162
  });
170
-
171
- it("set correct layer properties", () => {
172
- const layer = style.layers[0] as FillLayerSpecification;
173
- expect(layer.type).toBe(`fill`);
174
- expect(layer.paint?.["fill-color"]).toBe("rgba(255,255,255,0.4)");
175
- expect(layer.paint?.["fill-opacity"]).toBe(0.8);
176
- expect(layer.layout?.visibility).toBe("visible");
177
- });
178
163
  });
179
164
  describe("with invalid inline data as string", () => {
180
165
  beforeEach(async () => {
@@ -224,9 +209,9 @@ describe("MapContextService", () => {
224
209
  expect(sourcesIds.length).toBe(1);
225
210
  expect(sourcesIds[0]).toBe("123456");
226
211
  });
227
- it("create 3 layers", () => {
212
+ it("create 5 layers", () => {
228
213
  expect(style.layers).toBeTruthy();
229
- expect(style.layers.length).toBe(3);
214
+ expect(style.layers.length).toBe(5);
230
215
  });
231
216
 
232
217
  it("set correct source properties", () => {
@@ -239,14 +224,6 @@ describe("MapContextService", () => {
239
224
  "https://my.host.com/data/regions.json",
240
225
  );
241
226
  });
242
-
243
- it("set correct layer properties", () => {
244
- const layer = style.layers[0] as FillLayerSpecification;
245
- expect(layer.type).toBe(`fill`);
246
- expect(layer.paint?.["fill-color"]).toBe("rgba(255,255,255,0.4)");
247
- expect(layer.paint?.["fill-opacity"]).toBe(1);
248
- expect(layer.layout?.visibility).toBe("visible");
249
- });
250
227
  });
251
228
  });
252
229
  });
@@ -269,33 +246,36 @@ describe("MapContextService", () => {
269
246
  "https://www.datagrandest.fr/geoserver/region-grand-est/ows?service=WFS&version=1.1.0&request=GetFeature&outputFormat=application%2Fjson&typename=ms%3Acommune_actuelle_3857&srsname=EPSG%3A3857&bbox=10%2C20%2C30%2C40%2CEPSG%3A3857&maxFeatures=10000",
270
247
  );
271
248
  });
272
- it("create 3 layers", () => {
249
+ it("create 5 layers", () => {
273
250
  expect(style.layers).toBeTruthy();
274
- expect(style.layers.length).toBe(3);
251
+ expect(style.layers.length).toBe(5);
275
252
 
276
253
  const sourceId = "123456";
277
- const fillLayer = style.layers[0] as FillLayerSpecification;
278
- const metadata = fillLayer.metadata as LayerMetadataSpecification;
279
-
280
- expect(fillLayer.id).toBe(`${sourceId}-fill`);
281
- expect(fillLayer.source).toBe(sourceId);
282
- expect(metadata.layerId).toBeUndefined();
283
- expect(metadata.layerHash).toBeTypeOf("string");
284
- expect(fillLayer.paint?.["fill-opacity"]).toBe(0.5);
285
- expect(fillLayer.layout?.visibility).toBe("visible");
286
-
287
- const lineLayer = style.layers[1] as LineLayerSpecification;
288
- expect(lineLayer.id).toBe(`${sourceId}-line`);
289
- expect(lineLayer.source).toBe(sourceId);
290
- expect(lineLayer.paint?.["line-opacity"]).toBe(0.5);
291
- expect(lineLayer.layout?.visibility).toBe("visible");
292
-
293
- const circleLayer = style.layers[2] as CircleLayerSpecification;
294
- expect(circleLayer.id).toBe(`${sourceId}-circle`);
295
- expect(circleLayer.source).toBe(sourceId);
296
- expect(circleLayer.paint?.["circle-opacity"]).toBe(0.5);
297
- expect(circleLayer.paint?.["circle-stroke-opacity"]).toBe(0.5);
298
- expect(circleLayer.layout?.visibility).toBe("visible");
254
+ expect(style.layers[0].id).toBe(`${sourceId}-0`);
255
+ expect((style.layers[0] as FillLayerSpecification).source).toBe(
256
+ sourceId,
257
+ );
258
+ expect(style.layers[0].type).toBe("line");
259
+ expect(style.layers[1].id).toBe(`${sourceId}-1`);
260
+ expect((style.layers[1] as FillLayerSpecification).source).toBe(
261
+ sourceId,
262
+ );
263
+ expect(style.layers[1].type).toBe("line");
264
+ expect(style.layers[2].id).toBe(`${sourceId}-2`);
265
+ expect((style.layers[2] as FillLayerSpecification).source).toBe(
266
+ sourceId,
267
+ );
268
+ expect(style.layers[2].type).toBe("fill");
269
+ expect(style.layers[3].id).toBe(`${sourceId}-3`);
270
+ expect((style.layers[3] as FillLayerSpecification).source).toBe(
271
+ sourceId,
272
+ );
273
+ expect(style.layers[3].type).toBe("line");
274
+ expect(style.layers[4].id).toBe(`${sourceId}-4`);
275
+ expect((style.layers[4] as FillLayerSpecification).source).toBe(
276
+ sourceId,
277
+ );
278
+ expect(style.layers[4].type).toBe("circle");
299
279
  });
300
280
  });
301
281
 
@@ -317,20 +297,36 @@ describe("MapContextService", () => {
317
297
  "https://demo.ldproxy.net/zoomstack/collections/airports/items?f=json",
318
298
  );
319
299
  });
320
- it("create 3 layers", () => {
300
+ it("create 5 layers", () => {
321
301
  expect(style.layers).toBeTruthy();
322
- expect(style.layers.length).toBe(3);
302
+ expect(style.layers.length).toBe(5);
323
303
 
324
304
  const sourceId = "123456";
325
- const layer = style.layers[0] as FillLayerSpecification;
326
- const metadata = layer.metadata as LayerMetadataSpecification;
327
-
328
- expect(layer.id).toBe(`${sourceId}-fill`);
329
- expect(layer.source).toBe(sourceId);
330
- expect(metadata.layerId).toBeUndefined();
331
- expect(metadata.layerHash).toBeTypeOf("string");
332
- expect(layer.paint?.["fill-opacity"]).toBe(1);
333
- expect(layer.layout?.visibility).toBe("visible");
305
+ expect(style.layers[0].id).toBe(`${sourceId}-0`);
306
+ expect((style.layers[0] as FillLayerSpecification).source).toBe(
307
+ sourceId,
308
+ );
309
+ expect(style.layers[0].type).toBe("line");
310
+ expect(style.layers[1].id).toBe(`${sourceId}-1`);
311
+ expect((style.layers[1] as FillLayerSpecification).source).toBe(
312
+ sourceId,
313
+ );
314
+ expect(style.layers[1].type).toBe("line");
315
+ expect(style.layers[2].id).toBe(`${sourceId}-2`);
316
+ expect((style.layers[2] as FillLayerSpecification).source).toBe(
317
+ sourceId,
318
+ );
319
+ expect(style.layers[2].type).toBe("fill");
320
+ expect(style.layers[3].id).toBe(`${sourceId}-3`);
321
+ expect((style.layers[3] as FillLayerSpecification).source).toBe(
322
+ sourceId,
323
+ );
324
+ expect(style.layers[3].type).toBe("line");
325
+ expect(style.layers[4].id).toBe(`${sourceId}-4`);
326
+ expect((style.layers[4] as FillLayerSpecification).source).toBe(
327
+ sourceId,
328
+ );
329
+ expect(style.layers[4].type).toBe("circle");
334
330
  });
335
331
  });
336
332
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geospatial-sdk/maplibre",
3
- "version": "0.0.5-dev.56+eae591c",
3
+ "version": "0.0.5-dev.58+2a0ef33",
4
4
  "description": "Maplibre-related utilities",
5
5
  "keywords": [
6
6
  "maplibre",
@@ -27,13 +27,14 @@
27
27
  "build": "tsc"
28
28
  },
29
29
  "devDependencies": {
30
- "maplibre-gl": "^5.7.3"
30
+ "maplibre-gl": "^5.19.0"
31
31
  },
32
32
  "peerDependencies": {
33
- "maplibre-gl": "^5.7.3"
33
+ "maplibre-gl": "^5.19.0"
34
34
  },
35
35
  "dependencies": {
36
- "@geospatial-sdk/core": "^0.0.5-dev.56+eae591c"
36
+ "@geospatial-sdk/core": "^0.0.5-dev.58+2a0ef33",
37
+ "@geospatial-sdk/style": "^0.0.5-dev.58+2a0ef33"
37
38
  },
38
- "gitHead": "eae591cfcca0346c3cac6fe7d5dcddf88fe408f4"
39
+ "gitHead": "2a0ef33a707649901451dfc3572c2b9efdb00c26"
39
40
  }
package/dist/helpers/style.helpers.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import { VectorStyle } from "@geospatial-sdk/core";
2
- import { LayerSpecification } from "maplibre-gl";
3
- export declare function contextStyleToMaplibreLayers(style?: VectorStyle): Partial<LayerSpecification>[];
4
- //# sourceMappingURL=style.helpers.d.ts.map
package/dist/helpers/style.helpers.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"style.helpers.d.ts","sourceRoot":"","sources":["../../lib/helpers/style.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAajD,wBAAgB,4BAA4B,CAC1C,KAAK,GAAE,WAAgB,GACtB,OAAO,CAAC,kBAAkB,CAAC,EAAE,CAmD/B"}
package/dist/helpers/style.helpers.js DELETED
@@ -1,58 +0,0 @@
1
- const defaultOltStyle = {
2
- "fill-color": "rgba(255,255,255,0.4)",
3
- "stroke-color": "#3399CC",
4
- "stroke-width": 1.25,
5
- "circle-radius": 5,
6
- "circle-fill-color": "rgba(255,255,255,0.4)",
7
- "circle-stroke-width": 1.25,
8
- "circle-stroke-color": "#3399CC",
9
- };
10
- export function contextStyleToMaplibreLayers(style = {}) {
11
- const layers = [];
12
- if (Array.isArray(style)) {
13
- return style.flatMap((style_) => {
14
- if (style_.hasOwnProperty("style")) {
15
- console.warn("Rules in styles are not supported yet.");
16
- return contextStyleToMaplibreLayers(style_.style);
17
- }
18
- return contextStyleToMaplibreLayers(style_);
19
- });
20
- }
21
- style = { ...defaultOltStyle, ...style };
22
- if (style["fill-color"]) {
23
- layers.push({
24
- type: "fill",
25
- paint: {
26
- "fill-color": style["fill-color"],
27
- },
28
- filter: ["==", "$type", "Polygon"],
29
- });
30
- }
31
- if (style["stroke-color"] || style["stroke-width"]) {
32
- layers.push({
33
- type: "line",
34
- paint: {
35
- "line-color": style["stroke-color"],
36
- ...(style["stroke-width"] !== undefined && {
37
- "line-width": style["stroke-width"],
38
- }),
39
- ...(style["stroke-line-dash"] !== undefined && {
40
- "line-dasharray": style["stroke-line-dash"],
41
- }),
42
- },
43
- });
44
- }
45
- if (style["circle-radius"]) {
46
- layers.push({
47
- type: "circle",
48
- paint: {
49
- "circle-radius": style["circle-radius"],
50
- "circle-stroke-color": style["circle-stroke-color"],
51
- "circle-color": style["circle-fill-color"],
52
- "circle-stroke-width": style["circle-stroke-width"],
53
- },
54
- filter: ["==", "$type", "Point"],
55
- });
56
- }
57
- return layers;
58
- }
package/lib/helpers/style.helpers.test.ts DELETED
@@ -1,160 +0,0 @@
1
- import { describe, expect, it } from "vitest";
2
- import { contextStyleToMaplibreLayers } from "./style.helpers.js";
3
-
4
- const defautlMaplibreFill = {
5
- type: "fill",
6
- paint: {
7
- "fill-color": "rgba(255,255,255,0.4)",
8
- },
9
- filter: ["==", "$type", "Polygon"],
10
- };
11
- const defaultMaplibreLine = {
12
- type: "line",
13
- paint: {
14
- "line-color": "#3399CC",
15
- "line-width": 1.25,
16
- },
17
- };
18
- const defaultMaplibreCircle = {
19
- type: "circle",
20
- filter: ["==", "$type", "Point"],
21
- paint: {
22
- "circle-color": "rgba(255,255,255,0.4)",
23
- "circle-radius": 5,
24
- "circle-stroke-color": "#3399CC",
25
- "circle-stroke-width": 1.25,
26
- },
27
- };
28
- const defaultMaplibreStyle = [
29
- defautlMaplibreFill,
30
- defaultMaplibreLine,
31
- defaultMaplibreCircle,
32
- ];
33
-
34
- describe("createPaint", () => {
35
- it("return default layers when empty", () => {
36
- expect(contextStyleToMaplibreLayers({} as any)).toEqual(
37
- defaultMaplibreStyle,
38
- );
39
- });
40
- describe("Fill layer", () => {
41
- it("generates a fill layer", () => {
42
- const result = contextStyleToMaplibreLayers({
43
- "fill-color": "red",
44
- } as any);
45
- expect(result).toEqual([
46
- {
47
- filter: ["==", "$type", "Polygon"],
48
- type: "fill",
49
- paint: {
50
- "fill-color": "red",
51
- },
52
- },
53
- defaultMaplibreLine,
54
- defaultMaplibreCircle,
55
- ]);
56
- });
57
- });
58
-
59
- describe("Line layer", () => {
60
- it("generates a line layer if stroke-color is defined", () => {
61
- const result = contextStyleToMaplibreLayers({
62
- "stroke-color": "rgba(30, 67, 246, 0.5)",
63
- "stroke-width": 3,
64
- } as any);
65
- expect(result).toEqual([
66
- defautlMaplibreFill,
67
- {
68
- type: "line",
69
- paint: {
70
- "line-color": "rgba(30, 67, 246, 0.5)",
71
- "line-width": 3,
72
- },
73
- },
74
- defaultMaplibreCircle,
75
- ]);
76
- });
77
-
78
- it("Line stroke width", () => {
79
- const result = contextStyleToMaplibreLayers({ "stroke-width": 3 } as any);
80
- expect(result[1]).toEqual({
81
- type: "line",
82
- paint: {
83
- "line-color": "#3399CC",
84
- "line-width": 3,
85
- },
86
- });
87
- });
88
-
89
- it("Line dash array", () => {
90
- const result = contextStyleToMaplibreLayers({
91
- "stroke-color": "red",
92
- "stroke-line-dash": [2, 4],
93
- } as any);
94
- expect(result[1]).toEqual({
95
- type: "line",
96
- paint: {
97
- "line-color": "red",
98
- "line-dasharray": [2, 4],
99
- "line-width": 1.25,
100
- },
101
- });
102
- });
103
- });
104
-
105
- describe("Circle layer", () => {
106
- it("generates a circle layer with fill and stroke colors and stroke width", () => {
107
- const style = {
108
- "circle-radius": 10,
109
- "circle-fill-color": "red",
110
- "circle-stroke-color": "blue",
111
- "circle-stroke-width": 2,
112
- };
113
-
114
- const result = contextStyleToMaplibreLayers(style as any);
115
-
116
- expect(result).toEqual([
117
- defautlMaplibreFill,
118
- defaultMaplibreLine,
119
- {
120
- type: "circle",
121
- filter: ["==", "$type", "Point"],
122
- paint: {
123
- "circle-radius": 10,
124
- "circle-color": "red",
125
- "circle-stroke-color": "blue",
126
- "circle-stroke-width": 2,
127
- },
128
- },
129
- ]);
130
- });
131
-
132
- it("generates a circle layer with only radius if no colors are provided", () => {
133
- const style = {
134
- "circle-radius": 5,
135
- };
136
-
137
- const result = contextStyleToMaplibreLayers(style as any);
138
-
139
- expect(result[2].paint).toEqual({
140
- "circle-color": "rgba(255,255,255,0.4)",
141
- "circle-radius": 5,
142
- "circle-stroke-color": "#3399CC",
143
- "circle-stroke-width": 1.25,
144
- });
145
- });
146
-
147
- it("respects colors and opacity", () => {
148
- const style = {
149
- "circle-radius": 8,
150
- "circle-fill-color": "rgba(255,0,0,0.3)",
151
- "circle-stroke-color": "rgba(0,0,255,0.6)",
152
- };
153
-
154
- const result = contextStyleToMaplibreLayers(style as any);
155
-
156
- expect(result[2].paint["circle-color"]).toBe("rgba(255,0,0,0.3)"); // mocked
157
- expect(result[2].paint["circle-stroke-color"]).toBe("rgba(0,0,255,0.6)"); // mocked
158
- });
159
- });
160
- });
package/lib/helpers/style.helpers.ts DELETED
@@ -1,68 +0,0 @@
1
- import { VectorStyle } from "@geospatial-sdk/core";
2
- import { LayerSpecification } from "maplibre-gl";
3
- import { FlatFill, FlatStyle, Rule } from "ol/style/flat.js";
4
-
5
- const defaultOltStyle: FlatStyle = {
6
- "fill-color": "rgba(255,255,255,0.4)",
7
- "stroke-color": "#3399CC",
8
- "stroke-width": 1.25,
9
- "circle-radius": 5,
10
- "circle-fill-color": "rgba(255,255,255,0.4)",
11
- "circle-stroke-width": 1.25,
12
- "circle-stroke-color": "#3399CC",
13
- };
14
-
15
- export function contextStyleToMaplibreLayers(
16
- style: VectorStyle = {},
17
- ): Partial<LayerSpecification>[] {
18
- const layers: Partial<LayerSpecification>[] = [];
19
-
20
- if (Array.isArray(style)) {
21
- return style.flatMap((style_) => {
22
- if (style_.hasOwnProperty("style")) {
23
- console.warn("Rules in styles are not supported yet.");
24
- return contextStyleToMaplibreLayers((style_ as Rule).style);
25
- }
26
- return contextStyleToMaplibreLayers(style_ as any);
27
- });
28
- }
29
-
30
- style = { ...defaultOltStyle, ...style };
31
-
32
- if (style["fill-color"]) {
33
- layers.push({
34
- type: "fill",
35
- paint: {
36
- "fill-color": (style as FlatFill)["fill-color"] as string,
37
- },
38
- filter: ["==", "$type", "Polygon"],
39
- });
40
- }
41
- if (style["stroke-color"] || style["stroke-width"]) {
42
- layers.push({
43
- type: "line",
44
- paint: {
45
- "line-color": style["stroke-color"] as string,
46
- ...(style["stroke-width"] !== undefined && {
47
- "line-width": style["stroke-width"] as number,
48
- }),
49
- ...(style["stroke-line-dash"] !== undefined && {
50
- "line-dasharray": style["stroke-line-dash"],
51
- }),
52
- },
53
- });
54
- }
55
- if (style["circle-radius"]) {
56
- layers.push({
57
- type: "circle",
58
- paint: {
59
- "circle-radius": style["circle-radius"] as number,
60
- "circle-stroke-color": style["circle-stroke-color"] as string,
61
- "circle-color": style["circle-fill-color"] as string,
62
- "circle-stroke-width": style["circle-stroke-width"] as number,
63
- },
64
- filter: ["==", "$type", "Point"],
65
- });
66
- }
67
- return layers;
68
- }