CDC #248 - Fixing a bug with GeoJsonLayer component and map styles

performant-software · Jul 22, 2024 · e8f3e81 · e8f3e81
1 parent 0100a8b
commit e8f3e81
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 65 deletions.
diff --git a/packages/geospatial/src/components/GeoJsonLayer.js b/packages/geospatial/src/components/GeoJsonLayer.js
@@ -15,43 +15,28 @@ type Props = {
   url?: string
 };
 
-const GeoJsonLayer = (props: Props) => {
-  const [data, setData] = useState(props.data);
-
-  /**
-   * If the data is passed as a URL, fetches the passed URL and sets the response on the state.
-   */
-  useEffect(() => {
-    if (props.url) {
-      fetch(props.url)
-        .then((response) => response.json())
-        .then((json) => setData(json));
-    }
-  }, [props.url]);
-
-  return (
-    <Source
-      data={data}
-      type='geojson'
-    >
-      <Layer
-        filter={['!=', '$type', 'Point']}
-        paint={props.fillStyle}
-        type='fill'
-      />
-      <Layer
-        filter={['!=', '$type', 'Point']}
-        paint={props.lineStyle}
-        type='line'
-      />
-      <Layer
-        filter={['==', '$type', 'Point']}
-        paint={props.pointStyle}
-        type='circle'
-      />
-    </Source>
-  );
-};
+const GeoJsonLayer = (props: Props) => (
+  <Source
+    data={props.data || props.url}
+    type='geojson'
+  >
+    <Layer
+      filter={['!=', '$type', 'Point']}
+      paint={props.fillStyle}
+      type='fill'
+    />
+    <Layer
+      filter={['!=', '$type', 'Point']}
+      paint={props.lineStyle}
+      type='line'
+    />
+    <Layer
+      filter={['==', '$type', 'Point']}
+      paint={props.pointStyle}
+      type='circle'
+    />
+  </Source>
+);
 
 GeoJsonLayer.defaultProps = {
   fillStyle: MapStyles.fill,

diff --git a/packages/geospatial/src/utils/MapStyles.js b/packages/geospatial/src/utils/MapStyles.js
@@ -1,40 +1,31 @@
 // @flow
 
 const point = {
-  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'
-  }
+  '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 = {
-  type: 'fill',
-  paint: {
-    'fill-color': '#ff623b',
-    'fill-opacity': 0.2
-  }
+  'fill-color': '#ff623b',
+  'fill-opacity': 0.2
 };
 
 const stroke = {
-  type: 'line',
-  paint: {
-    'line-color': '#ff623b',
-    'line-opacity': 0.6
-  }
+  'line-color': '#ff623b',
+  'line-opacity': 0.6
 };
 
 export default {