ML Layer implementation on Map View

app/javascript/projects/layer_palette.tsx

@@ -82,6 +82,18 @@ export const LayerPalette = ({ addLayer, hide, dbModels, getTeamDatasets, teamNa
             />
           ))}
         </Section>
+        <Section title="Machine Learning Output">
+          <AddLayerButton
+            addLayer={addLayer}
+            prototype={{
+              type: "MLLayer",
+              layerName: "ml:tree_hedge_predictions",
+              name: "Trees & Hedges Classification",
+              visible: true,
+              opacity: 1,
+            }}
+          />
+        </Section>
         <Section title="Ancient Tree Inventory">
           <AddLayerButton
             addLayer={addLayer}

app/javascript/projects/reify_layer/geoserver.ts

@@ -0,0 +1,24 @@
+import BaseLayer from "ol/layer/Base"
+import { MLLayer } from "../state"
+import TileLayer from "ol/layer/Tile"
+import TileWMS from "ol/source/TileWMS"
+import { memoize } from "lodash"
+
+
+
+const getSourceWMS = memoize((layer: MLLayer) =>
+    new TileWMS({
+        url: 'https://landscapes.wearepal.ai/geoserver/wms',
+        params: {'LAYERS': layer.layerName, 'TILED': true, 'STYLES': 'ml:treesandhedges'},
+        serverType: 'geoserver',
+        imageSmoothing: false
+    })
+)
+
+
+export function reifyGeoserverWMSLayer (layer: MLLayer, existingLayer: BaseLayer | null) {
+
+    return new TileLayer({
+        source: getSourceWMS(layer)
+    })
+}

app/javascript/projects/reify_layer/index.ts

@@ -14,6 +14,7 @@ import { reifyCropMapLayer } from './crop_map_layer'
 import { reifyAtiLayer } from './ati'
 import { reifyShapeFileLayer } from './shapefile'
 import { reifyBoundaryLayer } from './boundary'
+import { reifyGeoserverWMSLayer } from './geoserver'
 
 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
@@ -29,6 +30,7 @@ export const reifyLayer = (layer: Layer, existingLayer: BaseLayer | null, dbMode
     case "AtiLayer" : return reifyAtiLayer(layer, existingLayer, map)
     case "ShapeLayer": return reifyShapeFileLayer(layer, existingLayer, map)
     case "BoundaryLayer": return reifyBoundaryLayer(layer, existingLayer, map)
+    case "MLLayer": return reifyGeoserverWMSLayer(layer, existingLayer)
     default: {
       // Ensure this switch statement is exhaustive
       const unreachable: never = layerType

app/javascript/projects/sidebar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import './sidebar.css'
 import { ReactSortable } from 'react-sortablejs'
 import { nevoLevelNames, nevoPropertyNames } from './nevo'
-import { AtiLayer, CropMapLayer, DatasetLayer, Layer, ModelOutputLayer, NevoLayer, OverlayLayer, ShapeLayer, State } from './state'
+import { AtiLayer, CropMapLayer, DatasetLayer, Layer, MLLayer, ModelOutputLayer, NevoLayer, OverlayLayer, ShapeLayer, State } from './state'
 import { iconForLayerType } from "./util"
 import { getColorStops } from './reify_layer/model_output'
 import { tileGridStats } from './modelling/tile_grid'
@@ -234,6 +234,18 @@ function ModelOutputLayerSettings({ layer, mutate, layerType }: ModelOutputLayer
   }
 }
 
+interface MLLayerSettingsProps {
+  layer: MLLayer
+}
+
+const MLLayerSettings = ({ layer }: MLLayerSettingsProps) => (
+  <details className="mt-3">
+    <summary>Legend</summary>
+    <span className="swatch" style={{ backgroundColor: "#008000" }} /> Hedge<br />
+    <span className="swatch" style={{ backgroundColor: "#ffee00" }} /> Tree<br />
+  </details>
+)
+
 export function ZoomData({zoom, area, length}) {
   const unit = area < 1 ? "cm²" : (area > 1000000 ? "km²" : "m²")
   length = area < 1 ? length * 100 : (area > 1000000 ? length / 1000 : length)
@@ -701,6 +713,10 @@ export const Sidebar = ({ state, selectLayer, mutateLayer, deleteLayer, setLayer
               selectedLayer?.type == "ShapeLayer" &&
               <ShapeLayerSettings layer={selectedLayer}/>
             }
+            {
+              selectedLayer?.type == "MLLayer" &&
+              <MLLayerSettings layer={selectedLayer} />
+            }
           </> :
           <em>No layer selected</em>
       }

app/javascript/projects/state.ts

@@ -92,7 +92,12 @@ export interface DatasetLayer extends BaseLayer {
   deleted?: boolean
 }
 
-export type Layer = OsmLayer | MapTileLayer | OverlayLayer | NevoLayer | CehLandCoverLayer | ModelOutputLayer | DatasetLayer | CropMapLayer | AtiLayer | ShapeLayer | BoundaryLayer
+export interface MLLayer extends BaseLayer {
+  type: "MLLayer"
+  layerName: string
+}
+
+export type Layer = OsmLayer | MapTileLayer | OverlayLayer | NevoLayer | CehLandCoverLayer | ModelOutputLayer | DatasetLayer | CropMapLayer | AtiLayer | ShapeLayer | BoundaryLayer | MLLayer
 
 export interface Project {
   name: string

app/javascript/projects/util.ts

@@ -15,6 +15,7 @@ export function iconForLayerType(type: Layer['type']) {
     case "OverlayLayer":
       return "fa-draw-polygon"
     case "ModelOutputLayer":
+    case "MLLayer":
       return "fa-project-diagram"
     case "ShapeLayer":
     case "BoundaryLayer":