- Data from
- ONS Geography
- , as of December 2022.
-
-
-
+
+
+
+
+ Data from
+ ONS Geography
+ , as of December 2022.
+
+
-
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, publicResourceBaseUrl } from "lib/common";
import { layerId, makeColorRamp } from "lib/maplibre";
import {
FillLayer,
@@ -19,6 +14,7 @@
import { showHideLayer } from "../url";
let name = "imd";
+ let title = "Indices of Multiple Deprivation";
let colorScale = colors.sequential_low_to_high;
// The deciles are [1, 10]. The 5 colors cover two each.
@@ -27,29 +23,29 @@
let show = showHideLayer(name);
-
- Indices of Multiple Deprivation
-
-
-
- The 2019 English IMD scores come from
- DLUCH GIS
- . Note the LSOAs identified are from the 2011 census. A
- detailed breakdown of the score across different categories can be found
- here
- .
-
-
-
+
+
+
+ The 2019 English IMD scores come from
+ DLUCH GIS
+ . Note the LSOAs identified are from the 2011 census. A
+ detailed breakdown of the score across different categories can be found
+ here
+ .
+
+
+
+
+
-
-{#if $show}
-
-{/if}
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
FillLayer,
@@ -20,6 +19,7 @@
import { showHideLayer } from "../url";
let name = "local_authority_districts";
+ let title = "Local Authority Districts";
let color = colors.local_authority_districts;
let show = showHideLayer(name);
@@ -34,22 +34,19 @@
}
-
-
- Local Authority Districts
-
-
-
- Data from
- ONS Geography
- , as of January 2024.
-
-
-
+
+
+
+
+ Data from
+ ONS Geography
+ , as of January 2024.
+
+
-
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
FillLayer,
@@ -19,6 +18,7 @@
import { showHideLayer } from "../url";
let name = "local_planning_authorities";
+ let title = "Local Planning Authorities";
let color = colors.local_planning_authorities;
let show = showHideLayer(name);
@@ -27,47 +27,44 @@
// -- but can't we fix that now?
-
-
- Local Planning Authorities
-
-
-
- LPAs may be a
+
+
+
+ LPAs may be a
+ local authority
+ ,
+ national park authorit
+ y, or
+ development corporation
+ .
+
+
+
+ Note there are overlapping LPAs near Northhamptonshire. Only one
+ authority name is shown when hovering. Use
- local authority
- ,
- national park authorit
- y, or
- development corporation
- .
-
-
-
- Note there are overlapping LPAs near Northhamptonshire. Only one
- authority name is shown when hovering. Use
- this map
- to get more details.
-
-
-
- Data from ONS Geography via
- planning.data.gov.uk
- , as of November 2022.
-
-
-
+ this map
+ to get more details.
+
+
+
+ Data from ONS Geography via
+ planning.data.gov.uk
+ , as of November 2022.
+
+
-
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
FillLayer,
@@ -20,6 +19,7 @@
import { showHideLayer } from "../url";
let name = "parliamentary_constituencies";
+ let title = "Parliamentary constituencies";
let color = colors.parliamentary_constituencies;
let show = showHideLayer(name);
@@ -39,22 +39,19 @@
}
-
-
- Parliamentary constituencies
-
-
-
- Data from
- Ordnance Survey Boundary-Line
- , as of May 2023.
-
-
-
+
+
+
+
+ Data from
+ Ordnance Survey Boundary-Line
+ , as of May 2023.
+
+
-
+
- import { ExternalLink, HelpButton } from "lib/common";
- import { Checkbox, Select } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink } from "lib/common";
+ import { Select } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import { RasterLayer, RasterTileSource } from "svelte-maplibre";
import OsOglLicense from "../OsOglLicense.svelte";
import { customUrlState } from "../url";
+ let name = "pollution";
+ let title = "Pollution";
+
type State = {
show: boolean;
pollutant: string;
@@ -27,7 +31,7 @@
opacity: parseInt(opacity),
};
}
- let state = customUrlState("pollution", defaultState, stringify, parse);
+ let state = customUrlState(name, defaultState, stringify, parse);
// URLs and layers found from https://uk-air.defra.gov.uk/data/wms-services
// and QGIS
@@ -48,7 +52,7 @@
return `https://ukair.maps.rcdo.co.uk/ukairserver/services/aq_amb_2022/${$state.pollutant}/MapServer/WMSServer`;
}
- function title(pollutant: string): string {
+ function label(pollutant: string): string {
return info![1];
}
@@ -78,57 +82,53 @@
}
-
- Pollution
-
-
-
- Most layers show air quality data from
- DEFRA
- . The measurements are annual means, in units of
- µgm
- 3
- . Note the particulate matter layers are not corrected for natural sources.
-
-
-
+
+
+
+ Most layers show air quality data from
+ DEFRA
+ . The measurements are annual means, in units of µgm
+ 3
+ . Note the particulate matter layers are not corrected for natural sources.
+
+
-
-{#if $state.show}
-
-
{title($state.pollutant)}
+
+
+
{label($state.pollutant)}
-
-
-
+
+
+
-
-{/if}
+
+
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, publicResourceBaseUrl } from "lib/common";
import { layerId, constructMatchExpression } from "lib/maplibre";
import {
FillLayer,
@@ -18,6 +13,7 @@
import { showHideLayer } from "../url";
let name = "road_noise";
+ let title = "Road noise";
// 5 buckets from the input are grouped into 3
function describe(noiseclass: string): string {
@@ -39,29 +35,26 @@
let show = showHideLayer(name);
-
- Road noise
-
-
-
- This is the LAeq,16h dataset showing annual average noise levels in
- units of decibels for the 16-hour period between 7am and 11pm. Only
- roads in areas with at least 100,000 people are included.
-
-
- Data from June 2019, produced by
- DEFRA
- . See there for methodology details
-
-
-
+
+
+
+ This is the LAeq,16h dataset showing annual average noise levels in units
+ of decibels for the 16-hour period between 7am and 11pm. Only roads in
+ areas with at least 100,000 people are included.
+
+
+ Data from June 2019, produced by
+ DEFRA
+ . See there for methodology details
+
+
+
+
+ "]} />
-
-{#if $show}
- "]} />
-{/if}
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
FillLayer,
@@ -20,6 +19,7 @@
import { showHideLayer } from "../url";
let name = "wards";
+ let title = "Wards";
let color = colors.wards;
let show = showHideLayer(name);
@@ -31,22 +31,19 @@
}
-
-
- Wards
-
-
-
- Data from
- ONS Geography
- , as of May 2023.
-
-
-
+
+
+
+
+ Data from
+ ONS Geography
+ , as of May 2023.
+
+
-
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
hoverStateFilter,
@@ -18,31 +17,29 @@
import { showHideLayer } from "../url";
let name = "bus_routes";
+ let title = "Bus routes";
let show = showHideLayer(name);
-
-
- Bus routes
-
-
-
- This shows all roads with at least one bus route crossing them. It also
- shows whether the road has a bus lane or not.
-
-
- Note this data is from OpenStreetMap (as of 9 August 2023), not
- GTFS
- , and doesn't include which routes are run or the
- frequency of service.
-
-
-
+
+
+
+
+ This shows all roads with at least one bus route crossing them. It also
+ shows whether the road has a bus lane or not.
+
+
+ Note this data is from OpenStreetMap (as of 9 August 2023), not
+ GTFS
+ , and doesn't include which routes are run or the frequency
+ of service.
+
+
-
+
- import {
- ColorLegend,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
+ import LayerControl from "../LayerControl.svelte";
+ import { ColorLegend, Popup, publicResourceBaseUrl } from "lib/common";
import { Checkbox, CheckboxGroup } from "govuk-svelte";
import { constructMatchExpression, layerId } from "lib/maplibre";
import type { ExpressionSpecification } from "maplibre-gl";
@@ -19,6 +15,7 @@
import { customUrlState } from "../url";
let name = "cycle_paths";
+ let title = "Cycle paths";
type State = {
show: boolean;
@@ -101,47 +98,43 @@
}
-
- Cycle paths
-
-
-
- This shows different types of cycle path, according to OpenStreetMap (as
- of 15 August 2023).
-
-
-
- Separated tracks
- include fully or partly segregated cycletracks alongside a carriageway,
- stepped cycletracks, and tracks off the carriageway entirely. They're also
- separated from foot traffic.
-
-
- Unprotected lanes
- are mandatory or advisory lanes on the carriageway, without any physical
- protection. They do not included shared bus lanes.
-
-
- Shared-use
- 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.
-
-
-
- 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.
-
-
-
+
+
+
+ This shows different types of cycle path, according to OpenStreetMap (as
+ of 15 August 2023).
+
+
+
+ Separated tracks
+ include fully or partly segregated cycletracks alongside a carriageway, stepped
+ cycletracks, and tracks off the carriageway entirely. They're also separated
+ from foot traffic.
+
+
+ Unprotected lanes
+ are mandatory or advisory lanes on the carriageway, without any physical
+ protection. They do not included shared bus lanes.
+
+
+ Shared-use
+ 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.
+
+
+
+ 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.
+
-{/if}
+
+ import LayerControl from "../LayerControl.svelte";
import OsmLicense from "../OsmLicense.svelte";
import OsOglLicense from "../OsOglLicense.svelte";
- import {
- ExternalLink,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import { ExternalLink, Popup, publicResourceBaseUrl } from "lib/common";
import { layerId, makeColorRamp } from "lib/maplibre";
import {
hoverStateFilter,
@@ -20,40 +15,38 @@
import { showHideLayer } from "../url";
let name = "gradient";
+ let title = "Gradients";
let colorScale = colors.gradient_flat_to_steep;
let limits = [0, 3, 5, 8, 10, 20, 100];
let show = showHideLayer(name);
-
- Gradients
-
-
-
- This layer shows the steepness of roads, with the arrows pointing
- uphill. You have to zoom in to see all roads.
-
-
- Note the gradient may be incorrect near bridges and tunnels, depending
- on the underlying Digital Elevation Model used.
-
-
- This layer is built from
- OS Terrain 50
- and roads from OpenStreetMap. The data is valid as of 18
- February 2024.
-
-
-
-
+
+
+
+ This layer shows the steepness of roads, with the arrows pointing uphill.
+ You have to zoom in to see all roads.
+
+
+ Note the gradient may be incorrect near bridges and tunnels, depending on
+ the underlying Digital Elevation Model used.
+
+
+ This layer is built from
+ OS Terrain 50
+ and roads from OpenStreetMap. The data is valid as of 18 February
+ 2024.
+
+
+
+
+
+
-
-{#if $show}
-
-{/if}
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
hoverStateFilter,
@@ -18,27 +17,25 @@
import { showHideLayer } from "../url";
let name = "mrn";
+ let title = "Major Road Network";
let color = colors.mrn;
let show = showHideLayer(name);
-
-
- Major Road Network
-
-
-
- Data from the
- Major Road Network
- , as of September 2021.
-
-
-
+
+
+
+
+ Data from the
+ Major Road Network
+ , as of September 2021.
+
+
-
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
hoverStateFilter,
@@ -18,27 +17,25 @@
import { showHideLayer } from "../url";
let name = "national_cycle_network";
+ let title = "National Cycle Network";
let color = colors.national_cycle_network;
let show = showHideLayer(name);
-
-
- National Cycle Network
-
-
-
- Data from Sustrans about the
- National Cycle Network
- , downloaded on 22/01/2024.
-
-
-
+
+
+
+
+ Data from Sustrans about the
+ National Cycle Network
+ , downloaded on 22/01/2024.
+
+
-
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
- import { Checkbox, Radio, Select } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, publicResourceBaseUrl } from "lib/common";
+ import { Radio, Select } from "govuk-svelte";
import { layerId, makeColorRamp } from "lib/maplibre";
import {
hoverStateFilter,
@@ -16,9 +12,11 @@
import SequentialLegend from "../SequentialLegend.svelte";
import { customUrlState } from "../url";
+ let name = "pct";
// TODO It'd be much simpler to have one source with both attributes
let nameCommute = "pct_commute";
let nameSchool = "pct_school";
+ let title = "Propensity to Cycle Tool";
let colorScale = colors.sequential_low_to_high;
let limits = [0, 50, 100, 500, 1000, 2000];
@@ -43,7 +41,7 @@
scenario,
};
}
- let state = customUrlState("pct", defaultState, stringify, parse);
+ let state = customUrlState(name, defaultState, stringify, parse);
// TODO Don't use a function and @html; do everything in Svelte?
function tooltip(props: { [name: string]: any }): string {
@@ -68,53 +66,51 @@
}
-
- Propensity to Cycle Tool
-
-
-
- The PCT shows major links on the transport network on which there is
- high latent demand for cycling under scenarios of change, based on the
- "fastest" routes from CycleStreets. Counts approximate daily rush hour
- traffic levels.
-
-
- Note this layer uses 2011 census data and outdated OpenStreetMap data.
- Please use this layer with caution.
-
-
- See
- the PCT website
- and
- 2017 journal article
- for details on methodology and data sources.
-
-
+
+
+
+ The PCT shows major links on the transport network on which there is high
+ latent demand for cycling under scenarios of change, based on the
+ "fastest" routes from CycleStreets. Counts approximate daily rush hour
+ traffic levels.
+
+
+ Note this layer uses 2011 census data and outdated OpenStreetMap data.
+ Please use this layer with caution.
+
+
+ See
+ the PCT website
+ and
+ 2017 journal article
+ for details on methodology and data sources.
+
-
-{#if $state.show}
-
-
-
-{/if}
+
+
+
+
+
+
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- privateResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, privateResourceBaseUrl } from "lib/common";
import { layerId, makeColorRamp } from "lib/maplibre";
import {
hoverStateFilter,
@@ -17,6 +12,7 @@
import { showHideLayer } from "../url";
let name = "pavement_widths";
+ let title = "OS Pavement widths";
let colorScale = colors.sequential_low_to_high;
let limits = [0, 2, 4, 6, 8, 13];
@@ -36,39 +32,36 @@
}
-
- OS Pavement widths
-
-
-
- This shows the average and minimum pavement width (in meters) from
- Ordnance Survey. Because the shape of pavement may vary along a road,
- both average and minimum are reported. Measurements may be available for
- the left side of the road, the right, or both. The coloring shows the
- larger of the two average widths, and the line thickness has no meaning.
- Hover over a line to see if there's pavement on one or both sides of the
- road. (You won't be able to distinguish left and right though; use the
- OS Road basemap instead.)
-
-
- Note these measurements are difficult to interpret near dual
- carriageways (shown as parallel lines).
-
+ This shows the average and minimum pavement width (in meters) from
+ Ordnance Survey. Because the shape of pavement may vary along a road, both
+ average and minimum are reported. Measurements may be available for the
+ left side of the road, the right, or both. The coloring shows the larger
+ of the two average widths, and the line thickness has no meaning. Hover
+ over a line to see if there's pavement on one or both sides of the road.
+ (You won't be able to distinguish left and right though; use the OS Road
+ basemap instead.)
+
+
+ Note these measurements are difficult to interpret near dual carriageways
+ (shown as parallel lines).
+
+
+
+
-
-{#if $show}
-
-{/if}
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- privateResourceBaseUrl,
- } from "lib/common";
- import { Checkbox, Radio } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, privateResourceBaseUrl } from "lib/common";
+ import { Radio } from "govuk-svelte";
import { layerId, makeColorRamp } from "lib/maplibre";
import {
hoverStateFilter,
@@ -17,6 +13,7 @@
import { customUrlState } from "../url";
let name = "road_speeds";
+ let title = "OS Speeds";
let colorScale = colors.sequential_low_to_high;
let limits = [0, 20, 30, 40, 50, 90];
@@ -57,43 +54,41 @@
};
-
- OS Speeds
-
-
-
- The average speed data is collected over a six-month period by
- Basemap
- from 135,000 vehicle telematic systems and provided through
- Ordnance Survey. The averages are grouped by different time periods for weekdays
- and weekends. This map shows the highest average.
-
+ The average speed data is collected over a six-month period by
+ Basemap
+ from 135,000 vehicle telematic systems and provided through
+ Ordnance Survey. The averages are grouped by different time periods for weekdays
+ and weekends. This map shows the highest average.
+
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- privateResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, privateResourceBaseUrl } from "lib/common";
import { layerId, makeColorRamp } from "lib/maplibre";
import {
hoverStateFilter,
@@ -17,37 +12,35 @@
import { showHideLayer } from "../url";
let name = "road_widths";
+ let title = "OS Road widths";
let colorScale = colors.sequential_low_to_high;
let limits = [0, 5, 10, 15, 20, 100];
let show = showHideLayer(name);
-
- OS Road widths
-
-
-
- This is average and minimum road carriageway width (in meters) from
- Ordnance Survey. The coloring shows the average width, and the line
- thickness has no meaning. Be careful interpreting the data near dual
- carriageways and crossing islands.
-
+ This is average and minimum road carriageway width (in meters) from
+ Ordnance Survey. The coloring shows the average width, and the line
+ thickness has no meaning. Be careful interpreting the data near dual
+ carriageways and crossing islands.
+
+
+
+
-
-{#if $show}
-
-{/if}
+
+ import LayerControl from "../LayerControl.svelte";
import {
ColorLegend,
ExternalLink,
- HelpButton,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { layerId } from "lib/maplibre";
import {
hoverStateFilter,
@@ -18,28 +17,26 @@
import { showHideLayer } from "../url";
let name = "srn";
+ let title = "Strategic Road Network";
let color = colors.srn;
let show = showHideLayer(name);
-
-
- Strategic Road Network
-
-
-
- Data from
- OS Open Roads
- , as of December 2023. The SRN is equivalent to trunk
- roads.
-
-
-
+
+
+
+
+ Data from
+ OS Open Roads
+ , as of December 2023. The SRN is equivalent to trunk
+ roads.
+
+
-
+
- import { ColorLegend, HelpButton, publicResourceBaseUrl } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ColorLegend, publicResourceBaseUrl } from "lib/common";
import { layerId } from "lib/maplibre";
import {
hoverStateFilter,
@@ -13,6 +13,7 @@
import { showHideLayer } from "../url";
let name = "trams";
+ let title = "Trams";
let show = showHideLayer(name);
@@ -24,20 +25,17 @@
}
-
-
- Trams
-
-
-
- This shows all trams and light rail lines, according to OpenStreetMap
- (as of 7 February 2024). When these are close to a scheme, interactions
- between the modes must be designed carefully.
-
-
-
+
+
+
+
+ This shows all trams and light rail lines, according to OpenStreetMap (as
+ of 7 February 2024). When these are close to a scheme, interactions
+ between the modes must be designed carefully.
+
+
-
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, publicResourceBaseUrl } from "lib/common";
import { layerId, makeColorRamp } from "lib/maplibre";
import { CircleLayer, VectorTileSource } from "svelte-maplibre";
import { colors } from "../../colors";
@@ -14,6 +9,7 @@
import { showHideLayer } from "../url";
let name = "bus_stops";
+ let title = "Bus stops";
let colorScale = colors.sequential_low_to_high;
let limits = [0, 3, 10, 20, 30, 100];
@@ -21,34 +17,31 @@
let show = showHideLayer(name);
-
- Bus stops
-
-
-
- Data from the
- Bus Open Data Service
- , as of 7 February 2024. To calculate frequency, every
- scheduled arrival time per stop is considered, grouped by day of the
- week. The total daily count is just the number of scheduled arrivals for
- a day. The peak hour frequency is the highest number of buses in any one
- hour window. That window might not lined up perfectly on the hour -- a
- peak hour might occur from 8:25 to 9:25,for example.
-
-
- There are known limitations with this layer, so please use caution when
- using these numbers. Some stops may not be shown at all. Frequency could
- be over- or under-counted, due to exceptions to the regular daily
- schedule of a service.
-
-
-
+
+
+
+ Data from the
+ Bus Open Data Service
+ , as of 7 February 2024. To calculate frequency, every
+ scheduled arrival time per stop is considered, grouped by day of the week.
+ The total daily count is just the number of scheduled arrivals for a day.
+ The peak hour frequency is the highest number of buses in any one hour
+ window. That window might not lined up perfectly on the hour -- a peak
+ hour might occur from 8:25 to 9:25,for example.
+
+
+ There are known limitations with this layer, so please use caution when
+ using these numbers. Some stops may not be shown at all. Frequency could
+ be over- or under-counted, due to exceptions to the regular daily schedule
+ of a service.
+
+
-
-{#if $show}
-
Peak hourly frequency:
-
-{/if}
+
+
Peak hourly frequency:
+
+
+
+ import LayerControl from "../LayerControl.svelte";
import {
ExternalLink,
- HelpButton,
Legend,
Popup,
publicResourceBaseUrl,
} from "lib/common";
- import { Checkbox } from "govuk-svelte";
import { constructMatchExpression, layerId } from "lib/maplibre";
import {
CircleLayer,
@@ -18,6 +17,7 @@
import { showHideLayer } from "../url";
let name = "crossings";
+ let title = "Crossings";
let show = showHideLayer(name);
@@ -54,24 +54,21 @@
];
-
- Crossings
-
-
-
- This shows
- crossing
- data from OpenStreetMap (as of 9 August 2023).
-
-
-
+
+
+
+ This shows
+ crossing
+ data from OpenStreetMap (as of 9 August 2023).
+
+
-
-{#if $show}
-
-{/if}
+
+
+
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, publicResourceBaseUrl } from "lib/common";
import { layerId } from "lib/maplibre";
import { SymbolLayer, VectorTileSource } from "svelte-maplibre";
import cycleParking from "../../../../../assets/bicycle_parking.png?url";
@@ -13,34 +8,32 @@
import { showHideLayer } from "../url";
let name = "cycle_parking";
+ let title = "Cycle parking";
let show = showHideLayer(name);
-
-
- Cycle parking
-
-
-
- Cycle parking, according to
- OpenStreetMap
- (as of 9 August 2023). The type of parking, public/private
- access, and whether it's covered are not shown.
-
-
- Icon from
- OpenStreetMap Carto
-
-
-
-
+
+
+
+
+ Cycle parking, according to
+ OpenStreetMap
+ (as of 9 August 2023). The type of parking, public/private
+ access, and whether it's covered are not shown.
+
+
+ Icon from
+ OpenStreetMap Carto
+
+
+
-
+
- import {
- ColorLegend,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
+ import LayerControl from "../LayerControl.svelte";
+ import { ColorLegend, Popup, publicResourceBaseUrl } from "lib/common";
import { Checkbox, CheckboxGroup } from "govuk-svelte";
import { constructMatchExpression, layerId } from "lib/maplibre";
import {
@@ -18,6 +14,7 @@
import { customUrlState } from "../url";
let name = "education";
+ let title = "Education";
type State = {
show: boolean;
@@ -52,21 +49,17 @@
}
-
- Education
-
-
-
- This shows different places of education according to OpenStreetMap (as
- of 07 February 2024).
-
-
-
+
+
+
+ This shows different places of education according to OpenStreetMap (as of
+ 07 February 2024).
+
+
-
-{#if $state.show}
-
-
+
+
+
Schools
@@ -81,7 +74,7 @@
-{/if}
+
+ import LayerControl from "../LayerControl.svelte";
+ import { ColorLegend, Popup, publicResourceBaseUrl } from "lib/common";
+ import { layerId } from "lib/maplibre";
+ import {
+ FillLayer,
+ hoverStateFilter,
+ VectorTileSource,
+ } from "svelte-maplibre";
+ import { colors } from "../../colors";
+ import { showHideLayer } from "../url";
import { ExternalLink } from "lib/common";
import OsmLicense from "../OsmLicense.svelte";
- import PolygonAmenityLayerControl from "./PolygonAmenityLayerControl.svelte";
+
+ let name = "hospitals";
+ let title = "Hospitals";
+
+ let show = showHideLayer(name);
-
+
+
+
+ This shows
+ hospital
+ data from OpenStreetMap (as of 9 August 2023). It doesn't include
+ outpatient clinics or individual doctor's offices.
+
+
+
+
+
+
-
- This shows
- hospital
- data from OpenStreetMap (as of 9 August 2023). It doesn't include
- outpatient clinics or individual doctor's offices.
-
+ This layer shows collisions recorded in the
+ DfT stats19
+ dataset. Please note these limitations:
+
+
+
Only collisions between 2017 and 2022 are included
+
+ This tool is intended to be used at high-zoom levels, while inspecting a
+ scheme or development area. Not all points are shown at lower zoom
+ levels. Do not use this to look for trends across a city or region
+ scale.
+
+
+ Approximately 150 collisions from the source data aren't included, due
+ to problems with the recorded location
+
+
The "pedestrians" category also include mobility scooters
+
+ All limitations
- DfT stats19
- dataset. Please note these limitations:
-
-
-
Only collisions between 2017 and 2022 are included
-
- This tool is intended to be used at high-zoom levels, while inspecting
- a scheme or development area. Not all points are shown at lower zoom
- levels. Do not use this to look for trends across a city or region
- scale.
-
-
- Approximately 150 collisions from the source data aren't included, due
- to problems with the recorded location
-
-
The "pedestrians" category also include mobility scooters
-
- All limitations
- documented by DfT
- also apply. Not all collisions or near misses are reported.
- There's nuance with the severity categories.
-
-
-
- You can click a point to open the full report, thanks to CycleStreets.
-
-
-
+ documented by DfT
+ also apply. Not all collisions or near misses are reported.
+ There's nuance with the severity categories.
+
+
+
+ You can click a point to open the full report, thanks to CycleStreets.
+
+
-
-{#if $state.show}
-
+
+
PedestriansCyclists
@@ -222,7 +219,7 @@
-{/if}
+
- import {
- ExternalLink,
- HelpButton,
- Popup,
- publicResourceBaseUrl,
- } from "lib/common";
- import { Checkbox } from "govuk-svelte";
+ import LayerControl from "../LayerControl.svelte";
+ import { ExternalLink, Popup, publicResourceBaseUrl } from "lib/common";
import { layerId, makeColorRamp } from "lib/maplibre";
import {
CircleLayer,
@@ -18,6 +13,7 @@
import { showHideLayer } from "../url";
let name = "vehicle_counts";
+ let title = "Vehicle counts";
let colorScale = colors.sequential_low_to_high;
// Manual buckets for motor_vehicles, which max out at 205,000
@@ -37,36 +33,33 @@
}
-
- Vehicle counts
-
-
-
- AADF (annual average daily flow) data from
- DfT road statistics
- . This counts the total daily number of vehicles
- traveling past a count point (in both directions) on an average day of
- the year. Data from the latest year available is shown. See
- methodology
- for details and caveats about the measurements.
-
-
- The colors show motor vehicles AADF, not pedal cycles. The outline is
- thicker when the latest data is a manual or automatic count, and thinner
- when it's an estimate from previous years or nearby counters. Click a
- point for full data.
-
-
-
+
+
+
+ AADF (annual average daily flow) data from
+ DfT road statistics
+ . This counts the total daily number of vehicles traveling
+ past a count point (in both directions) on an average day of the year.
+ Data from the latest year available is shown. See
+ methodology
+ for details and caveats about the measurements.
+
+
+ The colors show motor vehicles AADF, not pedal cycles. The outline is
+ thicker when the latest data is a manual or automatic count, and thinner
+ when it's an estimate from previous years or nearby counters. Click a
+ point for full data.
+
+
+
+
+
-
-{#if $show}
-
-{/if}
+
> = writable(
+ new Map(),
+);
+// The set of layers actively selected
+export let activeLayers: Writable> = writable(new Set());
diff --git a/src/lib/browse/schemes/SchemesLayer.svelte b/src/lib/browse/schemes/SchemesLayer.svelte
index 49baa057..d1474975 100644
--- a/src/lib/browse/schemes/SchemesLayer.svelte
+++ b/src/lib/browse/schemes/SchemesLayer.svelte
@@ -3,10 +3,10 @@
CollapsibleCard,
ErrorMessage,
FileInput,
- Checkbox,
Select,
+ CheckboxGroup,
} from "govuk-svelte";
- import { appVersion, HelpButton, Legend, WarningIcon } from "lib/common";
+ import { appVersion, Legend, WarningIcon } from "lib/common";
import LoadRemoteSchemeData from "./LoadRemoteSchemeData.svelte";
import { setupSchemes } from "./data";
import Filters from "./Filters.svelte";
@@ -25,21 +25,28 @@
import { currentMilestones, atfFundingProgrammes } from "./colors";
import type { DataDrivenPropertyValueSpecification } from "maplibre-gl";
import { constructMatchExpression } from "lib/maplibre";
+ import LayerControl from "../layers/LayerControl.svelte";
+ import { showHideLayer } from "../layers/url";
let errorMessage = "";
- let showAtf = true;
- let showLcwip = true;
-
+ let atfName = "atf_schemes";
+ let atfTitle = "ATF schemes";
+ let atfShow = showHideLayer(atfName);
let atfStyle = "fundingProgramme";
$: [atfColor, atfLegend] = pickStyle(atfStyle);
+ let lcwipName = "lcwip_schemes";
+ let lcwipTitle = "LCWIP schemes";
+ let lcwipShow = showHideLayer(lcwipName);
let lcwipStyle = "interventionType";
$: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle);
function loadFile(filename: string, text: string) {
try {
setupSchemes(JSON.parse(text));
+ $atfShow = true;
+ $lcwipShow = true;
errorMessage = "";
} catch (err) {
errorMessage = `The file you loaded is broken: ${err}`;
@@ -81,11 +88,10 @@
{/if}
- {#if $atfSchemes.size > 0}
-
- ATF schemes
-
-
+
+ {#if $atfSchemes.size > 0}
+
+
Please note there are data
quality caveats for all scheme data:
@@ -95,35 +101,34 @@