From a28cf723c31cf7e517fb324d73acdade423808cd Mon Sep 17 00:00:00 2001 From: lokeshramchand-ctrl Date: Mon, 9 Jun 2025 00:33:54 +0530 Subject: [PATCH] Sewer Done --- src/components/OpenLayerMap.tsx | 186 +++++++++++++++++--------------- 1 file changed, 100 insertions(+), 86 deletions(-) diff --git a/src/components/OpenLayerMap.tsx b/src/components/OpenLayerMap.tsx index c3254c4..740a15d 100644 --- a/src/components/OpenLayerMap.tsx +++ b/src/components/OpenLayerMap.tsx @@ -40,101 +40,115 @@ const OpenLayersMap = () => { const mapRef = useRef(null); const markerLayerRef = useRef(null); const parcelLayerRef = useRef(null); + const sewerLayerRef = useRef(null); - useEffect(() => { - if (!mapRef.current) { - const map = new Map({ - target: mapDivRef.current as HTMLDivElement, - layers: [new TileLayer({ source: new OSM() })], - }); - mapRef.current = map; +useEffect(() => { + if (!mapRef.current) { + const map = new Map({ + target: mapDivRef.current as HTMLDivElement, + layers: [new TileLayer({ source: new OSM() })], + }); + mapRef.current = map; - map.on('click', (e) => { - setClickedCoordinate(e.coordinate); - }); + map.on('click', (e) => { + setClickedCoordinate(e.coordinate); + }); + } + + if (address && address.length > 0) { + const lat = parseFloat(address[0].lat); + const lon = parseFloat(address[0].lon); + const coords = fromLonLat([lon, lat]); + + mapRef.current!.setView(new View({ + center: coords, + zoom: 15, + })); + + // ๐Ÿงท Marker logic + const markerFeature = new Feature({ + geometry: new Point(coords), + }); + + markerFeature.setStyle(new Style({ + image: new Icon({ + anchor: [0.5, 1], + src: 'https://cdn-icons-png.flaticon.com/512/684/684908.png', + scale: 0.05, + }), + })); + + const markerSource = new VectorSource({ features: [markerFeature] }); + const markerLayer = new VectorLayer({ source: markerSource }); + + if (markerLayerRef.current) { + mapRef.current!.removeLayer(markerLayerRef.current); } + mapRef.current!.addLayer(markerLayer); + markerLayerRef.current = markerLayer; - if (address && address.length > 0) { - const lat = parseFloat(address[0].lat); - const lon = parseFloat(address[0].lon); - const coords = fromLonLat([lon, lat]); + // ๐ŸŒ Radius + const radius = 100; - // Set view to the searched location - mapRef.current!.setView(new View({ - center: coords, - zoom: 15, - })); + // ๐Ÿ”ท 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`; - // Create the marker feature - const markerFeature = new Feature({ - geometry: new Point(coords), - }); + // ๐Ÿ”ท 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`; - 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 - scale: 0.05, - }), - })); + // ๐Ÿšง Fetch Parcels + fetch(parcelUrl) + .then((res) => res.json()) + .then((parcelData) => { + if (parcelLayerRef.current) { + mapRef.current?.removeLayer(parcelLayerRef.current); + } - // Create vector source and layer - const vectorSource = new VectorSource({ - features: [markerFeature], - }); - - 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 - 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`; - - 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', - }), - }); - - const vectorLayer = new VectorLayer({ - source: vectorSource, - style: new Style({ - 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); + const parcelSource = new VectorSource({ + features: new GeoJSON().readFeatures(parcelData, { + featureProjection: 'EPSG:3857', + }), }); - } - }, [address]); // โœ… Moved outside the useEffect block (syntax fix) + + 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 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]); + //UI Downstairs return (