Update Geoserver layer

Provincie-Zuid-Holland · Jun 4, 2024 · 549a578 · 549a578
1 parent 785fef7
commit 549a578
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 38 deletions.
diff --git 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
@@ -6,6 +6,7 @@ import { LeafletTinyViewer } from '../Leaflet'
 
 interface AreaPreviewProps {
     area?: Partial<AreaBasic | Werkingsgebied>
+    isSource?: boolean
 }
 
 const AreaPreview = ({ area }: AreaPreviewProps) => (
@@ -24,6 +25,7 @@ const AreaPreview = ({ area }: AreaPreviewProps) => (
                             ? area.Source_UUID
                             : area?.UUID || ''
                     }
+                    isSource
                 />
             </div>
         )}

diff --git a/src/components/DynamicObject/ObjectArea/ObjectArea.tsx b/src/components/DynamicObject/ObjectArea/ObjectArea.tsx
@@ -72,17 +72,15 @@ const ObjectArea = ({
                             Tip! Gebruik het icoon{' '}
                             <LayerGroup
                                 size={18}
-                                className="mx-1 -mt-1 inline text-pzh-blue-900"
+                                className="text-pzh-blue-900 mx-1 -mt-1 inline"
                             />{' '}
                             om de kaartlagen binnen dit werkingsgebied te
                             bekijken
                         </>
                     </Notification>
 
                     <div className="h-[500px] overflow-hidden rounded-lg">
-                        <LeafletTinyViewer
-                            uuid={data.Area?.Source_UUID || ''}
-                        />
+                        <LeafletTinyViewer uuid={data.Area?.UUID || ''} />
                     </div>
                 </>
             )}

diff --git a/src/components/Form/FieldSelectArea/FieldSelectArea.tsx b/src/components/Form/FieldSelectArea/FieldSelectArea.tsx
@@ -145,7 +145,7 @@ const FieldSelectArea = ({
                             </div>
                         </div>
                         <div className="col-span-9 flex h-[500px] flex-1 md:col-span-6">
-                            <AreaPreview area={area} />
+                            <AreaPreview area={area} isSource />
                         </div>
                     </div>
                 </div>

diff --git 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) => (
     <LeafletMap
         options={{
             center: [52, 4.316168],
@@ -26,23 +27,23 @@ const LeafletTinyViewer = ({ uuid }: LeafletTinyViewerProps) => (
         }}
         controllers={{ showLayers: false }}
         id={`leaflet-tiny-viewer-${uuid}`}>
-        <LeafletTinyViewerInner uuid={uuid} />
+        <LeafletTinyViewerInner uuid={uuid} isSource={isSource} />
     </LeafletMap>
 )
 
-const LeafletTinyViewerInner = ({ uuid }: LeafletTinyViewerProps) => {
+const LeafletTinyViewerInner = ({ uuid, isSource }: LeafletTinyViewerProps) => {
     const map = useMap()
 
     const { data: werkingsgebied } = useQuery({
         queryKey: ['werkingsgebied', uuid],
         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
@@ -122,6 +122,7 @@ export const StepOne = ({ data, isLoading }: StepProps) => {
                         <AreaPreview
                             key={selectedArea?.UUID}
                             area={selectedArea}
+                            isSource
                         />
                     </div>
                 </div>

diff --git 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) => {
                 <div className="col-span-5">
                     <FieldLabel name="version" label="Versie" />
 
-                    <div className="h-[444px] overflow-y-auto rounded border border-pzh-gray-200 p-4">
+                    <div className="h-[500px] overflow-y-auto rounded border border-pzh-gray-200 p-4">
                         {options?.map((version, index) => (
                             <div
                                 key={version.UUID}
@@ -89,6 +89,7 @@ export const StepTwo = ({ data }: StepProps) => {
                         <AreaPreview
                             key={selectedArea?.UUID}
                             area={selectedArea}
+                            isSource
                         />
                     </div>
                 </div>

diff --git 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,
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,7 +145,7 @@ const FieldSelectArea = ({ @@
                                 </div>
                             </div>
                             <div className="col-span-9 flex h-[500px] flex-1 md:col-span-6">
-                                <AreaPreview area={area} />
+                                <AreaPreview area={area} isSource />
                             </div>
                         </div>
                     </div>
@@ Expand Down @@