From b225c9e8ae04790ae0259ae7135529bf7e3d5edd Mon Sep 17 00:00:00 2001
From: Mateusz Konieczny <matkoniecz@gmail.com>
Date: Mon, 9 Jan 2023 17:32:21 +0100
Subject: [PATCH] label on top of lines

---
 .../map/layers/borough-boundary-layer.tsx     | 19 +++++--------------
 .../map/layers/borough-label-layer.tsx        | 17 +++++++++++++++++
 app/src/frontend/map/map.tsx                  |  7 +++++++
 3 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 app/src/frontend/map/layers/borough-label-layer.tsx

diff --git a/app/src/frontend/map/layers/borough-boundary-layer.tsx b/app/src/frontend/map/layers/borough-boundary-layer.tsx
index aaec43f6..752efc65 100644
--- a/app/src/frontend/map/layers/borough-boundary-layer.tsx
+++ b/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}
-        style={{color: '#0f0', fill: false, weight: 1}} />
+            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}}
+        />;
     } else {
-        return boundaryGeojson &&
-        <GeoJSON data={boundaryGeojson} style={{color: '#0f0', fill: true}}/>;
+        return <></>
     }
 }
 
diff --git a/app/src/frontend/map/layers/borough-label-layer.tsx b/app/src/frontend/map/layers/borough-label-layer.tsx
new file mode 100644
index 00000000..34787602
--- /dev/null
+++ b/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 <></>
+    }
+}
+
diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx
index 80261c67..c35ea3dc 100644
--- a/app/src/frontend/map/map.tsx
+++ b/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=""/>