label on top of lines

app/src/frontend/map/layers/borough-boundary-layer.tsx

@@ -15,23 +15,14 @@ export function BoroughBoundaryLayer({}) {
     }, []);
 
     if(borough == "enabled") {
-        return boundaryGeojson &&
-        <><GeoJSON 
-        attribution='Borough boundary from <a href=https://data.london.gov.uk/dataset/london_boroughs>London Datastore</a> Ordnance Survey Open Data - Contains public sector information licensed under the <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3.0</a>'
-        data={boundaryGeojson}
-        style={{color: '#f00', fill: false, weight: 1}}
-       /* minNativeZoom={17}*/
-    /><BuildingBaseLayerAllZoom theme="boroughs" /></>;
-    } else if (borough == "disabled") {
-        return <div></div>
-        // do not display anything
         return boundaryGeojson &&
         <GeoJSON 
-        data={boundaryGeojson}
+            attribution='Borough boundary from <a href=https://data.london.gov.uk/dataset/london_boroughs>London Datastore</a> Ordnance Survey Open Data - Contains public sector information licensed under the <a href=https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/>Open Government Licence v3.0</a>'
-        style={{color: '#0f0', fill: false, weight: 1}} />
+            data={boundaryGeojson}
+            style={{color: '#f00', fill: false, weight: 1}}
+        />;
     } else {
-        return boundaryGeojson &&
+        return <></>
-        <GeoJSON data={boundaryGeojson} style={{color: '#0f0', fill: true}}/>;
     }
 }
 

app/src/frontend/map/layers/borough-label-layer.tsx

@@ -0,0 +1,17 @@
+import { GeoJsonObject } from 'geojson';
+import React, { useEffect, useState } from 'react';
+import { GeoJSON } from 'react-leaflet';
+import { useDisplayPreferences } from '../../displayPreferences-context';
+import { apiGet } from '../../apiHelpers';
+import { BuildingBaseLayerAllZoom } from './building-base-layer-all-zoom';
+
+export function BoroughLabelLayer({}) {
+    const { borough } = useDisplayPreferences();
+
+    if(borough == "enabled") {
+        return <BuildingBaseLayerAllZoom theme="boroughs" />;
+    } else {
+        return <></>
+    }
+}
+

app/src/frontend/map/map.tsx

@@ -14,6 +14,7 @@ import { Building } from '../models/building';
 import { CityBaseMapLayer } from './layers/city-base-map-layer';
 import { CityBoundaryLayer } from './layers/city-boundary-layer';
 import { BoroughBoundaryLayer } from './layers/borough-boundary-layer';
+import { BoroughLabelLayer } from './layers/borough-label-layer';
 import { ParcelBoundaryLayer } from './layers/parcel-boundary-layer';
 import { HistoricDataLayer } from './layers/historic-data-layer';
 import { FloodBoundaryLayer } from './layers/flood-boundary-layer';
@@ -158,6 +159,12 @@ export const ColouringMap : FC<ColouringMapProps> = ({
                             />
                     }
                 </Pane>
+                <Pane
+                    name='cc-label-overlay-pane'
+                    style={{zIndex: 1000}}
+                >
+                    <BoroughLabelLayer/>
+                </Pane>
 
                 <ZoomControl position="topright" />
                 <AttributionControl prefix=""/>