Completed The Zoom-in of Parcel Layer

src/components/OpenLayerMap.tsx

@@ -20,32 +20,28 @@ const OpenLayersMap = () => {
   const [term, setTerm] = useState<string>('');
   const [address, setAddress] = useState();
 
-
   //Submit Button Logic
-
   const submitForm = async (event: React.FormEvent<HTMLFormElement>) => {
     // Preventing the page from reloading
     event.preventDefault();
 
-    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`)
-
+    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`);
     const json = await response.json();
     console.log(json);
     setAddress(json);
     console.log(address);
     alert(term);
   }
-
   //Submit Button Logic
 
-
   //const [data, setData] = useState({});
   const mapDivRef = useRef<HTMLDivElement>(null);
   const [clickedCoordinate, setClickedCoordinate] = useState<Coordinate>();
   const mapRef = useRef<Map | null>(null);
-const markerLayerRef = useRef<VectorLayer | null>(null);
+  const markerLayerRef = useRef<VectorLayer | null>(null);
+  const parcelLayerRef = useRef<VectorLayer | null>(null);
 
-useEffect(() => {
+  useEffect(() => {
     if (!mapRef.current) {
       const map = new Map({
         target: mapDivRef.current as HTMLDivElement,
@@ -99,23 +95,22 @@ useEffect(() => {
       // Add new marker layer
       mapRef.current!.addLayer(markerLayer);
       markerLayerRef.current = markerLayer;
-  }
-}, [address]);
-
 
       //Parcel Layer
-  useEffect(() => {
-    if (!mapRef.current) return;
+      const radius = 500; // meters
+      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 url = 'https://geo.sandag.org/server/rest/services/Hosted/Parcels/FeatureServer/0/query' +
-      '?where=1=1&outFields=*&returnGeometry=true&f=geojson&resultRecordCount=5000';
-
-    fetch(url)
+      fetch(parcelUrl)
         .then((res) => res.json())
         .then((geojsonData) => {
+          // 🧹 Remove previous parcel layer if exists
+          if (parcelLayerRef.current) {
+            mapRef.current?.removeLayer(parcelLayerRef.current);
+          }
+
           const vectorSource = new VectorSource({
             features: new GeoJSON().readFeatures(geojsonData, {
-            featureProjection: 'EPSG:3857', // Make sure features match OSM projection
+              featureProjection: 'EPSG:3857',
             }),
           });
 
@@ -133,18 +128,13 @@ useEffect(() => {
           });
 
           mapRef.current?.addLayer(vectorLayer);
-
-        // ✅ Fit map to features
-        mapRef.current?.getView().fit(vectorSource.getExtent(), {
-          padding: [20, 20, 20, 20],
-          maxZoom: 17,
-        });
+          parcelLayerRef.current = vectorLayer;
         })
         .catch((err) => {
-        console.error('Error loading GeoJSON:', err);
+          console.error('Error fetching parcels:', err);
         });
-  }, []);
-
+    }
+  }, [address]); // ✅ Moved outside the useEffect block (syntax fix)
 
   //UI Downstairs
   return (
@@ -173,6 +163,3 @@ useEffect(() => {
 };
 
 export default OpenLayersMap;
-
-
-