diff --git a/src/lib/browse/schemes/InterventionLayer.svelte b/src/lib/browse/schemes/InterventionLayer.svelte index 6a44d0d43..4dadccc4a 100644 --- a/src/lib/browse/schemes/InterventionLayer.svelte +++ b/src/lib/browse/schemes/InterventionLayer.svelte @@ -8,10 +8,7 @@ isPolygon, layerId, } from "lib/maplibre"; - import type { - DataDrivenPropertyValueSpecification, - ExpressionSpecification, - } from "maplibre-gl"; + import type { ExpressionSpecification } from "maplibre-gl"; import { CircleLayer, FillLayer, @@ -20,16 +17,17 @@ LineLayer, } from "svelte-maplibre"; import type { Schemes } from "types"; + import type { SchemeTypeDetails } from "./data"; import InterventionPopup from "./InterventionPopup.svelte"; + import type { Writable } from "svelte/store"; export let name: string; - export let description: string; - export let show: boolean; + export let details: SchemeTypeDetails; + export let show: Writable; export let schemesGj: Schemes; export let filterSchemeText: string; export let filterInterventionText: string; - export let color: DataDrivenPropertyValueSpecification; $: gj = addLineStringEndpoints(schemesGj); @@ -53,19 +51,19 @@ manageHoverState eventsIfTopMost paint={{ - "circle-color": color, + "circle-color": details.colour, "circle-radius": circleRadius, "circle-opacity": hoverStateFilter(1.0, 0.5), }} layout={{ - visibility: show ? "visible" : "none", + visibility: $show ? "visible" : "none", }} hoverCursor="pointer" >

{props.name}

{props.name}

@@ -120,18 +118,18 @@ manageHoverState eventsIfTopMost paint={{ - "fill-color": color, + "fill-color": details.colour, "fill-opacity": hoverStateFilter(0.2, 0.5), }} layout={{ - visibility: show ? "visible" : "none", + visibility: $show ? "visible" : "none", }} hoverCursor="pointer" >

{props.name}

diff --git a/src/lib/browse/schemes/SchemesLayer.svelte b/src/lib/browse/schemes/SchemesLayer.svelte index f8d876a19..51390a5b1 100644 --- a/src/lib/browse/schemes/SchemesLayer.svelte +++ b/src/lib/browse/schemes/SchemesLayer.svelte @@ -13,38 +13,95 @@ import { constructMatchExpression } from "lib/maplibre"; import type { DataDrivenPropertyValueSpecification } from "maplibre-gl"; import { colorInterventionsBySchema, schemaLegend } from "schemas"; + import type { Writable } from "svelte/store"; import LayerControl from "../layers/LayerControl.svelte"; import { showHideLayer } from "../layers/url"; import { atfFundingProgrammes, currentMilestones } from "./colors"; - import { importAllLocalSketches, setupSchemes } from "./data"; + import { + importAllLocalSketches, + setupSchemes, + type SchemeTypeDetails, + } from "./data"; import Filters from "./Filters.svelte"; import InterventionLayer from "./InterventionLayer.svelte"; import LoadRemoteSchemeData from "./LoadRemoteSchemeData.svelte"; + import SchemesLayerControl from "./SchemesLayerControl.svelte"; import { atfSchemes, filterAtfInterventionText, filterAtfSchemeText, + filterFinalInspectionsInterventionText, + filterFinalInspectionsSchemeText, filterLcwipInterventionText, filterLcwipSchemeText, filterLocalInterventionText, filterLocalSchemeText, + finalInspectionsSchemes, lcwipSchemes, localSchemes, } from "./stores"; let errorMessage = ""; - let atfName = "atf_schemes"; - let atfTitle = "ATF schemes"; - let atfShow = showHideLayer(atfName); - let atfStyle = "fundingProgramme"; - $: [atfColor, atfLegend] = pickStyle(atfStyle); + const [atfColour, atfLegend] = pickStyle("fundingProgramme"); + let atfDetails: SchemeTypeDetails = { + name: "atf_schemes", + title: "ATF schemes", + style: "fundingProgramme", + colour: atfColour, + legend: atfLegend, + }; + const showAtf: Writable = showHideLayer("atf_schemes"); + + $: { + const [atfColour, atfLegend] = pickStyle(atfDetails.style); + atfDetails.colour = atfColour; + atfDetails.legend = atfLegend; + } + + const [lcwipColour, lcwipLegend] = pickStyle("fundingProgramme"); + let lcwipDetails: SchemeTypeDetails = { + name: "lcwip_schemes", + title: "LCWIP schemes", + style: "fundingProgramme", + colour: lcwipColour, + legend: lcwipLegend, + }; + const showLcwip: Writable = showHideLayer("lcwip_schemes"); - let lcwipName = "lcwip_schemes"; - let lcwipTitle = "LCWIP schemes"; - let lcwipShow = showHideLayer(lcwipName); - let lcwipStyle = "interventionType"; - $: [lcwipColor, lcwipLegend] = pickStyle(lcwipStyle); + $: { + const [lcwipColour, lcwipLegend] = pickStyle(lcwipDetails.style); + lcwipDetails.colour = lcwipColour; + lcwipDetails.legend = lcwipLegend; + } + + console.log(atfDetails); + console.log(JSON.stringify(atfDetails)); + $: { + console.log(atfSchemes); + console.log($atfSchemes); + console.log(JSON.stringify(atfSchemes)) + } + + const [finalInspectionsColour, finalInspectionsLegend] = + pickStyle("fundingProgramme"); + let finalInspectionsDetails: SchemeTypeDetails = { + name: "finalInspections_schemes", + title: "Final Inspections schemes", + style: "fundingProgramme", + colour: finalInspectionsColour, + legend: finalInspectionsLegend, + }; + const showFinalInspections: Writable = showHideLayer( + "finalInspections_schemes", + ); + $: { + const [finalInspectionsColour, finalInspectionsLegend] = pickStyle( + finalInspectionsDetails.style, + ); + finalInspectionsDetails.colour = finalInspectionsColour; + finalInspectionsDetails.legend = finalInspectionsLegend; + } let localName = "local_schemes"; let localTitle = "Your schemes"; @@ -53,9 +110,15 @@ function loadMainFile(filename: string, text: string) { try { - setupSchemes(JSON.parse(text), atfSchemes, lcwipSchemes); - $atfShow = true; - $lcwipShow = true; + setupSchemes( + JSON.parse(text), + atfSchemes, + lcwipSchemes, + finalInspectionsSchemes, + ); + $showAtf = true; + $showLcwip = true; + $showFinalInspections = true; errorMessage = ""; } catch (err) { errorMessage = `The file you loaded is broken: ${err}`; @@ -110,72 +173,30 @@ {/if} - {#if Object.entries($atfSchemes.schemes).length > 0} - - -

- Please note there are data - quality caveats for all scheme data: -

-
    - {#each $atfSchemes.notes ?? [] as note} -
  • {note}

  • - {/each} -
-
+ {#if atfSchemes && finalInspectionsSchemes && lcwipSchemes} + -
- - - - -
-
+ {/if}
@@ -225,25 +246,32 @@ + + - +/> --> diff --git a/src/lib/browse/schemes/SchemesLayerControl.svelte b/src/lib/browse/schemes/SchemesLayerControl.svelte new file mode 100644 index 000000000..2b083d991 --- /dev/null +++ b/src/lib/browse/schemes/SchemesLayerControl.svelte @@ -0,0 +1,56 @@ + + +{#if Object.entries($schemes.schemes).length > 0} + + +

+ Please note there are data + quality caveats for all scheme data: +

+
    + {#each $schemes.notes ?? [] as note} +
  • {note}

  • + {/each} +
+
+ +
+ + +