-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add an IMD layer #309
Add an IMD layer #309
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
<script lang="ts"> | ||
import type { MapGeoJSONFeature } from "maplibre-gl"; | ||
import { | ||
hoveredToggle, | ||
makeColorRamp, | ||
overwriteLineLayer, | ||
overwritePmtilesSource, | ||
overwritePolygonLayer, | ||
} from "../../maplibre_helpers"; | ||
import { map } from "../../stores"; | ||
import { ExternalLink, HelpButton, InteractiveLayer } from "../common"; | ||
import { Checkbox } from "../govuk"; | ||
import { colors } from "./colors"; | ||
import SequentialLegend from "./SequentialLegend.svelte"; | ||
|
||
let name = "imd"; | ||
let outlineLayer = `${name}-outline`; | ||
|
||
let colorScale = colors.sequential_low_to_high; | ||
// The deciles are [1, 10]. The 5 colors cover two each. | ||
let limits = [0, 2, 4, 6, 8, 10]; | ||
|
||
overwritePmtilesSource( | ||
$map, | ||
name, | ||
`https://atip.uk/layers/v1/${name}.pmtiles` | ||
); | ||
|
||
overwritePolygonLayer($map, { | ||
id: name, | ||
source: name, | ||
sourceLayer: name, | ||
// Decile 1 is the most deprived, but we want to invert for the color scale | ||
color: makeColorRamp(["-", 10, ["get", "decile"]], limits, colorScale), | ||
opacity: hoveredToggle(0.5, 0.7), | ||
}); | ||
overwriteLineLayer($map, { | ||
id: outlineLayer, | ||
source: name, | ||
sourceLayer: name, | ||
color: "black", | ||
width: 0.5, | ||
}); | ||
|
||
let show = false; | ||
// InteractiveLayer manages the polygon layer, but we also need to control the outline | ||
$: { | ||
if ($map.getLayer(outlineLayer)) { | ||
$map.setLayoutProperty( | ||
outlineLayer, | ||
"visibility", | ||
show ? "visible" : "none" | ||
); | ||
} | ||
} | ||
|
||
function tooltip(feature: MapGeoJSONFeature): string { | ||
return ( | ||
`<p>${feature.properties.LSOA11CD} has an IMD score of <b>${feature.properties.score}</b></p>` + | ||
`<p>Rank: <b>${feature.properties.rank.toLocaleString()}</b> / 32,844 LSOAs</p>` | ||
); | ||
} | ||
</script> | ||
|
||
<Checkbox id={name} bind:checked={show}> | ||
Indices of Multiple Deprivation | ||
<span slot="right"> | ||
<HelpButton> | ||
<p> | ||
The 2019 English IMD scores come from <ExternalLink | ||
href="https://data-communities.opendata.arcgis.com/datasets/communities::indices-of-multiple-deprivation-imd-2019-1/explore" | ||
> | ||
DLUCH GIS | ||
</ExternalLink>. Note the LSOAs identified are from the 2011 census. A | ||
detailed breakdown of the score across different categories can be found <ExternalLink | ||
href="http://dclgapps.communities.gov.uk/imd/iod_index.html" | ||
> | ||
here | ||
</ExternalLink>. | ||
</p> | ||
<p> | ||
License: <ExternalLink | ||
href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" | ||
> | ||
Open Government License | ||
</ExternalLink>. Contains OS data © Crown copyright and database | ||
right 2023. | ||
</p> | ||
</HelpButton> | ||
</span> | ||
</Checkbox> | ||
{#if show} | ||
<SequentialLegend {colorScale} limits={["Least deprived", "Most deprived"]} /> | ||
{/if} | ||
|
||
<InteractiveLayer layer={name} {tooltip} {show} clickable={false} /> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,6 +10,7 @@ | |
import { processInput, type Scheme } from "../lib/browse/data"; | ||
import Filters from "../lib/browse/Filters.svelte"; | ||
import HospitalsLayerControl from "../lib/browse/HospitalsLayerControl.svelte"; | ||
import ImdLayerControl from "../lib/browse/ImdLayerControl.svelte"; | ||
import LocalAuthorityDistrictsLayerControl from "../lib/browse/LocalAuthorityDistrictsLayerControl.svelte"; | ||
import LocalPlanningAuthoritiesLayerControl from "../lib/browse/LocalPlanningAuthoritiesLayerControl.svelte"; | ||
import MrnLayerControl from "../lib/browse/MrnLayerControl.svelte"; | ||
|
@@ -179,6 +180,7 @@ | |
</CollapsibleCard> | ||
<CollapsibleCard label="Census"> | ||
<CensusOutputAreaLayerControl /> | ||
<ImdLayerControl /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's possible to one of three OA-level census layers alongside the IMD layer. This is awkward, but I don't know how to solve it (UX-wise) yet. I think we only ever want one boundary/census/"covers everything" layer on at a time, and not sure how to communicate that as radio buttons across categories There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I agree. I don't know how to communicate it, and it's worth checking with users first, but making these and boundaries all mutually exclusive sounds like a good future task |
||
</CollapsibleCard> | ||
<BaselayerSwitcher {style} /> | ||
</CollapsibleCard> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Couldn't find any useful reference to open for clicking; http://dclgapps.communities.gov.uk/imd/iod_index.html doesn't have URL controls
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if it might be valuable to still send the user through to that page, even if we can't send them to the specific LSOA info?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's listed in the help popup. Feels unintuitive to make a click on a specific LSOA in the map have the same effect everywhere