diff --git a/src/components/OpenLayerEsri.tsx b/src/components/OpenLayerEsri.tsx
index 11e9f2c..3a8dec6 100644
--- a/src/components/OpenLayerEsri.tsx
+++ b/src/components/OpenLayerEsri.tsx
@@ -122,6 +122,7 @@ const map = new Map({
}),
});
+
return (
<>
diff --git a/src/components/OpenLayerMap.tsx b/src/components/OpenLayerMap.tsx
index 78f1672..48f0f00 100644
--- a/src/components/OpenLayerMap.tsx
+++ b/src/components/OpenLayerMap.tsx
@@ -16,6 +16,7 @@ import GeoJSON from "ol/format/GeoJSON"
import {Style, Icon, Fill, Circle, Stroke} from "ol/style"
const OpenLayersMap = () => {
+ const [data,setData] = useState({});
const mapDivRef = useRef(null);
const popupRef = useRef(null);
@@ -39,6 +40,14 @@ style: new Style({
}),
}),
+});
+const vectorsource_offset: any = new VectorSource();
+const format: any = new GeoJSON();
+ //vectorsource_offset.addFeature(format.readFeatures(data))
+
+const vectorLayer2: any = new VectorLayer({
+ source: vectorsource_offset,
+
});
const vectorLayer1: any = new VectorLayer({
source: new VectorSource({
@@ -48,12 +57,31 @@ attributions: ['Los Angeles GeoHub |']
}),
});
+const urls: string[] = [];
+for(var i = 0; i < 1088001; i = i + 2000){
+ const url_2: any = `https://geo.sandag.org/server/rest/services/Hosted/Parcels/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&resultOffset=${i}&resultType=none&f=geojson`;
+ urls.push(url_2);
+}
// default view
useEffect(() => {
+
+ urls.forEach((url,index) => {
+
+ fetch(url)
+ .then(response => response.json())
+ .then(response => vectorsource_offset.addFeatures(format.readFeatures(response, {
+ dataProjection: 'EPSG:4326',
+ featureProjection: map.getView().getProjection(),
+ })))
+ .catch(error => console.error(error));
+
+ })
+
+
const overlay = new Overlay({
element: popupRef.current as HTMLDivElement,
autoPan: {
@@ -68,8 +96,7 @@ const overlay = new Overlay({
new TileLayer({
source: new OSM(),
}),
- vectorLayer,
- vectorLayer1
+ vectorLayer2,
],
view: new View({
center: [-13042228, 3857849],
@@ -134,7 +161,7 @@ const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
//def_view.fit(geoJSONFeatures[0].getGeometry().getExtent(), { padding: [100, 100, 100, 100]});
return () => map.setTarget(undefined);
- }, []);
+ }, [data]);
return (
<>