10th Jun

src/components/Methods/Layers.tsx

@@ -0,0 +1,40 @@
+import { Map } from 'ol';
+import 'ol/ol.css';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
+import Style from 'ol/style/Style';
+
+
+export const loadAndRenderGeoJsonLayer = async (
+  url: string,
+  map: Map,
+  layerRef: React.MutableRefObject<VectorLayer | null>,
+  style: Style
+) => {
+  try {
+    const res = await fetch(url);
+    const geojsonData = await res.json();
+
+
+    if (layerRef.current) {
+      map.removeLayer(layerRef.current);
+    }
+
+    const vectorSource = new VectorSource({
+      features: new GeoJSON().readFeatures(geojsonData, {
+        featureProjection: 'EPSG:3857',
+      }),
+    });
+
+    const vectorLayer = new VectorLayer({
+      source: vectorSource,
+      style: style,
+    });
+
+    map.addLayer(vectorLayer);
+    layerRef.current = vectorLayer;
+  } catch (err) {
+    console.error(`Failed to load layer from ${url}:`, err);
+  }
+};

src/components/OpenLayerMap.tsx

@@ -7,13 +7,13 @@ import { fromLonLat } from 'ol/proj';
 import { Coordinate } from 'ol/coordinate';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
-import GeoJSON from 'ol/format/GeoJSON';
 import Style from 'ol/style/Style';
 import Stroke from 'ol/style/Stroke';
 import Fill from 'ol/style/Fill';
 import Icon from 'ol/style/Icon';
 import Point from 'ol/geom/Point';
 import Feature from 'ol/Feature';
+import {loadAndRenderGeoJsonLayer} from './Methods/Layers'
 
 const OpenLayersMap = () => {
   const [term, setTerm] = useState<string>('');
@@ -85,60 +85,29 @@ useEffect(() => {
     mapRef.current!.addLayer(markerLayer);
     markerLayerRef.current = markerLayer;
 
-    const radius = 100;
+    const radius = 1;
     const parcelUrl = `https://geo.sandag.org/server/rest/services/Hosted/Parcels/FeatureServer/0/query?geometry=${lon},${lat}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=${radius}&units=esriSRUnit_Meter&outFields=*&returnGeometry=true&f=geojson`;
     const sewerUrl = `https://geo.sandag.org/server/rest/services/Hosted/Sewer_Main_SD/FeatureServer/0/query?geometry=${lon},${lat}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=${radius}&units=esriSRUnit_Meter&outFields=*&returnGeometry=true&f=geojson`;
+      loadAndRenderGeoJsonLayer(
+        parcelUrl,
+        mapRef.current!,
+        parcelLayerRef,
+        new Style({
+          stroke: new Stroke({ color: 'green', width: 1.5 }),
+          fill: new Fill({ color: 'rgba(0, 255, 0, 0.1)' }),
+        })
+      );
 
-    fetch(parcelUrl)
+      loadAndRenderGeoJsonLayer(
-      .then((res) => res.json())
+        sewerUrl,
-      .then((parcelData) => {
+        mapRef.current!,
-        if (parcelLayerRef.current) {
+        sewerLayerRef,
-          mapRef.current?.removeLayer(parcelLayerRef.current);
+        new Style({
-        }
+          stroke: new Stroke({ color: 'blue', width: 2 }),
-
+        })
-        const parcelSource = new VectorSource({
+      );
-          features: new GeoJSON().readFeatures(parcelData, {
+    }
-            featureProjection: 'EPSG:3857',
+  }, [address]);
-          }),
-        });
-
-        const parcelLayer = new VectorLayer({
-          source: parcelSource,
-          style: new Style({
-            stroke: new Stroke({ color: 'green', width: 1.5 }),
-            fill: new Fill({ color: 'rgba(0, 255, 0, 0.1)' }),
-          }),
-        });
-
-        mapRef.current?.addLayer(parcelLayer);
-        parcelLayerRef.current = parcelLayer;
-      });
-
-    fetch(sewerUrl)
-      .then((res) => res.json())
-      .then((sewerData) => {
-        if (sewerLayerRef.current) {
-          mapRef.current?.removeLayer(sewerLayerRef.current);
-        }
-
-        const sewerSource = new VectorSource({
-          features: new GeoJSON().readFeatures(sewerData, {
-            featureProjection: 'EPSG:3857',
-          }),
-        });
-
-        const sewerLayer = new VectorLayer({
-          source: sewerSource,
-          style: new Style({
-            stroke: new Stroke({ color: 'blue', width: 2 }),
-          }),
-        });
-
-        mapRef.current?.addLayer(sewerLayer);
-        sewerLayerRef.current = sewerLayer;
-      });
-  }
-}, [address]);
 
 
   //UI Downstairs