CDC #248 - Fixing an issue with map styles between Peripleo and React…

…MapGL
performant-software · Jul 23, 2024 · fcb93f3 · fcb93f3
1 parent 83457bc
commit fcb93f3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git a/packages/geospatial/src/components/GeoJsonLayer.js b/packages/geospatial/src/components/GeoJsonLayer.js
@@ -39,9 +39,9 @@ const GeoJsonLayer = (props: Props) => (
 );
 
 GeoJsonLayer.defaultProps = {
-  fillStyle: MapStyles.fill,
-  pointStyle: MapStyles.point,
-  strokeStyle: MapStyles.stroke
+  fillStyle: MapStyles.fill.paint,
+  pointStyle: MapStyles.point.paint,
+  strokeStyle: MapStyles.stroke.paint
 };
 
 export default GeoJsonLayer;
diff --git a/packages/geospatial/src/utils/MapStyles.js b/packages/geospatial/src/utils/MapStyles.js
@@ -1,31 +1,40 @@
 // @flow
 
 const point = {
-  'circle-radius': [
-    'interpolate',
-    ['linear'],
-    ['number', ['get', 'point_count'], 1],
-    0, 4,
-    10, 14
-  ],
-  'circle-stroke-width': 1,
-  'circle-color': [
-    'case',
-    ['boolean', ['feature-state', 'hover'], false],
-    '#3b62ff',
-    '#ff623b'
-  ],
-  'circle-stroke-color': '#8d260c'
+  type: 'circle',
+  paint: {
+    'circle-radius': [
+      'interpolate',
+      ['linear'],
+      ['number', ['get', 'point_count'], 1],
+      0, 4,
+      10, 14
+    ],
+    'circle-stroke-width': 1,
+    'circle-color': [
+      'case',
+      ['boolean', ['feature-state', 'hover'], false],
+      '#3b62ff',
+      '#ff623b'
+    ],
+    'circle-stroke-color': '#8d260c'
+  }
 };
 
 const fill = {
-  'fill-color': '#ff623b',
-  'fill-opacity': 0.2
+  type: 'fill',
+  paint: {
+    'fill-color': '#ff623b',
+    'fill-opacity': 0.2
+  }
 };
 
 const stroke = {
-  'line-color': '#ff623b',
-  'line-opacity': 0.6
+  type: 'line',
+  paint: {
+    'line-color': '#ff623b',
+    'line-opacity': 0.6
+  }
 };
 
 export default {