Add contextual layers for SIMD and population density. #141
Conversation
|
|
||
| let densityColorScale = simdColorScale.toReversed(); | ||
| // Use the same (slightly rounded) buckets as https://www.ons.gov.uk/census/maps/choropleth/population/population-density/population-density/persons-per-square-kilometre. TODO Adapt for Scotland. | ||
| let densityLimits = [0, 4700, 13000, 33000, 94000, 1980000]; |
There was a problem hiding this comment.
I lifted these from England, but since Scotland has lower density, we could maybe adjust
| @@ -65,6 +65,21 @@ function bus_routes { | |||
| tippecanoe tmp/bus_routes_v2.geojson -zg -l bus_routes -o $OUT/bus_routes.pmtiles | |||
| } | |||
|
|
|||
| function population { | |||
There was a problem hiding this comment.
| </HelpButton> | ||
| {/if} | ||
|
|
||
| <VectorTileSource |
There was a problem hiding this comment.
This is not novel to this PR, but I just realized I didn't have a good mental model for how our maplibre-svelte integration works.
The current component context for this is within the Control component defined in ContextualLayers.svelte, which is where the buttons and text like "Darker colours are denser" are rendered.
However, the layer declarations below are just "floating" here, and somehow communicate to the outer map component.
This is all fine and reasonable, I'm just restating my new understanding of how this works since I guess I hadn't paid enough attention before.
There was a problem hiding this comment.
It takes getting used to for sure.
Line 163 in 8f49d4f
Because ContextualLayers is a child component of the MapLibre component, it all works out. svelte-maplibe sets context (the Svelte scoped state that's available to children, no matter how deep, without prop drilling) that lets sources/layers find the MapLibre map object.
It is kind of weird to mix DOM nodes and maplibre drawing directives. It's a nice way to write the code, because you can have one component control both the map and panel/legend, without plumbing state back and forth or doing something intense with event handlers. In this case, it works out easily, because there's a svelte-maplibre Control component for the floating map panels with bits of regular DOM.
In other cases, to get one svelte component to do something both on the sidebar and map, we use the SplitComponent trick. I can describe how it works if the code isn't clear. This is maybe also called "remote DOM" in other frameworks.
#106
You'll need to grab https://assets.od2net.org/cnt_layers/population.pmtiles. I mistakenly uploaded an early draft of it during the first layers PR, but it's changed now.