Add GLA boundary to map (#464)

app/src/frontend/map/map.tsx

@@ -1,16 +1,15 @@
-import { LatLngExpression } from 'leaflet';
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
-import { Map, TileLayer, ZoomControl, AttributionControl } from 'react-leaflet-universal';
+import { Map, TileLayer, ZoomControl, AttributionControl, GeoJSON } from 'react-leaflet-universal';
 
 import '../../../node_modules/leaflet/dist/leaflet.css'
 import './map.css'
 
 import { HelpIcon } from '../components/icons';
 import Legend from './legend';
-import { parseCategoryURL } from '../../parse';
 import SearchBox from './search-box';
 import ThemeSwitcher from './theme-switcher';
+import { GeoJsonObject } from 'geojson';
 
 const OS_API_KEY = 'NVUxtY5r8eA6eIfwrPTAGKrAAsoeI9E9';
 
@@ -28,6 +27,7 @@ interface ColouringMapState {
     lat: number;
     lng: number;
     zoom: number;
+    boundary: GeoJsonObject;
 }
 /**
  * Map area
@@ -48,7 +48,8 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> { //
             theme: 'night',
             lat: 51.5245255,
             lng: -0.1338422,
-            zoom: 16
+            zoom: 16,
+            boundary: undefined,
         };
         this.handleClick = this.handleClick.bind(this);
         this.handleLocate = this.handleLocate.bind(this);
@@ -100,8 +101,20 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> { //
         this.setState({theme: newTheme});
     }
 
+    async getBoundary() {
+        const res = await fetch('/geometries/boundary-detailed.geojson');
+        const data = await res.json() as GeoJsonObject;
+        this.setState({
+            boundary: data
+        });
+    }
+
+    componentDidMount() {
+        this.getBoundary();
+    }
+
     render() {
-        const position: LatLngExpression = [this.state.lat, this.state.lng];
+        const position: [number, number] = [this.state.lat, this.state.lng];
 
         // baselayer
         const key = OS_API_KEY;
@@ -117,6 +130,11 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> { //
         const buildingsBaseUrl = `/tiles/base_${this.state.theme}/{z}/{x}/{y}{r}.png`;
         const buildingBaseLayer = <TileLayer url={buildingsBaseUrl} minZoom={14} />;
 
+
+        const boundaryStyleFn = () => ({color: '#bbb', fill: false});
+        const boundaryLayer = this.state.boundary && 
+                <GeoJSON data={this.state.boundary} style={boundaryStyleFn}/>;
+
         // colour-data tiles
         const cat = this.props.category;
         const tilesetByCat = {
@@ -166,6 +184,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> { //
                 >
                     { baseLayer }
                     { buildingBaseLayer }
+                    { boundaryLayer }
                     { dataLayer }
                     { highlightLayer }
                     <ZoomControl position="topright" />