priyatham/ai-real-estate-tool
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Completed The Zoom-in of Parcel Layer

Browse source
This commit is contained in:
lokeshramchand-ctrl 2025-06-08 22:54:52 +05:30
parent e7c2097fc9
commit 56b7e5d02e
1 changed files with 90 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/OpenLayerMap.tsx
View file

@ -20,30 +20,26 @@ const OpenLayersMap = () => {
const [term, setTerm] = useState<string>(''); const [term, setTerm] = useState<string>('');
const [address, setAddress] = useState(); const [address, setAddress] = useState();
//Submit Button Logic //Submit Button Logic
const submitForm = async (event: React.FormEvent<HTMLFormElement>) => { const submitForm = async (event: React.FormEvent<HTMLFormElement>) => {
// Preventing the page from reloading // Preventing the page from reloading
event.preventDefault(); 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(); const json = await response.json();
console.log(json); console.log(json);
setAddress(json); setAddress(json);
console.log(address); console.log(address);
alert(term); alert(term);
} }
//Submit Button Logic //Submit Button Logic
//const [data, setData] = useState({}); //const [data, setData] = useState({});
const mapDivRef = useRef<HTMLDivElement>(null); const mapDivRef = useRef<HTMLDivElement>(null);
const [clickedCoordinate, setClickedCoordinate] = useState<Coordinate>(); const [clickedCoordinate, setClickedCoordinate] = useState<Coordinate>();
const mapRef = useRef<Map | null>(null); 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) { if (!mapRef.current) {
@ -99,23 +95,22 @@ useEffect(() => {
// Add new marker layer // Add new marker layer
mapRef.current!.addLayer(markerLayer); mapRef.current!.addLayer(markerLayer);
markerLayerRef.current = markerLayer; markerLayerRef.current = markerLayer;
}
}, [address]);
//Parcel Layer //Parcel Layer
useEffect(() => { const radius = 500; // meters
if (!mapRef.current) return; 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' + fetch(parcelUrl)
'?where=1=1&outFields=*&returnGeometry=true&f=geojson&resultRecordCount=5000';
fetch(url)
.then((res) => res.json()) .then((res) => res.json())
.then((geojsonData) => { .then((geojsonData) => {
// 🧹 Remove previous parcel layer if exists
if (parcelLayerRef.current) {
mapRef.current?.removeLayer(parcelLayerRef.current);
}
const vectorSource = new VectorSource({ const vectorSource = new VectorSource({
features: new GeoJSON().readFeatures(geojsonData, { 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); mapRef.current?.addLayer(vectorLayer);
parcelLayerRef.current = vectorLayer;
// ✅ Fit map to features
mapRef.current?.getView().fit(vectorSource.getExtent(), {
padding: [20, 20, 20, 20],
maxZoom: 17,
});
}) })
.catch((err) => { .catch((err) => {
console.error('Error loading GeoJSON:', err); console.error('Error fetching parcels:', err);
}); });
}, []); }
}, [address]); // ✅ Moved outside the useEffect block (syntax fix)
//UI Downstairs //UI Downstairs
return ( return (
@ -173,6 +163,3 @@ useEffect(() => {
}; };
export default OpenLayersMap; export default OpenLayersMap;