Skip to content

Commit

Permalink
Map view - IMD
Browse files Browse the repository at this point in the history
  • Loading branch information
paulthatjazz committed Jun 4, 2024
1 parent ea5bcc9 commit 442d751
Show file tree
Hide file tree
Showing 7 changed files with 322 additions and 49 deletions.
2 changes: 1 addition & 1 deletion app/javascript/projects/analysis_panel_tools/subsection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export interface ChartData {
inputHistogramBins: number
}

function findColor(value: number, colorArray: any[]): Color {
export function findColor(value: number, colorArray: any[]): Color {
var index = Math.floor(value * (colorArray.length / 2))
index = Math.min(index, colorArray.length / 2 - 1)
var alpha = colorArray[index * 2]
Expand Down
21 changes: 21 additions & 0 deletions app/javascript/projects/layer_palette.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { KewOption, Layer } from './state'
import { iconForLayerType } from "./util"
import { CompiledDatasetRecord } from './saved_dataset'
import { designations } from './modelling/designations'
import { IMDProperties } from './reify_layer/imd'

interface AddLayerButtonProps {
prototype: Layer
Expand Down Expand Up @@ -304,6 +305,26 @@ export const LayerPalette = ({ addLayer, hide, dbModels, getTeamDatasets, teamNa
)
}
</Section>
<Section title="Indices of Multiple Deprivation">
{
Array<{ year: number }>(
{ year: 2019 }
).map(({ year }) =>
<AddLayerButton
addLayer={addLayer}
prototype={{
type: "IMDLayer",
name: `Indices of Multiple Deprivation ${year}`,
visible: true,
opacity: 1,
fill: "jet",
property: IMDProperties[0],
year
}}
/>
)
}
</Section>
<Section title="UKCEH Land Cover Maps">
<AddLayerButton
addLayer={addLayer}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { Feature } from "ol"
import { Geometry } from "ol/geom"
import { NumericTileGrid } from "../tile_grid"
import { createXYZ } from "ol/tilegrid"
import { format } from "mathjs"

interface OutputFormat {
name: string
Expand Down
153 changes: 153 additions & 0 deletions app/javascript/projects/reify_layer/imd.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import VectorLayer from "ol/layer/Vector"
import { IMDLayer } from "../state"
import BaseLayer from "ol/layer/Base"
import { memoize } from "lodash"
import VectorSource from "ol/source/Vector"
import { Fill, Stroke, Style, Text } from "ol/style"
import GeoJSON from "ol/format/GeoJSON"
import { bbox } from "ol/loadingstrategy"
import { Map } from "ol"
import { getColorStops } from "./model_output"
import { findColor } from "../analysis_panel_tools/subsection"

interface IMDProperty {
name: string
propName: string
min: number
max: number
}

export const IMDProperties: IMDProperty[] = [
{
name: "IMD - Decile",
propName: "IMD_Decile",
min: 10,
max: 1
},
{
name: "IMD - Rank",
propName: "IMD_Rank",
min: 32844,
max: 1
},
{
name: "Income - Decile",
propName: "IncDec",
min: 10,
max: 1
},
{
name: "Income - Rank",
propName: "IncRank",
min: 32844,
max: 1
},
{
name: "Employment - Decile",
propName: "EmpDec",
min: 10,
max: 1
},
{
name: "Employment - Rank",
propName: "EmpRank",
min: 32844,
max: 1
},
{
name: "Education, Skills and Training - Decile",
propName: "EduDec",
min: 10,
max: 1
},
{
name: "Education, Skills and Training - Rank",
propName: "EduRank",
min: 32844,
max: 1
},
{
name: "Health Deprivation and Disability - Decile",
propName: "HDDec",
min: 10,
max: 1
},
{
name: "Health Deprivation and Disability - Rank",
propName: "HDDRank",
min: 32844,
max: 1
},
{
name: "Crime - Decile",
propName: "CriDec",
min: 10,
max: 1
},
{
name: "Crime - Rank",
propName: "CriRank",
min: 32844,
max: 1
},
{
name: "Barriers to Housing and Services - Decile",
propName: "BHSDec",
min: 10,
max: 1
},
{
name: "Barriers to Housing and Services - Rank",
propName: "BHSRank",
min: 32844,
max: 1
},
{
name: "Living Environment - Decile",
propName: "EnvDec",
min: 10,
max: 1
},
{
name: "Living Environment - Rank",
propName: "EnvRank",
min: 32844,
max: 1
}
]

export type IMDProp = typeof IMDProperties[number]

const imdSource = memoize(() =>
new VectorSource({
url: extent => `https://landscapes.wearepal.ai/geoserver/shapefiles/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shapefiles:IMD_2019&outputFormat=application/json&bbox=${extent.join(',')},EPSG:3857&crs=EPSG:3857`,
format: new GeoJSON(),
strategy: bbox,
attributions: '&copy; <a href="https://data.cdrc.ac.uk/dataset/index-multiple-deprivation-imd">Consumer Data Research Centre</a>'
})
)

const styleFn = memoize((colMap : any[], prop : IMDProperty) =>
(feature) => {

const val = feature.get(prop.propName)
const [min, max] = prop.min > prop.max ? [prop.max, prop.min] : [prop.min, prop.max]
const normalisedValue = prop.min > prop.max ? 1 - (val - min) / (max - min) : (val - min) / (max - min)
const col = findColor(normalisedValue, colMap)

return new Style({
fill: new Fill({ color: `rgba(${col[0]}, ${col[1]}, ${col[2]}, 1)`})
})
}
)

export function reifyIMDLayer(layer: IMDLayer, existingLayer: BaseLayer | null, map: Map) {

const colMap = getColorStops(layer.fill === "heatmap" ? "jet" : (layer.fill === "greyscale" ? "greys" : layer.fill), 100).reverse()

return new VectorLayer({
source: imdSource(),
style: styleFn(colMap, layer.property),
})
}

2 changes: 2 additions & 0 deletions app/javascript/projects/reify_layer/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { reifyBoundaryLayer } from './boundary'
import { reifyGeoserverWMSLayer } from './geoserver'
import { reifyKewLayer } from './kew'
import { reifyOrvalLayer } from './orval'
import { reifyIMDLayer } from './imd'

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
Expand All @@ -35,6 +36,7 @@ export const reifyLayer = (layer: Layer, existingLayer: BaseLayer | null, dbMode
case "MLLayer": return reifyGeoserverWMSLayer(layer, existingLayer)
case "KewLayer": return reifyKewLayer(layer, existingLayer, map)
case "ORValLayer": return reifyOrvalLayer(layer, existingLayer, map)
case "IMDLayer": return reifyIMDLayer(layer, existingLayer, map)
default: {
// Ensure this switch statement is exhaustive
const unreachable: never = layerType
Expand Down
Loading

0 comments on commit 442d751

Please sign in to comment.