feat: add interpolate function (#325)

geostyler · Nov 29, 2024 · 6567d8b · 6567d8b
1 parent 18e9fd5
commit 6567d8b
Show file tree

Hide file tree

Showing 9 changed files with 265 additions and 70 deletions.
diff --git a/data/mapbox/color_rgba.ts b/data/mapbox/color_rgba.ts
@@ -1,16 +1,16 @@
 import { MbStyle } from '../../src/MapboxStyleParser';
 
-const circleSimpleCircle: MbStyle = {
+const colorRgba: MbStyle = {
   version: 8,
-  name: 'Simple Circle',
+  name: 'Color RGBA',
   sources: {
     testsource: {
       type: 'vector'
     }
   },
   layers: [
     {
-      id: 'Simple Circle',
+      id: 'Color RGBA',
       source: 'testsource',
       'source-layer': 'foo',
       type: 'circle',
@@ -27,4 +27,4 @@ const circleSimpleCircle: MbStyle = {
   ]
 };
 
-export default circleSimpleCircle;
+export default colorRgba;
diff --git a/data/mapbox/expression_interpolate.ts b/data/mapbox/expression_interpolate.ts
@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { MbStyle } from '../../src/MapboxStyleParser';
+
+const expressionInterpolate: MbStyle = {
+  version: 8,
+  name: 'Expression Interpolate',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
+  layers: [
+    {
+      id: 'earthquake_circle',
+      type: 'circle',
+      source: 'testsource',
+      'source-layer': 'foo',
+      paint: {
+        'circle-color': '#000000',
+        'circle-opacity': 0.6,
+        'circle-radius': [
+          'interpolate',
+          ['linear'],
+          ['get', 'population'],
+          12,
+          2,
+          15,
+          4,
+          19,
+          35
+        ]
+      }
+    }
+  ]
+};
+
+export default expressionInterpolate;
diff --git a/data/mapbox_metadata/expression_interpolate.ts b/data/mapbox_metadata/expression_interpolate.ts
@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { MbStyle } from '../../src/MapboxStyleParser';
+
+const expression_case: MbStyle = {
+  version: 8,
+  name: 'Expression Interpolate',
+  sources: {
+    testsource: {
+      type: 'vector'
+    }
+  },
+  layers: [
+    {
+      id: 'r0_sy0_st0',
+      source: 'testsource',
+      'source-layer': 'foo',
+      type: 'circle',
+      paint: {
+        'circle-color': '#000000',
+        'circle-opacity': 0.6,
+        'circle-radius': [
+          'interpolate',
+          ['linear'],
+          ['get', 'population'],
+          12,
+          2,
+          15,
+          4,
+          19,
+          35
+        ]
+      }
+    }
+  ],
+  metadata: {
+    'geostyler:ref': {
+      rules: [{
+        name: 'earthquake_circle',
+        symbolizers: [
+          [
+            'r0_sy0_st0'
+          ]
+        ]
+      }]
+    }
+  }
+};
+
+export default expression_case;
diff --git a/data/styles/color_rgba.ts b/data/styles/color_rgba.ts
@@ -1,26 +1,26 @@
 import { Style } from 'geostyler-style';
 
-const circleSimpleCircle: Style = {
-  name: 'Simple Circle',
+const colorRgba: Style = {
+  name: 'Color RGBA',
   rules: [{
-    name: 'Simple Circle',
+    name: 'Color RGBA',
     symbolizers: [{
       kind: 'Mark',
       wellKnownName: 'circle',
       color: '#000000',
       strokeColor: {
         name: 'case',
-        args: [{
-          case: {
-            name: 'lessThan',
-            args: [{
-              name: 'property',
-              args: ['mag']
-            }, 2]
-          },
-          value: '#ff0000'
-        },
-        '#00ff00'
+        args: [
+          '#00ff00', {
+            case: {
+              name: 'lessThan',
+              args: [{
+                name: 'property',
+                args: ['mag']
+              }, 2]
+            },
+            value: '#ff0000'
+          }
         ]
       }
     }]
@@ -42,4 +42,4 @@ const circleSimpleCircle: Style = {
   }
 };
 
-export default circleSimpleCircle;
+export default colorRgba;
diff --git a/data/styles/gs_expression_case.ts b/data/styles/gs_expression_case.ts
@@ -10,7 +10,7 @@ const gs_expression_case: Style = {
       wellKnownName: 'circle',
       color: {
         name: 'case',
-        args: [{
+        args: ['#e31a1c', {
           case: {
             name: 'lessThan',
             args: [{
@@ -80,8 +80,7 @@ const gs_expression_case: Style = {
             }]
           },
           value:'#fc4e2a'
-        },
-        '#e31a1c']
+        }]
       },
       radius: 12,
       fillOpacity: 0.6

diff --git a/data/styles/gs_expression_decisions.ts b/data/styles/gs_expression_decisions.ts
@@ -11,6 +11,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'not',
@@ -23,8 +24,7 @@ const gs_expression_decisions: Style = {
               }]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -36,6 +36,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'notEqualTo',
@@ -45,8 +46,7 @@ const gs_expression_decisions: Style = {
               }, 1]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -58,6 +58,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'lessThan',
@@ -67,8 +68,7 @@ const gs_expression_decisions: Style = {
               }, 1]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -80,6 +80,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'lessThanOrEqualTo',
@@ -89,8 +90,7 @@ const gs_expression_decisions: Style = {
               }, 1]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -102,6 +102,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'equalTo',
@@ -111,8 +112,7 @@ const gs_expression_decisions: Style = {
               }, 1]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -124,6 +124,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'greaterThan',
@@ -133,8 +134,7 @@ const gs_expression_decisions: Style = {
               }, 1]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -146,6 +146,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'greaterThanOrEqualTo',
@@ -155,8 +156,7 @@ const gs_expression_decisions: Style = {
               }, 1]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -168,6 +168,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'all',
@@ -189,8 +190,7 @@ const gs_expression_decisions: Style = {
               ]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]
@@ -202,6 +202,7 @@ const gs_expression_decisions: Style = {
       color: {
         name: 'case',
         args: [
+          '#000000',
           {
             case: {
               name: 'any',
@@ -223,8 +224,7 @@ const gs_expression_decisions: Style = {
               ]
             },
             value: '#FFFFFF'
-          },
-          '#000000'
+          }
         ]
       }
     }]

diff --git a/data/styles/gs_expression_interpolate.ts b/data/styles/gs_expression_interpolate.ts
@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Style } from 'geostyler-style';
+
+const gsExpressionInterpolate: Style = {
+  name: 'Expression Interpolate',
+  rules: [{
+    name: 'earthquake_circle',
+    symbolizers: [{
+      kind: 'Mark',
+      wellKnownName: 'circle',
+      color: '#000000',
+      fillOpacity: 0.6,
+      radius: {
+        name: 'interpolate',
+        args: [{
+          name: 'linear'
+        }, {
+          name: 'property',
+          args: ['population']
+        }, {
+          stop: 12,
+          value: 2
+        }, {
+          stop: 15,
+          value: 4
+        }, {
+          stop: 19,
+          value: 35
+        }]
+      }
+    }]
+  }],
+  metadata: {
+    'mapbox:ref': {
+      sources: {
+        testsource: {
+          type: 'vector'
+        }
+      },
+      sourceMapping: {
+        testsource: [0]
+      },
+      sourceLayerMapping: {
+        foo: [0]
+      }
+    }
+  }
+};
+
+export default gsExpressionInterpolate;