From 549a5784c081d15424c8f7108e43f74f7cd510b0 Mon Sep 17 00:00:00 2001 From: Stef Winterswijk Date: Tue, 4 Jun 2024 16:24:48 +0200 Subject: [PATCH] Update Geoserver layer --- src/api/axiosGeoJSON.ts | 24 +++++++ src/components/AreaPreview/AreaPreview.tsx | 2 + .../DynamicObject/ObjectArea/ObjectArea.tsx | 6 +- .../Form/FieldSelectArea/FieldSelectArea.tsx | 2 +- .../LeafletTinyViewer/LeafletTinyViewer.tsx | 66 ++++++++++--------- .../Modals/AreaModal/steps/StepOne.tsx | 1 + .../Modals/AreaModal/steps/StepTwo.tsx | 3 +- .../utils/handleWerkingsgebiedSelect.tsx | 4 +- 8 files changed, 70 insertions(+), 38 deletions(-) diff --git a/src/api/axiosGeoJSON.ts b/src/api/axiosGeoJSON.ts index acccd04d..e6d8cedd 100644 --- a/src/api/axiosGeoJSON.ts +++ b/src/api/axiosGeoJSON.ts @@ -3,6 +3,8 @@ import { Point } from 'leaflet' import generateQueryString from '@/utils/queryString' +import { Environment } from './instance' + export interface Feature { id: string properties: { @@ -156,11 +158,33 @@ const generateImageUrl = (symbol: string) => { }/geoserver/Omgevingsbeleid/wms?${path}` } +const getGeoserverLayer = (isSource?: boolean): string => { + const environment = isSource + ? 'source' + : (import.meta.env.VITE_API_ENV as Environment) + + switch (environment) { + case 'source': + return 'Omgevingsbeleid:Werkingsgebieden' + case 'dev': + return 'Omgevingsbeleid:Werkingsgebieden_dev' + case 'test': + return 'Omgevingsbeleid:Werkingsgebieden_test' + case 'acc': + return 'Omgevingsbeleid:Werkingsgebieden_acc' + case 'main': + return 'Omgevingsbeleid:Werkingsgebieden_prod' + default: + return '' + } +} + export default instance export { api_version, generateImageUrl, getGeoJsonData, + getGeoserverLayer, getOnderverdeling, getWerkingsGebieden, getWerkingsGebiedenByArea, diff --git a/src/components/AreaPreview/AreaPreview.tsx b/src/components/AreaPreview/AreaPreview.tsx index ea18103f..9cb74323 100644 --- a/src/components/AreaPreview/AreaPreview.tsx +++ b/src/components/AreaPreview/AreaPreview.tsx @@ -6,6 +6,7 @@ import { LeafletTinyViewer } from '../Leaflet' interface AreaPreviewProps { area?: Partial + isSource?: boolean } const AreaPreview = ({ area }: AreaPreviewProps) => ( @@ -24,6 +25,7 @@ const AreaPreview = ({ area }: AreaPreviewProps) => ( ? area.Source_UUID : area?.UUID || '' } + isSource /> )} diff --git a/src/components/DynamicObject/ObjectArea/ObjectArea.tsx b/src/components/DynamicObject/ObjectArea/ObjectArea.tsx index 869a3c8c..9bf7806d 100644 --- a/src/components/DynamicObject/ObjectArea/ObjectArea.tsx +++ b/src/components/DynamicObject/ObjectArea/ObjectArea.tsx @@ -72,7 +72,7 @@ const ObjectArea = ({ Tip! Gebruik het icoon{' '} {' '} om de kaartlagen binnen dit werkingsgebied te bekijken @@ -80,9 +80,7 @@ const ObjectArea = ({
- +
)} diff --git a/src/components/Form/FieldSelectArea/FieldSelectArea.tsx b/src/components/Form/FieldSelectArea/FieldSelectArea.tsx index ddd2099e..ae5b5a1c 100644 --- a/src/components/Form/FieldSelectArea/FieldSelectArea.tsx +++ b/src/components/Form/FieldSelectArea/FieldSelectArea.tsx @@ -145,7 +145,7 @@ const FieldSelectArea = ({
- +
diff --git a/src/components/Leaflet/LeafletTinyViewer/LeafletTinyViewer.tsx b/src/components/Leaflet/LeafletTinyViewer/LeafletTinyViewer.tsx index 1b0c85ba..5f64d504 100644 --- a/src/components/Leaflet/LeafletTinyViewer/LeafletTinyViewer.tsx +++ b/src/components/Leaflet/LeafletTinyViewer/LeafletTinyViewer.tsx @@ -5,7 +5,7 @@ import { useMap } from 'react-leaflet' import { Feature, - getOnderverdeling, + getGeoserverLayer, getWerkingsgebied, } from '@/api/axiosGeoJSON' import ToggleableSection from '@/components/ToggleableSection' @@ -15,9 +15,10 @@ import LeafletMap from '../LeafletMap' interface LeafletTinyViewerProps { uuid: string + isSource?: boolean } -const LeafletTinyViewer = ({ uuid }: LeafletTinyViewerProps) => ( +const LeafletTinyViewer = ({ uuid, isSource }: LeafletTinyViewerProps) => ( ( }} controllers={{ showLayers: false }} id={`leaflet-tiny-viewer-${uuid}`}> - + ) -const LeafletTinyViewerInner = ({ uuid }: LeafletTinyViewerProps) => { +const LeafletTinyViewerInner = ({ uuid, isSource }: LeafletTinyViewerProps) => { const map = useMap() const { data: werkingsgebied } = useQuery({ @@ -38,11 +39,11 @@ const LeafletTinyViewerInner = ({ uuid }: LeafletTinyViewerProps) => { queryFn: () => getWerkingsgebied(uuid), enabled: !!uuid, }) - const { data: onderverdeling } = useQuery({ - queryKey: ['onderverdeling', uuid], - queryFn: () => getOnderverdeling(uuid), - enabled: !!uuid, - }) + // const { data: onderverdeling } = useQuery({ + // queryKey: ['onderverdeling', uuid], + // queryFn: () => getOnderverdeling(uuid), + // enabled: !!uuid, + // }) const [layerIntance, setLayerInstance] = useState<{ werkingsgebied?: TileLayer.WMS @@ -55,10 +56,13 @@ const LeafletTinyViewerInner = ({ uuid }: LeafletTinyViewerProps) => { }>({ werkingsgebied: true }) const initializeMap = () => { - const filters = onderverdeling?.features - ?.map(s => s.properties.Onderverdeling) - .filter(Boolean) - setLayerFilter({ ...layerFilter, layers: filters }) + // const filters = onderverdeling?.features + // ?.map(s => s.properties.Onderverdeling) + // .filter(Boolean) + setLayerFilter({ + ...layerFilter, + //layers: filters + }) const defaultLayerOptions = { version: '1.3.0', @@ -75,42 +79,42 @@ const LeafletTinyViewerInner = ({ uuid }: LeafletTinyViewerProps) => { import.meta.env.VITE_GEOSERVER_API_URL }/geoserver/Omgevingsbeleid/wms`, { - layers: 'Omgevingsbeleid:Werkingsgebieden', + layers: getGeoserverLayer(isSource), zIndex: 1, ...defaultLayerOptions, } ) - const subLayerInstance = Leaflet.tileLayer.wms( - `${ - import.meta.env.VITE_GEOSERVER_API_URL - }/geoserver/Omgevingsbeleid/wms`, - { - layers: 'Omgevingsbeleid:Werkingsgebieden_Onderverdeling', - zIndex: 2, - ...defaultLayerOptions, - } - ) + // const subLayerInstance = Leaflet.tileLayer.wms( + // `${ + // import.meta.env.VITE_GEOSERVER_API_URL + // }/geoserver/Omgevingsbeleid/wms`, + // { + // layers: 'Omgevingsbeleid:Werkingsgebieden_Onderverdeling', + // zIndex: 2, + // ...defaultLayerOptions, + // } + // ) layerInstance.addTo(map) - subLayerInstance.addTo(map) + // subLayerInstance.addTo(map) const layers: Feature[] = [] - onderverdeling?.features?.forEach(feature => { - layers.push(feature) - }) + // onderverdeling?.features?.forEach(feature => { + // layers.push(feature) + // }) setLayerInstance({ werkingsgebied: layerInstance, - onderverdeling: subLayerInstance, + // onderverdeling: subLayerInstance, }) setLayers(layers) } useEffect( - () => (onderverdeling || werkingsgebied) && initializeMap(), + () => /*onderverdeling || */ werkingsgebied && initializeMap(), // eslint-disable-next-line react-hooks/exhaustive-deps - [onderverdeling, werkingsgebied] + [/* onderverdeling , */ werkingsgebied] ) const handleFilter = useCallback( diff --git a/src/components/Modals/AreaModal/steps/StepOne.tsx b/src/components/Modals/AreaModal/steps/StepOne.tsx index 4b2592a7..ebb843f9 100644 --- a/src/components/Modals/AreaModal/steps/StepOne.tsx +++ b/src/components/Modals/AreaModal/steps/StepOne.tsx @@ -122,6 +122,7 @@ export const StepOne = ({ data, isLoading }: StepProps) => { diff --git a/src/components/Modals/AreaModal/steps/StepTwo.tsx b/src/components/Modals/AreaModal/steps/StepTwo.tsx index f8e8ddf8..dfef7583 100644 --- a/src/components/Modals/AreaModal/steps/StepTwo.tsx +++ b/src/components/Modals/AreaModal/steps/StepTwo.tsx @@ -53,7 +53,7 @@ export const StepTwo = ({ data }: StepProps) => {
-
+
{options?.map((version, index) => (
{
diff --git a/src/pages/public/MapSearch/utils/handleWerkingsgebiedSelect.tsx b/src/pages/public/MapSearch/utils/handleWerkingsgebiedSelect.tsx index f8bad0f5..4cf15f5c 100644 --- a/src/pages/public/MapSearch/utils/handleWerkingsgebiedSelect.tsx +++ b/src/pages/public/MapSearch/utils/handleWerkingsgebiedSelect.tsx @@ -1,5 +1,7 @@ import Leaflet, { Map } from 'leaflet' +import { getGeoserverLayer } from '@/api/axiosGeoJSON' + type SelectedOption = { label: string; value: string } const handleWerkingsgebiedSelect = async ( @@ -20,7 +22,7 @@ const handleWerkingsgebiedSelect = async ( import.meta.env.VITE_GEOSERVER_API_URL }/geoserver/Omgevingsbeleid/wms`, { - layers: 'Omgevingsbeleid:Werkingsgebieden', + layers: getGeoserverLayer(), version: '1.3.0', format: 'image/png', transparent: true,