From c4933fdc11118e78d19060584280304485c613c0 Mon Sep 17 00:00:00 2001
From: Mateusz Konieczny <matkoniecz@gmail.com>
Date: Fri, 16 Dec 2022 07:42:38 +0100
Subject: [PATCH] proof of concept for borough names with Mapnik-based tiles

---
 app/map_styles/polygon.xml                    |  5 ++++
 app/src/frontend/config/map-config.ts         |  5 ++--
 app/src/frontend/config/tileserver-config.ts  |  2 +-
 .../map/layers/borough-boundary-layer.tsx     |  5 ++--
 .../layers/building-base-layer-all-zoom.tsx   | 19 ++++++++++++
 app/src/tiles/dataDefinition.ts               | 29 +++++++++++++++++++
 .../036.borough_borders_and_labels.down.sql   |  1 +
 .../036.borough_borders_and_labels.up.sql     |  8 +++++
 8 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 app/src/frontend/map/layers/building-base-layer-all-zoom.tsx
 create mode 100644 migrations/036.borough_borders_and_labels.down.sql
 create mode 100644 migrations/036.borough_borders_and_labels.up.sql

diff --git a/app/map_styles/polygon.xml b/app/map_styles/polygon.xml
index 518e676a..38a2adf2 100644
--- a/app/map_styles/polygon.xml
+++ b/app/map_styles/polygon.xml
@@ -24,6 +24,11 @@
             <MinScaleDenominator>0</MinScaleDenominator>
         </Rule>
     </Style>
+    <Style name="base_boroughs">
+        <Rule>
+            <TextSymbolizer size="24" fill="#f99" face-name="DejaVu Sans Bold Oblique" halo-radius="1" wrap-width="20">[name]</TextSymbolizer>
+        </Rule>
+    </Style>
     <Style name="number_labels">
         <Rule>
             <TextSymbolizer
diff --git a/app/src/frontend/config/map-config.ts b/app/src/frontend/config/map-config.ts
index e57968e8..b2d73c01 100644
--- a/app/src/frontend/config/map-config.ts
+++ b/app/src/frontend/config/map-config.ts
@@ -8,12 +8,13 @@ export const initialMapViewport: MapViewport = {
   zoom: 16,
 };
 
-export type MapTheme = 'light' | 'night' | 'night_outlines';
+export type MapTheme = 'light' | 'night' | 'night_outlines' | 'boroughs';
 
 export type LayerEnablementState = 'enabled' | 'disabled';
 
 export const mapBackgroundColor: Record<MapTheme, string> = {
     light: '#F0EEEB',
     night: '#162639',
-    night_outlines: '#162639'
+    night_outlines: '#162639',
+    boroughs: '#ff0000',
 };
diff --git a/app/src/frontend/config/tileserver-config.ts b/app/src/frontend/config/tileserver-config.ts
index ad8516d4..d4e636ac 100644
--- a/app/src/frontend/config/tileserver-config.ts
+++ b/app/src/frontend/config/tileserver-config.ts
@@ -21,6 +21,6 @@ export type BuildingMapTileset = 'date_year' |
     'dynamics_demolished_count' |
     'team';
 
-export type SpecialMapTileset = 'base_light' | 'base_night' | 'base_night_outlines' | 'highlight' | 'number_labels';
+export type SpecialMapTileset = 'base_light' | 'base_night' | 'base_night_outlines' | 'highlight' | 'number_labels' | 'base_boroughs';
 
 export type MapTileset = BuildingMapTileset | SpecialMapTileset;
diff --git a/app/src/frontend/map/layers/borough-boundary-layer.tsx b/app/src/frontend/map/layers/borough-boundary-layer.tsx
index 9fea80fa..aaec43f6 100644
--- a/app/src/frontend/map/layers/borough-boundary-layer.tsx
+++ b/app/src/frontend/map/layers/borough-boundary-layer.tsx
@@ -3,6 +3,7 @@ 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 BoroughBoundaryLayer({}) {
     const [boundaryGeojson, setBoundaryGeojson] = useState<GeoJsonObject>(null);
@@ -15,12 +16,12 @@ export function BoroughBoundaryLayer({}) {
 
     if(borough == "enabled") {
         return boundaryGeojson &&
-        <GeoJSON 
+        <><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
diff --git a/app/src/frontend/map/layers/building-base-layer-all-zoom.tsx b/app/src/frontend/map/layers/building-base-layer-all-zoom.tsx
new file mode 100644
index 00000000..d5d5835e
--- /dev/null
+++ b/app/src/frontend/map/layers/building-base-layer-all-zoom.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TileLayer } from 'react-leaflet';
+
+import { MapTheme } from '../../config/map-config';
+import { MapTileset } from '../../config/tileserver-config';
+
+import {getTileLayerUrl } from './get-tile-layer-url';
+
+export function BuildingBaseLayerAllZoom({ theme }: {theme: MapTheme}) {
+    const tileset = `base_${theme}` as const;
+
+    return <TileLayer
+                key={theme} /* needed because TileLayer url is not mutable in react-leaflet v3 */
+                url={getTileLayerUrl(tileset)}
+                minZoom={1}
+                maxZoom={109}
+                detectRetina={true}
+            />;
+}
diff --git a/app/src/tiles/dataDefinition.ts b/app/src/tiles/dataDefinition.ts
index 5039bd97..4aa0bcd7 100644
--- a/app/src/tiles/dataDefinition.ts
+++ b/app/src/tiles/dataDefinition.ts
@@ -18,6 +18,12 @@ const LAYER_QUERIES = {
             geometry_id
         FROM
             buildings`,
+    base_boroughs: `
+        SELECT
+            geometry_id,
+            name
+        FROM
+            external_data_borough_boundary`,
     number_labels:`
         SELECT
             geometry_id,
@@ -245,6 +251,29 @@ function getDataConfig(tileset: string): DataConfig {
         throw new Error('Invalid tileset requested');
     }
     
+    if(tileset == 'base_boroughs') {
+        const query = `(
+            SELECT
+            d.*,
+            g.geometry_geom
+        FROM (
+            ${table}
+        ) AS d
+        JOIN
+            geometries AS g
+        ON d.geometry_id = g.geometry_id
+        JOIN
+            external_data_borough_boundary AS b
+        ON d.geometry_id = b.geometry_id
+    ) AS data
+        `;
+    
+        return {
+            geometry_field: GEOMETRY_FIELD,
+            table: query
+        };    
+    }
+
     const query = `(
         SELECT
             d.*,
diff --git a/migrations/036.borough_borders_and_labels.down.sql b/migrations/036.borough_borders_and_labels.down.sql
new file mode 100644
index 00000000..63376afd
--- /dev/null
+++ b/migrations/036.borough_borders_and_labels.down.sql
@@ -0,0 +1 @@
+DROP TABLE IF EXISTS external_data_borough_boundary;
diff --git a/migrations/036.borough_borders_and_labels.up.sql b/migrations/036.borough_borders_and_labels.up.sql
new file mode 100644
index 00000000..c4cdb79c
--- /dev/null
+++ b/migrations/036.borough_borders_and_labels.up.sql
@@ -0,0 +1,8 @@
+CREATE TABLE IF NOT EXISTS external_data_borough_boundary (
+        -- internal unique id
+        planning_entry_id serial PRIMARY KEY,
+
+        -- geometry as EPSG:3857 avoiding reprojection for tiles
+        geometry_id integer REFERENCES geometries,
+        name VARCHAR(50)
+);