Add ORVal to map view

wearepal · Apr 16, 2024 · d291e4e · d291e4e
1 parent d311ac5
commit d291e4e
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 5 deletions.
diff --git a/app/javascript/projects/layer_palette.tsx b/app/javascript/projects/layer_palette.tsx
@@ -282,6 +282,28 @@ export const LayerPalette = ({ addLayer, hide, dbModels, getTeamDatasets, teamNa
             )
           }
         </Section>
+        <Section title="ORVal">
+          {
+            Array<{ name: string, source: string, style: string }>(
+              { name: "Parks" , source: "ORVAL:parks_england", style: "ORVAL:orvalparks"},
+              { name: "Beaches", source: "ORVAL:beaches_england", style: ""},
+              { name: "Paths", source: "ORVAL:paths_england", style: ""},
+              { name: "Path Access Points", source: "ORVAL:paths_england_accesspts", style: ""},
+            ).map(({ name, source, style }) =>
+              <AddLayerButton
+                addLayer={addLayer}
+                prototype={{
+                  type: "ORValLayer",
+                  name,
+                  visible: true,
+                  opacity: 1,
+                  source,
+                  style
+                }}
+              />
+            )
+          }
+        </Section>
         <Section title="UKCEH Land Cover Maps">
           <AddLayerButton
             addLayer={addLayer}

diff --git a/app/javascript/projects/reify_layer/index.ts b/app/javascript/projects/reify_layer/index.ts
@@ -16,6 +16,7 @@ import { reifyShapeFileLayer } from './shapefile'
 import { reifyBoundaryLayer } from './boundary'
 import { reifyGeoserverWMSLayer } from './geoserver'
 import { reifyKewLayer } from './kew'
+import { reifyOrvalLayer } from './orval'
 
 export const reifyLayer = (layer: Layer, existingLayer: BaseLayer | null, dbModels: DBModels, map: Map, modelOutputCache: ModelOutputCache, DatasetCache: DatasetCache, loadteamDataset: (layer: DatasetLayer) => void): BaseLayer => {
   const layerType = layer.type
@@ -33,6 +34,7 @@ export const reifyLayer = (layer: Layer, existingLayer: BaseLayer | null, dbMode
     case "BoundaryLayer": return reifyBoundaryLayer(layer, existingLayer, map)
     case "MLLayer": return reifyGeoserverWMSLayer(layer, existingLayer)
     case "KewLayer": return reifyKewLayer(layer, existingLayer, map)
+    case "ORValLayer": return reifyOrvalLayer(layer, existingLayer, map)
     default: {
       // Ensure this switch statement is exhaustive
       const unreachable: never = layerType

diff --git a/app/javascript/projects/reify_layer/orval.ts b/app/javascript/projects/reify_layer/orval.ts
@@ -0,0 +1,27 @@
+import BaseLayer from "ol/layer/Base"
+import { ORValLayer } from "../state"
+import { Map } from "ol"
+import TileWMS from "ol/source/TileWMS"
+import { memoize } from "lodash"
+import TileLayer from "ol/layer/Tile"
+
+
+const getSourceWMS = memoize((layer: ORValLayer) =>
+    new TileWMS({
+        url: 'https://landscapes.wearepal.ai/geoserver/wms',
+        params: {
+            'LAYERS': layer.source, 
+            'TILED': true,
+            'STYLES': layer.style
+        },
+        serverType: 'geoserver',
+        imageSmoothing: false,
+        attributions: '&copy; <a href="https://www.leep.exeter.ac.uk/orval/">ORVal</a> Partners'
+    })
+)
+
+export function reifyOrvalLayer (layer: ORValLayer, existingLayer: BaseLayer | null, map: Map) {
+    return new TileLayer({
+        source: getSourceWMS(layer)
+    })
+}
diff --git a/app/javascript/projects/sidebar.tsx b/app/javascript/projects/sidebar.tsx
@@ -781,10 +781,16 @@ export const Sidebar = ({ state, selectLayer, mutateLayer, deleteLayer, setLayer
                 } 
               />
             }
-          </> :
-          <em>No layer selected</em>
-      }
-    </div>
+            {
+              selectedLayer?.type == "ORValLayer" &&
+              <>
+                <img src={selectedLayer.style !== "" ? `https://landscapes.wearepal.ai/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=${selectedLayer.source}&STYLE=${selectedLayer.style}` : ""} alt="" />
+              </>
+            }
+              </> :
+              <em>No layer selected</em>
+            }
+            </div>
     <button
       disabled={state.selectedLayer === undefined || state.project.layers[state.selectedLayer]?.type === "ModelOutputLayer"}
       className="btn btn-outline-danger rounded-0 border-left-0 border-right-0 border-bottom-0"

diff --git a/app/javascript/projects/state.ts b/app/javascript/projects/state.ts
@@ -81,6 +81,12 @@ export interface NevoLayer extends BaseLayer {
   fill: "greyscale" | "heatmap"
 }
 
+export interface ORValLayer extends BaseLayer {
+  type: "ORValLayer",
+  source: string
+  style: string
+}
+
 export interface CehLandCoverLayer extends BaseLayer {
   type: "CehLandCoverLayer"
   year: 2021 // TODO: allow the user to customise this
@@ -115,7 +121,7 @@ export interface MLLayer extends BaseLayer {
   layerName: string
 }
 
-export type Layer = OsmLayer | MapTileLayer | OverlayLayer | NevoLayer | CehLandCoverLayer | ModelOutputLayer | DatasetLayer | CropMapLayer | AtiLayer | ShapeLayer | BoundaryLayer | MLLayer | KewLayer
+export type Layer = OsmLayer | MapTileLayer | OverlayLayer | NevoLayer | CehLandCoverLayer | ModelOutputLayer | DatasetLayer | CropMapLayer | AtiLayer | ShapeLayer | BoundaryLayer | MLLayer | KewLayer | ORValLayer
 
 export interface Project {
   name: string