diff --git a/src/lib/browse/LayerControls.svelte b/src/lib/browse/LayerControls.svelte index 8c566639..5a80e480 100644 --- a/src/lib/browse/LayerControls.svelte +++ b/src/lib/browse/LayerControls.svelte @@ -93,9 +93,11 @@ - - - + + + + + diff --git a/src/lib/browse/layers/ActiveLayersLegend.svelte b/src/lib/browse/layers/ActiveLayersLegend.svelte new file mode 100644 index 00000000..cd59b30d --- /dev/null +++ b/src/lib/browse/layers/ActiveLayersLegend.svelte @@ -0,0 +1,27 @@ + + +

Selected layers

+
diff --git a/src/lib/browse/layers/LayerControl.svelte b/src/lib/browse/layers/LayerControl.svelte new file mode 100644 index 00000000..94aff752 --- /dev/null +++ b/src/lib/browse/layers/LayerControl.svelte @@ -0,0 +1,89 @@ + + + + + {title} + + + +
+ +
+ + + {title} + + + + + + + X + +
+ + {#if show} + + {/if} +
diff --git a/src/lib/browse/layers/areas/CensusOutputAreas.svelte b/src/lib/browse/layers/areas/CensusOutputAreas.svelte index 1c61a209..827fd772 100644 --- a/src/lib/browse/layers/areas/CensusOutputAreas.svelte +++ b/src/lib/browse/layers/areas/CensusOutputAreas.svelte @@ -1,11 +1,6 @@ - { - showAverageCars = false; - showPopulationDensity = false; - }} -> - Percent of households with a car - - + + + {#if $state.kind == "percent_households_with_car"}

Car/van availability data is from the 2021 census, via .

-

- License: - Open Government License - . Contains OS data © Crown copyright and database - right 2023. -

- - - -{#if $state.kind == "percent_households_with_car"} - -{/if} - - { - showHouseholdsWithCar = false; - showPopulationDensity = false; - }} -> - Average cars per household - - + {:else if $state.kind == "average_cars_per_household"}

Where the census counts "3 or more cars or vans", the average shown here assumes 3. @@ -155,31 +100,7 @@ ONS Geography .

-

- License: - Open Government License - . Contains OS data © Crown copyright and database - right 2023. -

- - - -{#if $state.kind == "average_cars_per_household"} - -{/if} - - { - showHouseholdsWithCar = false; - showAverageCars = false; - }} -> - Population density - - + {:else}

Population density data is from the 2021 census, via .

- - + {/if} + - -{#if $state.kind == "population_density"} -

(people per square kilometres)

- x.toLocaleString())} - /> -{/if} + +
+ + + {#if $state.kind == "percent_households_with_car"} + + {:else if $state.kind == "average_cars_per_household"} + + {:else if $state.kind == "population_density"} +

(people per square kilometres)

+ x.toLocaleString())} + /> + {/if} +
+ diff --git a/src/lib/browse/layers/areas/CombinedAuthorities.svelte b/src/lib/browse/layers/areas/CombinedAuthorities.svelte index 341f5534..b75d6a89 100644 --- a/src/lib/browse/layers/areas/CombinedAuthorities.svelte +++ b/src/lib/browse/layers/areas/CombinedAuthorities.svelte @@ -1,12 +1,11 @@ - - - Combined authorities - - -

- 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} - +

{label($state.pollutant)}

-
- -
+
+ +
- {`Legend -{/if} + {`Legend +
+ - 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 $state.show} -
- + +
+ {#each legend as [kind, label, color]} @@ -150,7 +143,7 @@ {/each}
-{/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} - - - +
+ - 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). -

-

Data valid as of 1 January, 2024

-

- License: Contains OS data © Crown copyright and database right - 2023. Made available under the - Public Sector Geospatial Agreement - . -

- + + +

+ 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). +

+

Data valid as of 1 January, 2024

+

+ License: Contains OS data © Crown copyright and database right 2023. + Made available under the + Public Sector Geospatial Agreement + . +

+ + + - -{#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. -

-

Data valid as of 1 September, 2023

-

- License: Contains OS data © Crown copyright and database right - 2023. Made available under the - Public Sector Geospatial Agreement - . -

- + + +

+ 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. +

+

Data valid as of 1 September, 2023

+

+ License: Contains OS data © Crown copyright and database right 2023. + Made available under the + Public Sector Geospatial Agreement + . +

- -{#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,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. -

-

Data valid as of 1 September, 2023

-

- License: Contains OS data © Crown copyright and database right - 2023. Made available under the - Public Sector Geospatial Agreement - . -

- + + +

+ 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. +

+

Data valid as of 1 September, 2023

+

+ License: Contains OS data © Crown copyright and database right 2023. + Made available under the + Public Sector Geospatial Agreement + . +

+ + + - -{#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); - - a logo representing cycle parking - 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 - -

- - + + a logo representing 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 + +

+ - + - 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. -

- - + + +

{props.name ?? "Unnamed hospital"}

+ + + diff --git a/src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte b/src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte deleted file mode 100644 index ad44268e..00000000 --- a/src/lib/browse/layers/points/PolygonAmenityLayerControl.svelte +++ /dev/null @@ -1,65 +0,0 @@ - - - - - {pluralNoun} - - - - - - - - -

{props.name ?? `Unnamed ${singularNoun}`}

- - - diff --git a/src/lib/browse/layers/points/Problems.svelte b/src/lib/browse/layers/points/Problems.svelte index 966995ad..87a80dd0 100644 --- a/src/lib/browse/layers/points/Problems.svelte +++ b/src/lib/browse/layers/points/Problems.svelte @@ -1,16 +1,12 @@ - - Issues & Conflicts - - -

- Critical issues and policy conflicts from the Design Assistance Log. - This is internally collected data. -

-

- This layer is manually copied from a copy of the DA Log. The data is - recent as of 10 June 2024. -

- + + +

+ Critical issues and policy conflicts from the Design Assistance Log. This + is internally collected data. +

+

+ This layer is manually copied from a copy of the DA Log. The data is + recent as of 10 June 2024. +

- -{#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 { GeoJSON, SymbolLayer } from "svelte-maplibre"; import railwayStation from "../../../../../assets/railway_station.png?url"; @@ -13,31 +8,29 @@ import { showHideLayer } from "../url"; let name = "railway_stations"; + let title = "Railway stations"; let show = showHideLayer(name); - - A logo representing a train - Railway Stations - - -

- This shows - railway station - data from OpenStreetMap (as of 9 August 2023). -

-

- Icon from - National Rail - . (Note that not all stations shown are National Rail.) -

- - - - + + A logo representing a train +
+

+ This shows + railway station + data from OpenStreetMap (as of 9 August 2023). +

+

+ Icon from + National Rail + . (Note that not all stations shown are National Rail.) +

+ +
+ + 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 = "sports_spaces"; + let title = "Sports spaces"; + + let show = showHideLayer(name); - + + +

+ This shows + sports pitches + and + sports centres + data from OpenStreetMap (as of 9 August 2023). +

+ + + + + -

- This shows - sports pitches - and - sports centres - data from OpenStreetMap (as of 9 August 2023). -

- - + + +

{props.name ?? "Unnamed sports space"}

+ + + diff --git a/src/lib/browse/layers/points/Stats19.svelte b/src/lib/browse/layers/points/Stats19.svelte index 89bdf10d..d4ef1e41 100644 --- a/src/lib/browse/layers/points/Stats19.svelte +++ b/src/lib/browse/layers/points/Stats19.svelte @@ -1,7 +1,7 @@ - - Stats19 - - -

- This layer shows collisions recorded in the + +

+ 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} -
+ +
Pedestrians Cyclists @@ -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 @@

  • {note}

    • {/each} -     -     -     + - +
    + - + +
    + + {/if} - {#if $lcwipSchemes.size > 0} - - LCWIP schemes - - + {#if $lcwipSchemes.size > 0} + +

    Please note there are data quality caveats for all scheme data: @@ -133,25 +138,27 @@

  • {note}

    • {/each} -     -     -     + - +
    + - + +
    + + {/if} +     @@ -159,7 +166,7 @@
    +
    @@ -65,3 +67,21 @@
    + +
    + +
    + +