feat: keep track of mapbox sources and source layers in layers

BREAKING CHANGE: This changes the typing of the MbStyle by making the property 'source' required. Through this, we actually follow the MapBox Style Specification. MbStyles that previously omitted the 'source' property, will now have to add it.
geostyler · Sep 11, 2023 · a8f5d7c · a8f5d7c
1 parent c95708d
commit a8f5d7c
Show file tree

Hide file tree

Showing 74 changed files with 1,199 additions and 128 deletions.
diff --git a/README.md b/README.md
@@ -12,54 +12,12 @@ The endpoint MUST return a reference to a single image.
 
 ---
 
-Mapbox Styles require the properties [`sources`](https://docs.mapbox.com/mapbox-gl-js/style-spec/#root-sources) (root property) and [`source`](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layer-source) (layers property). geostyler-mapbox-parser only parses style related properties to keep a clear separation between style and data. Thus, `sources` and `source` have to be added to the created styleobject after parsing, manually. See code snippet below for an example implementation of a wrapper function.
-
-```javascript
-/**
- * Example wrapper function that maps a source to the corresponding
- * layer based on layer id. Expects a mapper object with key value
- * pairs in the format of "layerId:'sourceName'".
-**/
-function wrapper(sources, mapper, style) {
-  if (typeof style === 'undefined') {
-    return;
-  }
-  if (typeof mapper === 'undefined') {
-    return style;
-  }
-  if (typeof sources === 'undefined') {
-    return style;
-  }
-
-  style.sources = sources;
-  style.layers.forEach(l => {
-    l.source = mapper[l.id];
-  });
-  return style;
-}
-
-// required mapper object where the key refers to the layer id
-// and the value to the source name.
-var mapper = {
-  "water": "mapbox-streets"
-};
-
-// mapbox sources object
-var sources = {
-  "mapbox-streets": {
-    "type": "vector",
-    "url": "mapbox://mapbox.mapbox-streets-v6"
-  }
-};
-
-// mapbox style object
-var mbStyle = {
-  version: 8,
-  layers: [...]
-};
-
-var wrappedStyle = wrapper(sources, mapper, style);
-```
+Mapbox styles require the properties [`sources`](https://docs.mapbox.com/mapbox-gl-js/style-spec/#root-sources) (root property)
+and [`source`](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layer-source) (layers property).
+In order to keep a clear separation between style and data, geostyler-mapbox-parser puts the source-related attributes into the metadata block of
+a geostyler-style under `mapbox:ref`. There, the original sources object, as well as the mappings between layers and sources will be stored
+(properties `sources`, `sourceMapping` and `layerSourceMapping`). Applications can then use these mappings for re-creating the same layer structure
+using their map library of choice (e.g. OpenLayers, etc.).
 
 ### How to use
 

diff --git a/data/mapbox/circle_simplecircle.ts b/data/mapbox/circle_simplecircle.ts
@@ -1,11 +1,18 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const circleSimpleCircle: Omit<MbStyle, 'sources'> = {
+const circleSimpleCircle: MbStyle = {
   version: 8,
   name: 'Simple Circle',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Simple Circle',
+      source: 'testsource',
+      'source-layer': 'foo',
       type: 'circle',
       paint: {
         'circle-color': '#000000',

diff --git a/data/mapbox/expression_case.ts b/data/mapbox/expression_case.ts
@@ -1,13 +1,20 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const expression_case: Omit<MbStyle, 'sources'> = {
+const expression_case: MbStyle = {
   version: 8,
   name: 'Expression Case',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'earthquake_circle',
       type: 'circle',
+      source: 'testsource',
+      'source-layer': 'foo',
       paint: {
         'circle-color': [
           'case',

diff --git a/data/mapbox/expression_get.ts b/data/mapbox/expression_get.ts
@@ -1,12 +1,19 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const expression_get: Omit<MbStyle, 'sources'> = {
+const expression_get: MbStyle = {
   version: 8,
   name: 'Expression Get',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Expression Get',
+      source: 'testsource',
+      'source-layer': 'foo',
       type: 'circle',
       paint: {
         'circle-color': '#000000',

diff --git a/data/mapbox/fill_patternfill.ts b/data/mapbox/fill_patternfill.ts
@@ -1,12 +1,19 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const fillSimpleFill: Omit<MbStyle, 'sources'> = {
+const fillSimpleFill: MbStyle = {
   version: 8,
   name: 'Pattern Fill',
   sprite: 'https://testurl.com',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Pattern Fill',
+      source: 'testsource',
+      'source-layer': 'foo',
       type: 'fill',
       paint: {
         'fill-color': '#000000',

diff --git a/data/mapbox/fill_simple_outline.ts b/data/mapbox/fill_simple_outline.ts
@@ -1,18 +1,27 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const fillSimpleFillOutline: Omit<MbStyle, 'sources'> = {
+const fillSimpleFillOutline: MbStyle = {
   version: 8,
   name: 'Simple Fill With outline',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [{
     id: 'r0_sy0_st0',
     type: 'fill',
+    source: 'testsource',
+    'source-layer': 'foo',
     paint: {
       'fill-color': '#ff0000'
     }
   },
   {
     id: 'r0_sy0_st1',
     type: 'line',
+    source: 'testsource',
+    'source-layer': 'foo',
     paint: {
       'line-opacity': 0.5,
       'line-color': '#00ff00',

diff --git a/data/mapbox/fill_simplefill.ts b/data/mapbox/fill_simplefill.ts
@@ -1,12 +1,19 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const fillSimpleFill: Omit<MbStyle, 'sources'> = {
+const fillSimpleFill: MbStyle = {
   version: 8,
   name: 'Simple Fill',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Simple Fill',
       type: 'fill',
+      source: 'testsource',
+      'source-layer': 'foo',
       paint: {
         'fill-color': '#000000',
         'fill-opacity': 1

diff --git a/data/mapbox/icon_simpleicon.ts b/data/mapbox/icon_simpleicon.ts
@@ -1,13 +1,20 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const iconSimpleIcon: Omit<MbStyle, 'sources'> = {
+const iconSimpleIcon: MbStyle = {
   version: 8,
   name: 'Simple Icon',
   sprite: 'https://testurl.com',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Simple Icon',
       type: 'symbol',
+      source: 'testsource',
+      'source-layer': 'foo',
       layout: {
         'icon-image': 'poi'
       }

diff --git a/data/mapbox/icon_simpleicon_mapboxapi.ts b/data/mapbox/icon_simpleicon_mapboxapi.ts
@@ -1,12 +1,19 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const iconSimpleIcon: Omit<MbStyle, 'sources'> = {
+const iconSimpleIcon: MbStyle = {
   version: 8,
   name: 'Simple Icon',
   sprite: 'mapbox://sprites/mapbox/streets-v8',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Simple Icon',
+      source: 'testsource',
+      'source-layer': 'foo',
       type: 'symbol',
       layout: {
         'icon-image': 'poi'

diff --git a/data/mapbox/icontext_symbolizer.ts b/data/mapbox/icontext_symbolizer.ts
@@ -1,12 +1,19 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const iconTextSymbolizer: Omit<MbStyle, 'sources'> = {
+const iconTextSymbolizer: MbStyle = {
   version: 8,
   name: 'icontext symbolizer',
   sprite: 'https://testurl.com',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       type: 'symbol',
+      source: 'testsource',
+      'source-layer': 'foo',
       paint: {
         'text-color': 'rgba(45, 45, 45, 1)',
       },

diff --git a/data/mapbox/line_patternline.ts b/data/mapbox/line_patternline.ts
@@ -1,13 +1,20 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const linePatternLine: Omit<MbStyle, 'sources'> = {
+const linePatternLine: MbStyle = {
   version: 8,
   name: 'Pattern Line',
   sprite: 'https://testurl.com',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Pattern Line',
       type: 'line',
+      source: 'testsource',
+      'source-layer': 'foo',
       paint: {
         'line-color': '#000000',
         'line-width': 3,

diff --git a/data/mapbox/line_simpleline.ts b/data/mapbox/line_simpleline.ts
@@ -1,11 +1,18 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const lineSimpleLine: Omit<MbStyle, 'sources'> = {
+const lineSimpleLine: MbStyle = {
   version: 8,
   name: 'Simple Line',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Simple Line',
+      source: 'testsource',
+      'source-layer': 'foo',
       type: 'line',
       paint: {
         'line-color': '#000000',

diff --git a/data/mapbox/line_simpleline_basefilter.ts b/data/mapbox/line_simpleline_basefilter.ts
@@ -1,10 +1,17 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const lineSimpleLine: Omit<MbStyle, 'sources'> = {
+const lineSimpleLine: MbStyle = {
   version: 8,
   name: 'Small populated New Yorks',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [{
     id: 'Small populated New Yorks',
+    source: 'testsource',
+    'source-layer': 'foo',
     type: 'line',
     filter: ['all',
       ['==', 'NAME', 'New York'],

diff --git a/data/mapbox/line_simpleline_expression.ts b/data/mapbox/line_simpleline_expression.ts
@@ -1,10 +1,17 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const lineSimpleLine: Omit<MbStyle, 'sources'> = {
+const lineSimpleLine: MbStyle = {
   version: 8,
   name: 'Simple Line Filter',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [{
     id: 'Small populated New Yorks',
+    source: 'testsource',
+    'source-layer': 'foo',
     type: 'line',
     paint: {
       'line-color': '#FF0000',

diff --git a/data/mapbox/line_simpleline_zoom.ts b/data/mapbox/line_simpleline_zoom.ts
@@ -1,10 +1,17 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const lineSimpleLine: Omit<MbStyle, 'sources'> = {
+const lineSimpleLine: MbStyle = {
   version: 8,
   name: 'Simple Line Filter',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [{
     id: 'Small populated New Yorks',
+    source: 'testsource',
+    'source-layer': 'foo',
     type: 'line',
     minzoom: 5.5,
     maxzoom: 10,

diff --git a/data/mapbox/multi_rule_line_fill.ts b/data/mapbox/multi_rule_line_fill.ts
@@ -1,12 +1,19 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const multiRuleLineFill: Omit<MbStyle, 'sources'> = {
+const multiRuleLineFill: MbStyle = {
   version: 8,
   name: 'Rule Line Fill',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
   layers: [
     {
       id: 'Line Rule',
       type: 'line',
+      source: 'testsource',
+      'source-layer': 'foo',
       paint: {
         'line-color': '#000000',
         'line-width': 3,
@@ -19,6 +26,8 @@ const multiRuleLineFill: Omit<MbStyle, 'sources'> = {
     }, {
       id: 'Fill Rule',
       type: 'fill',
+      source: 'testsource',
+      'source-layer': 'foo',
       paint: {
         'fill-color': '#000000',
         'fill-opacity': 1