Completed The Zoom-in of Parcel Layer
This commit is contained in:
parent
e7c2097fc9
commit
56b7e5d02e
1 changed files with 90 additions and 103 deletions
|
|
@ -20,131 +20,121 @@ 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(() => {
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
if (address && address.length > 0) {
|
||||
const lat = parseFloat(address[0].lat);
|
||||
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
|
||||
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', // A pin icon
|
||||
scale: 0.05,
|
||||
}),
|
||||
}));
|
||||
|
||||
// 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);
|
||||
map.on('click', (e) => {
|
||||
setClickedCoordinate(e.coordinate);
|
||||
});
|
||||
}
|
||||
|
||||
// Add new marker layer
|
||||
mapRef.current!.addLayer(markerLayer);
|
||||
markerLayerRef.current = markerLayer;
|
||||
}
|
||||
}, [address]);
|
||||
if (address && address.length > 0) {
|
||||
const lat = parseFloat(address[0].lat);
|
||||
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,
|
||||
}));
|
||||
|
||||
//Parcel Layer
|
||||
useEffect(() => {
|
||||
if (!mapRef.current) return;
|
||||
|
||||
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)
|
||||
.then((res) => res.json())
|
||||
.then((geojsonData) => {
|
||||
const vectorSource = new VectorSource({
|
||||
features: new GeoJSON().readFeatures(geojsonData, {
|
||||
featureProjection: 'EPSG:3857', // Make sure features match OSM projection
|
||||
}),
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
// ✅ Fit map to features
|
||||
mapRef.current?.getView().fit(vectorSource.getExtent(), {
|
||||
padding: [20, 20, 20, 20],
|
||||
maxZoom: 17,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error loading GeoJSON:', err);
|
||||
// Create the marker feature
|
||||
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', // A pin icon
|
||||
scale: 0.05,
|
||||
}),
|
||||
}));
|
||||
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
}, [address]); // ✅ Moved outside the useEffect block (syntax fix)
|
||||
|
||||
//UI Downstairs
|
||||
return (
|
||||
|
|
@ -173,6 +163,3 @@ useEffect(() => {
|
|||
};
|
||||
|
||||
export default OpenLayersMap;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue