Fix layer selection

commonknowledge · Dec 6, 2024 · c498642 · c498642
1 parent 33ce141
commit c498642
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 36 deletions.
diff --git a/nextjs/src/app/reports/[id]/(components)/MapLayers/UKConstituencies.tsx b/nextjs/src/app/reports/[id]/(components)/MapLayers/UKConstituencies.tsx
@@ -5,8 +5,9 @@ import { useEffect, useState } from 'react'
 import { Layer, Source } from 'react-map-gl'
 import { addCountByGssToMapboxLayer } from '../../addCountByGssToMapboxLayer'
 import {
-  getChoroplethColours,
   getChoroplethEdge,
+  getChoroplethFill,
+  getSelectedChoroplethEdge,
 } from '../../getChoroplethStyles'
 import { getChoroplethFillFilter } from '../../logic'
 import { Tileset } from '../../types'
@@ -80,7 +81,7 @@ const UKConstituencies = () => {
           source-layer={tileset.sourceLayerId}
           type="fill"
           filter={getChoroplethFillFilter(tileset)}
-          paint={getChoroplethColours(tileset.data)}
+          paint={getChoroplethFill(tileset.data)}
           layout={{ visibility }}
         />
         {/* Border of the boundary */}
@@ -89,19 +90,17 @@ const UKConstituencies = () => {
           source={tileset.mapboxSourceId}
           source-layer={tileset.sourceLayerId}
           type="line"
-          paint={{
-            ...getChoroplethEdge(),
-            'line-width': [
-              'case',
-              [
-                '==',
-                ['get', tileset?.promoteId || null],
-                selectedBoundary || null,
-              ],
-              5,
-              0.3,
-            ],
-          }}
+          paint={getChoroplethEdge()}
+          layout={{ visibility, 'line-join': 'round', 'line-round-limit': 0.1 }}
+        />
+        {/* Selected boundary layer */}
+        <Layer
+          id={`${tileset.mapboxSourceId}-selected`}
+          source={tileset.mapboxSourceId}
+          source-layer={tileset.sourceLayerId}
+          type="line"
+          paint={getSelectedChoroplethEdge()}
+          filter={['==', ['get', tileset.promoteId], selectedBoundary]}
           layout={{ visibility, 'line-join': 'round', 'line-round-limit': 0.1 }}
         />
       </Source>

diff --git a/nextjs/src/app/reports/[id]/(components)/MapLayers/UKLocalAuthorityDistricts.tsx b/nextjs/src/app/reports/[id]/(components)/MapLayers/UKLocalAuthorityDistricts.tsx
@@ -3,7 +3,7 @@ import { useLoadedMap } from '@/lib/map'
 import { useEffect, useState } from 'react'
 import { Layer, Source } from 'react-map-gl'
 import { addCountByGssToMapboxLayer } from '../../addCountByGssToMapboxLayer'
-import { getChoroplethColours } from '../../getChoroplethStyles'
+import { getChoroplethFill } from '../../getChoroplethStyles'
 import { getChoroplethFillFilter } from '../../logic'
 import { Tileset } from '../../types'
 import useBoundaryAnalytics from '../../useBoundaryAnalytics'
@@ -52,7 +52,7 @@ const UKLocalAuthorityDistricts = () => {
   if (!map.loaded) return null
   if (!countsByWard || !tileset) return null
 
-  const choroplethColours = getChoroplethColours(tileset.data)
+  const choroplethColours = getChoroplethFill(tileset.data)
   return (
     <>
       <Source

diff --git a/nextjs/src/app/reports/[id]/(components)/MapLayers/UKWards.tsx b/nextjs/src/app/reports/[id]/(components)/MapLayers/UKWards.tsx
@@ -4,10 +4,7 @@ import { useAtomValue } from 'jotai'
 import { useEffect, useState } from 'react'
 import { Layer, Source } from 'react-map-gl'
 import { addCountByGssToMapboxLayer } from '../../addCountByGssToMapboxLayer'
-import {
-  getChoroplethColours,
-  getChoroplethEdge,
-} from '../../getChoroplethStyles'
+import { getChoroplethEdge, getChoroplethFill } from '../../getChoroplethStyles'
 import { getChoroplethFillFilter } from '../../logic'
 import { Tileset } from '../../types'
 import useBoundaryAnalytics from '../../useBoundaryAnalytics'
@@ -74,7 +71,7 @@ const UKWards = () => {
           source-layer={tileset.sourceLayerId}
           type="fill"
           filter={getChoroplethFillFilter(tileset)}
-          paint={getChoroplethColours(tileset.data)}
+          paint={getChoroplethFill(tileset.data)}
           layout={{ visibility }}
         />
         {/* Border of the boundary */}
@@ -83,20 +80,21 @@ const UKWards = () => {
           source={tileset.mapboxSourceId}
           source-layer={tileset.sourceLayerId}
           type="line"
+          paint={getChoroplethEdge()}
+          layout={{ visibility, 'line-join': 'round', 'line-round-limit': 0.1 }}
+        />
+        {/* Selected boundary layer */}
+        <Layer
+          id={`${tileset.mapboxSourceId}-selected`}
+          source={tileset.mapboxSourceId}
+          source-layer={tileset.sourceLayerId}
+          type="line"
           paint={{
-            ...getChoroplethEdge(),
-            'line-width': [
-              'case',
-              [
-                '==',
-                ['get', tileset?.promoteId || null],
-                selectedBoundary || null,
-              ],
-              5,
-              0.3,
-            ],
+            'line-color': 'red',
+            'line-width': 2,
           }}
-          layout={{ visibility }}
+          filter={['==', ['get', tileset.promoteId], selectedBoundary]}
+          layout={{ visibility, 'line-join': 'round', 'line-round-limit': 0.1 }}
         />
       </Source>
     </>

diff --git a/nextjs/src/app/reports/[id]/getChoroplethStyles.ts b/nextjs/src/app/reports/[id]/getChoroplethStyles.ts
@@ -2,7 +2,7 @@ import { scaleLinear, scaleSequential } from 'd3-scale'
 import { interpolateBlues } from 'd3-scale-chromatic'
 import { FillLayerSpecification, LineLayerSpecification } from 'mapbox-gl'
 
-export function getChoroplethColours(
+export function getChoroplethFill(
   data: { count: number }[]
 ): FillLayerSpecification['paint'] {
   let min =
@@ -63,3 +63,10 @@ export function getChoroplethEdge(): LineLayerSpecification['paint'] {
     'line-opacity': 0.5,
   }
 }
+
+export function getSelectedChoroplethEdge(): LineLayerSpecification['paint'] {
+  return {
+    'line-color': 'white',
+    'line-width': 5,
+  }
+}
diff --git a/nextjs/src/components/LocalisedMap.tsx b/nextjs/src/components/LocalisedMap.tsx
@@ -35,7 +35,7 @@ const LocalisedMap: React.FC<LocalisedMapProps> = ({
       mapStyle={
         showStreetDetails
           ? 'mapbox://styles/commonknowledge/clubx087l014y01mj1bv63yg8'
-          : 'mapbox://styles/commonknowledge/cm4cjnvff01mx01sdcmpbfuz5'
+          : 'mapbox://styles/commonknowledge/cm4cjnvff01mx01sdcmpbfuz5/draft'
       }
       transformRequest={mapboxTransformRequest}
     >