Refactoring of targetted WDC layer for scalabliity.

Adjusted style settings.
wearepal · Sep 5, 2024 · 8ef455d · 8ef455d
1 parent b8b0fa8
commit 8ef455d
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 29 deletions.
diff --git a/app/javascript/projects/layer_palette.tsx b/app/javascript/projects/layer_palette.tsx
@@ -224,36 +224,43 @@ export const LayerPalette = ({ addLayer, hide, dbModels, getTeamDatasets, teamNa
         </Section>
         <Section title="OS Boundaries">
           {
-            Array<{ name: string, identifier: string }>(
+            Array<{ name: string, identifier: string, target: string }>(
               {
                 name: "Historic Counties",
-                identifier: "shapefiles:boundary_line_historic_counties"
+                identifier: "shapefiles:boundary_line_historic_counties",
+                target: "all"
               },
               {
                 name: "Ceremonial Counties",
-                identifier: "shapefiles:boundary_line_ceremonial_counties"
+                identifier: "shapefiles:boundary_line_ceremonial_counties",
+                target: "all"
               },
               {
                 name: "Westminster Constituencies (2010-2024)",
-                identifier: "shapefiles:westminster_const "
+                identifier: "shapefiles:westminster_const ",
+                target: "all"
               },
               {
                 name: "Westminster Constituencies (2024 onwards)",
-                identifier: "shapefiles:bdline_gb__westminster_const"
+                identifier: "shapefiles:bdline_gb__westminster_const",
+                target: "all"
               },
               {
                 name: "Polling Districts",
-                identifier: "shapefiles:polling_districts_england"
+                identifier: "shapefiles:polling_districts_england",
+                target: "all"
               },
               {
                 name: "District Councils",
-                identifier: "shapefiles:district_borough_unitary"
+                identifier: "shapefiles:district_borough_unitary",
+                target: "all"
               },
               {
-                name: "District Councils - Wealden District Council",
-                identifier: "shapefiles:district_borough_unitary"
+                name: "Wealden District Council",
+                identifier: "shapefiles:district_borough_unitary",
+                target: "Wealden District"
               }
-            ).sort((a, b) => (a.name < b.name) ? -1 : 1).map(({ name, identifier }) =>
+            ).sort((a, b) => (a.name < b.name) ? -1 : 1).map(({ name, identifier, target }) =>
               <AddLayerButton
                 addLayer={addLayer}
                 prototype={{
@@ -262,6 +269,7 @@ export const LayerPalette = ({ addLayer, hide, dbModels, getTeamDatasets, teamNa
                   identifier,
                   visible: true,
                   opacity: 1,
+                  target
                 }}
               />
             )

diff --git a/app/javascript/projects/reify_layer/boundary.ts b/app/javascript/projects/reify_layer/boundary.ts
@@ -26,42 +26,72 @@ const getSource = memoize((id: string) => {
     return source
 })
 
-const getStyle = (layer: BoundaryLayer, zoom: number | undefined, name: string) => (
+const getStyle = (layer: BoundaryLayer, zoom: number | undefined, target: string) => (
         (feature) => {
             const properties = feature.getProperties()
             const id = properties.geometry?.ol_uid ?? properties.Admin_Unit_ID
             const col = boundaryColourMap.get(id) || [Math.random() * 255, Math.random() * 255, Math.random() * 255, 1]
             boundaryColourMap.set(id, col)
 
-            const wealdenOnly = (properties.Name === "Wealden District" && name == "District Councils - Wealden District Council")
-            return new Style({
-                fill : new Fill({
-                    color: `rgba(${col[0]}, ${col[1]}, ${col[2]}, ${!wealdenOnly && name == "District Councils - Wealden District Council" ? 0 : col[3]})`
-                }),
-                stroke: new Stroke({
-                    color: `rgba(0, 0, 122, ${!wealdenOnly && name == "District Councils - Wealden District Council" ? 0 : 1})`,
-                    width: 2
-                }),
-                text: new Text({
-                    text: properties.Name,
-                    font: '16px Calibri,sans-serif',
-                    fill: new Fill({
-                        color: '#fff'
+            if(target !== "all"){
+                if(properties.Name === target){
+                    return new Style({
+                        fill : new Fill({
+                            color: `rgba(0, 0, 0, 0)`
+                        }),
+                        stroke: new Stroke({
+                            color: `rgba(0, 0, 0, 1)`,
+                            width: 2
+                        }),
+                        text: new Text({
+                            text: properties.Name,
+                            font: '16px Calibri,sans-serif',
+                            fill: new Fill({
+                                color: 'black'
+                            }),
+                            stroke: new Stroke({
+                                color: 'black',
+                                width: .5
+                            })
+                        })
+                    })
+                }else{
+                    return new Style({
+                        fill : new Fill({
+                            color: `rgba(0, 0, 0, .75)`
+                        }),
+                    })
+                }
+            }else{
+                return new Style({
+                    fill : new Fill({
+                        color: `rgba(${col[0]}, ${col[1]}, ${col[2]}, ${col[3]})`
                     }),
                     stroke: new Stroke({
-                        color: '#fff',
-                        width: .5
+                        color: `rgba(0, 0, 122, 1)`,
+                        width: 2
+                    }),
+                    text: new Text({
+                        text: properties.Name,
+                        font: '16px Calibri,sans-serif',
+                        fill: new Fill({
+                            color: '#fff'
+                        }),
+                        stroke: new Stroke({
+                            color: '#fff',
+                            width: .5
+                        })
                     })
                 })
-            })
+            }
         }
 )
 
 export function reifyBoundaryLayer (layer: BoundaryLayer, existingLayer: BaseLayer | null, map: m) {
 
     const vectLayer =  new VectorLayer({
         source: getSource(layer.identifier),
-        style: getStyle(layer, map.getView().getZoom(), layer.name)
+        style: getStyle(layer, map.getView().getZoom(), layer.target)
     })
 
     return vectLayer

diff --git a/app/javascript/projects/state.ts b/app/javascript/projects/state.ts
@@ -64,6 +64,7 @@ export interface ShapeLayer extends BaseLayer {
 export interface BoundaryLayer extends BaseLayer {
   type: "BoundaryLayer"
   identifier: string
+  target: string
 }
 
 export interface KewLayer extends BaseLayer {