Merge pull request #179 from wearepal/private-gardens

Increased zoom level on OS Green Spaces, default zoom setting, & fix for boolean to categorical node.

app/javascript/projects/modelling/bounding_box.ts

@@ -15,4 +15,5 @@ export const oldExtent = [-20839.008676500813, 6579722.087031, 12889.487811, 664
 //current extent = west horsely to english channel, inline with bexhill 
 export const currentExtent = [-49469.089243, 6570068.329224, 55641.379277, 6669018.450996]
 
-export const currentBbox = `${currentExtent.join(",")},EPSG:3857`
+export const currentBbox = `${currentExtent.join(",")},EPSG:3857`
+export const zoomLevel = 20

app/javascript/projects/modelling/components/categorical_component.ts

@@ -32,9 +32,19 @@ export class CategoricalComponent extends BaseComponent {
         if (isEqual(booleanData, this.previousInput)) {
             outputs['out'] = this.cachedData
         } else {
+            let baseBool: BooleanTileGrid | null = null
+            let highestZoom = -1
+            for (const boolGrid of booleanData as BooleanTileGrid[]) {
+                if (boolGrid.zoom > highestZoom) {
+                    highestZoom = boolGrid.zoom
+                    baseBool = boolGrid
+                }
+            }
+
+            if (!baseBool) { return }
+
             this.previousInput = booleanData as BooleanTileGrid[]
 
-            const baseBool = booleanData[0] as BooleanTileGrid
             const labels: Map<number, string> = new Map()
             const result = outputs['out'] = new CategoricalTileGrid(
                 baseBool.zoom,
@@ -44,8 +54,6 @@ export class CategoricalComponent extends BaseComponent {
                 baseBool.height
             )
 
-            // sort by name alphabetically,
-
             booleanData.map((e, i) => {
                 if (e instanceof BooleanTileGrid) {
                     labels.set(i + 1, e.name ? e.name : `Untitled data ${i + 1}`)

app/javascript/projects/modelling/components/census_component.ts

@@ -2,7 +2,7 @@ import { Node, Output } from "rete"
 import { NodeData, WorkerInputs, WorkerOutputs } from "rete/types/core/data"
 import { BaseComponent } from "./base_component"
 import { numericDataSocket } from "../socket_types"
-import { currentBbox , currentExtent} from "../bounding_box"
+import { currentBbox, currentExtent, zoomLevel } from "../bounding_box"
 import GeoJSON from "ol/format/GeoJSON"
 import { createXYZ } from "ol/tilegrid"
 import { NumericTileGrid } from "../tile_grid"
@@ -51,27 +51,27 @@ const censusOptions = [
     }
 ]
 
-async function fetchCensusShapefilesFromExtent(bbox: string){
+async function fetchCensusShapefilesFromExtent(bbox: string) {
 
-    const response =  await fetch(
+    const response = await fetch(
         "https://landscapes.wearepal.ai/geoserver/wfs?" +
         new URLSearchParams(
-          {
-            outputFormat: 'application/json',
-            request: 'GetFeature',
-            typeName: 'census:oa_2021_ew_bgc_v3_1294693978171420992__oa_2021_ew_bgc_v2',
-            srsName: 'EPSG:3857',
-            bbox
-          }
+            {
+                outputFormat: 'application/json',
+                request: 'GetFeature',
+                typeName: 'census:oa_2021_ew_bgc_v3_1294693978171420992__oa_2021_ew_bgc_v2',
+                srsName: 'EPSG:3857',
+                bbox
+            }
         )
-      )
-      if (!response.ok) throw new Error()
+    )
+    if (!response.ok) throw new Error()
 
-      return await response.json()
+    return await response.json()
 }
 
 export class CensusComponent extends BaseComponent {
-    cachedData : NumericTileGrid | undefined
+    cachedData: NumericTileGrid | undefined
 
     constructor() {
         super("UK Census - Highest Education")
@@ -102,18 +102,18 @@ export class CensusComponent extends BaseComponent {
         const editorNode = this.editor?.nodes.find(n => n.id === node.id)
         if (editorNode === undefined) { return }
 
-        if(this.cachedData){ 
+        if (this.cachedData) {
             editorNode.meta.output = outputs['out'] = this.cachedData
-        }else{
-             const zoom = 20
+        } else {
+            const zoom = zoomLevel
 
             const shapeFiles = await fetchCensusShapefilesFromExtent(currentBbox)
             const features = new GeoJSON().readFeatures(shapeFiles)
 
             const tileGrid = createXYZ()
             const outputTileRange = tileGrid.getTileRangeForExtentAndZ(currentExtent, zoom)
 
-            const result = editorNode.meta.output = outputs['out'] =new NumericTileGrid(
+            const result = editorNode.meta.output = outputs['out'] = new NumericTileGrid(
                 zoom,
                 outputTileRange.minX,
                 outputTileRange.minY,
@@ -126,39 +126,39 @@ export class CensusComponent extends BaseComponent {
 
             for (let feature of features) {
 
-                let n = 
-                    +feature.get("output_modified_HIGHEST_QUAL_0") + 
-                    +feature.get("output_modified_HIGHEST_QUAL_1") + 
-                    +feature.get("output_modified_HIGHEST_QUAL_2") + 
-                    +feature.get("output_modified_HIGHEST_QUAL_3") + 
-                    +feature.get("output_modified_HIGHEST_QUAL_4") + 
-                    +feature.get("output_modified_HIGHEST_QUAL_5") + 
+                let n =
+                    +feature.get("output_modified_HIGHEST_QUAL_0") +
+                    +feature.get("output_modified_HIGHEST_QUAL_1") +
+                    +feature.get("output_modified_HIGHEST_QUAL_2") +
+                    +feature.get("output_modified_HIGHEST_QUAL_3") +
+                    +feature.get("output_modified_HIGHEST_QUAL_4") +
+                    +feature.get("output_modified_HIGHEST_QUAL_5") +
                     +feature.get("output_modified_HIGHEST_QUAL_6") +
                     +feature.get("output_modified_HIGHEST_QUAL_-8")
 
                 const geom = feature.getGeometry()
                 if (geom === undefined) { continue }
-            
+
                 const featureTileRange = tileGrid.getTileRangeForExtentAndZ(
-                geom.getExtent(),
-                zoom
+                    geom.getExtent(),
+                    zoom
                 )
                 for (
-                let x = Math.max(featureTileRange.minX, outputTileRange.minX);
-                x <= Math.min(featureTileRange.maxX, outputTileRange.maxX);
-                ++x
+                    let x = Math.max(featureTileRange.minX, outputTileRange.minX);
+                    x <= Math.min(featureTileRange.maxX, outputTileRange.maxX);
+                    ++x
                 ) {
-                for (
-                    let y = Math.max(featureTileRange.minY, outputTileRange.minY);
-                    y <= Math.min(featureTileRange.maxY, outputTileRange.maxY);
-                    ++y
-                ) {
-                    const center = tileGrid.getTileCoordCenter([zoom, x, y])
-                    if (geom.intersectsCoordinate(center)) {
-                    result.set(x, y, feature.get(censusOptions[index].code) / n * 100)
+                    for (
+                        let y = Math.max(featureTileRange.minY, outputTileRange.minY);
+                        y <= Math.min(featureTileRange.maxY, outputTileRange.maxY);
+                        ++y
+                    ) {
+                        const center = tileGrid.getTileCoordCenter([zoom, x, y])
+                        if (geom.intersectsCoordinate(center)) {
+                            result.set(x, y, feature.get(censusOptions[index].code) / n * 100)
+                        }
                     }
                 }
-                }
             }
 
             this.cachedData = result

app/javascript/projects/modelling/components/digital_model_component.ts

@@ -6,7 +6,7 @@ import { PreviewControl } from "../controls/preview"
 import { NumericTileGrid } from "../tile_grid"
 import { numericDataSocket } from "../socket_types"
 import { createXYZ } from "ol/tilegrid"
-import { currentExtent as extent } from "../bounding_box"
+import { currentExtent as extent, zoomLevel } from "../bounding_box"
 import { TypedArray } from "d3"
 import { retrieveModelData } from "../model_retrieval"
 
@@ -85,7 +85,7 @@ export class DigitalModelComponent extends BaseComponent {
             if (this.outputCache.has(digitalModel.source)) {
                 const out = editorNode.meta.output = outputs['dm'] = this.outputCache.get(digitalModel.source)
             } else {
-                const zoom = 20
+                const zoom = zoomLevel
 
                 const tileGrid = createXYZ()
                 const outputTileRange = tileGrid.getTileRangeForExtentAndZ(extent, zoom)

app/javascript/projects/modelling/components/nevo_layer_component.ts

@@ -11,7 +11,7 @@ import { SelectControl } from "../controls/select"
 import { Geometry } from "ol/geom"
 import { Feature } from "ol"
 
-import { currentBbox as bbox, currentExtent as extent } from "../bounding_box"
+import { currentBbox as bbox, currentExtent as extent, zoomLevel } from "../bounding_box"
 
 
 interface LayerProperty {
@@ -21,7 +21,7 @@ interface LayerProperty {
 }
 
 const geoServer = "https://geo.leep.exeter.ac.uk/geoserver/nevo/wfs?"
-const zoom = 20
+const zoom = zoomLevel
 
 
 async function retrieveLandCoverData(bbox: string): Promise<Object> {

app/javascript/projects/modelling/components/os_greenspaces_component.ts

@@ -2,7 +2,7 @@ import { Node, Output } from "rete"
 import { NodeData, WorkerInputs, WorkerOutputs } from "rete/types/core/data"
 import { BaseComponent } from "./base_component"
 import { booleanDataSocket } from "../socket_types"
-import { currentBbox, currentExtent } from "../bounding_box"
+import { currentBbox, currentExtent, zoomLevel } from "../bounding_box"
 import GeoJSON from "ol/format/GeoJSON"
 import { createXYZ } from "ol/tilegrid"
 import { BooleanTileGrid } from "../tile_grid"
@@ -59,7 +59,7 @@ export class OSGreenSpacesComponent extends BaseComponent {
     }
 
     async worker(node: NodeData, inputs: WorkerInputs, outputs: WorkerOutputs, ...args: unknown[]) {
-        const zoom = 20
+        const zoom = 23
 
         const editorNode = this.editor?.nodes.find(n => n.id === node.id)
         if (editorNode === undefined) { return }

app/javascript/projects/modelling/components/osm_land_use_component.ts

@@ -10,7 +10,7 @@ import { createXYZ } from "ol/tilegrid"
 import * as proj4 from "proj4"
 import { Polygon } from "ol/geom"
 
-import { currentExtent as extent } from "../bounding_box"
+import { currentExtent as extent, zoomLevel } from "../bounding_box"
 
 
 
@@ -288,7 +288,7 @@ export class OSMLandUseComponent extends BaseComponent {
 
     async worker(node: NodeData, inputs: WorkerInputs, outputs: WorkerOutputs, ...args: unknown[]) {
 
-        const zoom = 20
+        const zoom = zoomLevel
 
         const editorNode = this.editor?.nodes.find(n => n.id === node.id)
         if (editorNode === undefined) { return }

app/javascript/projects/modelling/components/ukceh_land_cover_component.ts

@@ -5,11 +5,11 @@ import { NodeData, WorkerInputs, WorkerOutputs } from "rete/types/core/data"
 import { booleanDataSocket, categoricalDataSocket } from "../socket_types"
 import { BooleanTileGrid, CategoricalTileGrid } from "../tile_grid"
 import { BaseComponent } from "./base_component"
-import { currentBbox as bbox, currentExtent as extent } from "../bounding_box"
+import { currentBbox as bbox, currentExtent as extent, zoomLevel } from "../bounding_box"
 import { retrieveModelData } from "../model_retrieval"
 import { TypedArray } from "d3"
 
-const zoom = 20
+const zoom = zoomLevel
 
 interface Habitat {
   agg: number

app/javascript/projects/modelling/tile_grid.ts

@@ -263,11 +263,12 @@ export class CategoricalTileGrid extends TileGrid {
   }
 
   applyCategoryFromBooleanGrid(boolGrid: BooleanTileGrid, key: number) {
-    const { x, y, width, height } = this
+    const { x, y, width, height, zoom } = this
 
     for (let i = x; i < x + width; i++) {
       for (let j = y; j < y + height; j++) {
-        if (boolGrid.get(i, j)) {
+
+        if (boolGrid.get(i, j, zoom) && this.get(i, j) === 255) {
           this.set(i, j, key)
         }
       }