-
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 a layer for existing cycle paths. #299 #313
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,148 @@ | ||
<script lang="ts"> | ||
import type { MapGeoJSONFeature } from "maplibre-gl"; | ||
import { | ||
constructMatchExpression, | ||
hoveredToggle, | ||
overwriteLineLayer, | ||
overwritePmtilesSource, | ||
} from "../../../maplibre_helpers"; | ||
import { map } from "../../../stores"; | ||
import { | ||
ColorLegend, | ||
ExternalLink, | ||
HelpButton, | ||
InteractiveLayer, | ||
} from "../../common"; | ||
import { Checkbox } from "../../govuk"; | ||
import { colors } from "../colors"; | ||
|
||
let name = "cycle_paths"; | ||
|
||
let legend = [ | ||
["Separated tracks", colors.cycle_paths.track], | ||
["Unprotected lanes", colors.cycle_paths.lane], | ||
["Shared-use (segregated)", colors.cycle_paths.shared_use_segregated], | ||
["Shared-use (unsegregated)", colors.cycle_paths.shared_use_unsegregated], | ||
]; | ||
|
||
overwritePmtilesSource( | ||
$map, | ||
name, | ||
`https://atip.uk/layers/v1/${name}.pmtiles` | ||
); | ||
|
||
overwriteLineLayer($map, { | ||
id: name, | ||
source: name, | ||
sourceLayer: name, | ||
color: constructMatchExpression( | ||
["get", "kind"], | ||
{ | ||
track: colors.cycle_paths.track, | ||
lane: colors.cycle_paths.lane, | ||
shared_use_segregated: colors.cycle_paths.shared_use_segregated, | ||
shared_use_unsegregated: colors.cycle_paths.shared_use_unsegregated, | ||
}, | ||
"red" | ||
), | ||
width: [ | ||
"interpolate", | ||
["exponential", 1.6], | ||
["zoom"], | ||
3, | ||
1.0, | ||
7, | ||
2.0, | ||
18, | ||
20.0, | ||
], | ||
opacity: hoveredToggle(0.5, 1.0), | ||
}); | ||
|
||
let show = false; | ||
|
||
function tooltip(feature: MapGeoJSONFeature): string { | ||
// @ts-ignore Write types for the feature properties | ||
let kind = { | ||
track: "Separated track", | ||
lane: "Unprotected lane", | ||
shared_use_segregated: "Shared-use (segregated)", | ||
shared_use_unsegregated: "Shared-use (unsegregated)", | ||
}[feature.properties.kind]; | ||
// @ts-ignore Write types for the feature properties | ||
let direction = { | ||
"one-way": "↑", | ||
"two-way": "↕", | ||
unknown: "", | ||
}[feature.properties.direction]; | ||
let width = | ||
feature.properties.width == "unknown" | ||
? "unknown" | ||
: `${feature.properties.width} meters`; | ||
|
||
let x = `<h2>${kind}</h2>`; | ||
x += `<p>Direction: <b>${direction} ${feature.properties.direction}</b></p>`; | ||
x += `<p>Width: <b>${width}</b></p>`; | ||
return x; | ||
} | ||
|
||
function onClick(e: CustomEvent<MapGeoJSONFeature>) { | ||
window.open( | ||
`http://openstreetmap.org/way/${e.detail.properties.osm_id}`, | ||
"_blank" | ||
); | ||
} | ||
</script> | ||
|
||
<Checkbox id={name} bind:checked={show}> | ||
Cycle paths | ||
<span slot="right"> | ||
<HelpButton> | ||
<p> | ||
This shows different types of cycle path, according to OpenStreetMap (as | ||
of 15 August 2023). | ||
</p> | ||
<ul> | ||
<li> | ||
<b>Separated tracks</b> | ||
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. Likely someone outside our team needs to review the wording choices here |
||
include fully or partly segregated cycletracks alongside a carriageway, | ||
stepped cycletracks, and tracks off the carriageway entirely. They're also | ||
separated from foot traffic. | ||
</li> | ||
<li> | ||
<b>Unprotected lanes</b> | ||
are mandatory or advisory lanes on the carriageway, without any physical | ||
protection. They do not included shared bus lanes. | ||
</li> | ||
<li> | ||
<b>Shared-use</b> | ||
paths are split between cycle and foot traffic, and are separated from | ||
motor traffic somehow. There can be segregation between cyclists and pedestrians | ||
or not. | ||
</li> | ||
</ul> | ||
<p> | ||
Note there are many known limitations with this layer. Data in | ||
OpenStreetMap can be missing, mapped twice, or mapped incorrectly. Our | ||
processing is also imperfect. You can click a segment to see full | ||
OpenStreetMap data. Please do report issues with the classification or | ||
data. | ||
</p> | ||
<p> | ||
License: <ExternalLink href="https://www.openstreetmap.org/copyright"> | ||
Open Data Commons Open Database License | ||
</ExternalLink> | ||
</p> | ||
</HelpButton> | ||
</span> | ||
</Checkbox> | ||
{#if show} | ||
{#each legend as [label, color]} | ||
<div> | ||
<ColorLegend {color} /> | ||
{label} | ||
</div> | ||
{/each} | ||
{/if} | ||
|
||
<InteractiveLayer layer={name} {tooltip} {show} clickable on:click={onClick} /> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -319,6 +319,7 @@ const layerZorder = [ | |
"bus_routes", | ||
"railway_stations", | ||
"cycle_parking", | ||
"cycle_paths", | ||
|
||
// Polygons are bigger than lines, which're bigger than points. When geometry | ||
// overlaps, put the smaller thing on top | ||
|
@@ -355,9 +356,10 @@ const layerZorder = [ | |
"route-lines", | ||
"route-polygons", | ||
|
||
// Draw most things beneath text road labels. This is the only layer in this | ||
// list generated by the MapTiler basemap we use. | ||
// Draw most things beneath text road labels. These IDs come from the | ||
// MapTiler basemap, and there are different ones for each basemap. | ||
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 noticed when we switched to the new dataviz style, labels got incorrectly buried. Fixing that here |
||
"road_label", | ||
"Road labels", | ||
|
||
// Draw the inverted boundary fade on top of basemap labels | ||
"boundary", | ||
|
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.
Adapted from https://github.com/bdon/HighRoadPlus/blob/main/highroadplus.js. Keeping lines the same thickness at all zoom levels doesn't make sense, because it's hard to click things when zoomed in, and at low zoom, things overlap badly. I fiddled with this only a little bit to make it look OK, happy for suggestions.
More generally, hovering/tooltips/clicking at low zoom levels for many of our layers isn't really appropriate. Need to revisit more generally