Sewer Done

src/components/OpenLayerMap.tsx

@@ -40,8 +40,9 @@ const OpenLayersMap = () => {
   const mapRef = useRef<Map | null>(null);
   const markerLayerRef = useRef<VectorLayer | null>(null);
   const parcelLayerRef = useRef<VectorLayer | null>(null);
+  const sewerLayerRef = useRef<VectorLayer | null>(null);
 
-  useEffect(() => {
+useEffect(() => {
   if (!mapRef.current) {
     const map = new Map({
       target: mapDivRef.current as HTMLDivElement,
@@ -59,13 +60,12 @@ const OpenLayersMap = () => {
     const lon = parseFloat(address[0].lon);
     const coords = fromLonLat([lon, lat]);
 
-      // Set view to the searched location
     mapRef.current!.setView(new View({
       center: coords,
       zoom: 15,
     }));
 
-      // Create the marker feature
+    // 🧷 Marker logic
     const markerFeature = new Feature({
       geometry: new Point(coords),
     });
@@ -73,68 +73,82 @@ const OpenLayersMap = () => {
     markerFeature.setStyle(new Style({
       image: new Icon({
         anchor: [0.5, 1],
-          src: 'https://cdn-icons-png.flaticon.com/512/684/684908.png', // A pin icon
+        src: 'https://cdn-icons-png.flaticon.com/512/684/684908.png',
         scale: 0.05,
       }),
     }));
 
-      // Create vector source and layer
-      const vectorSource = new VectorSource({
-        features: [markerFeature],
-      });
+    const markerSource = new VectorSource({ features: [markerFeature] });
+    const markerLayer = new VectorLayer({ source: markerSource });
 
-      const markerLayer = new VectorLayer({
-        source: vectorSource,
-      });
-
-      // Remove old marker layer if it exists
     if (markerLayerRef.current) {
       mapRef.current!.removeLayer(markerLayerRef.current);
     }
-
-      // Add new marker layer
     mapRef.current!.addLayer(markerLayer);
     markerLayerRef.current = markerLayer;
 
-      //Parcel Layer
-      const radius = 500; // meters
+    // 🌍 Radius
+    const radius = 100;
+
+    // 🔷 Parcel URL
     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`;
 
+    // 🔷 Sewer URL
+    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`;
+
+    // 🚧 Fetch Parcels
     fetch(parcelUrl)
       .then((res) => res.json())
-        .then((geojsonData) => {
-          // 🧹 Remove previous parcel layer if exists
+      .then((parcelData) => {
         if (parcelLayerRef.current) {
           mapRef.current?.removeLayer(parcelLayerRef.current);
         }
 
-          const vectorSource = new VectorSource({
-            features: new GeoJSON().readFeatures(geojsonData, {
+        const parcelSource = new VectorSource({
+          features: new GeoJSON().readFeatures(parcelData, {
             featureProjection: 'EPSG:3857',
           }),
         });
 
-          const vectorLayer = new VectorLayer({
-            source: vectorSource,
+        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)',
-              }),
+            stroke: new Stroke({ color: 'green', width: 1.5 }),
+            fill: new Fill({ color: 'rgba(0, 255, 0, 0.1)' }),
           }),
         });
 
-          mapRef.current?.addLayer(vectorLayer);
-          parcelLayerRef.current = vectorLayer;
-        })
-        .catch((err) => {
-          console.error('Error fetching parcels:', err);
+        mapRef.current?.addLayer(parcelLayer);
+        parcelLayerRef.current = parcelLayer;
+      });
+
+    // 🚧 Fetch Sewer
+    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]); // ✅ Moved outside the useEffect block (syntax fix)
+}, [address]);
+
 
   //UI Downstairs
   return (