Load highlight layer

app/src/frontend/map.js

@@ -10,10 +10,39 @@ const OS_API_KEY = 'NVUxtY5r8eA6eIfwrPTAGKrAAsoeI9E9';
  * Map area
  */
 class ColouringMap extends Component {
-    state = {
+
+    constructor(props) {
+        super(props);
+        this.state = {
             lat: 51.5245255,
             lng: -0.1338422,
             zoom: 16,
+            highlight: undefined
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(e) {
+        var lat = e.latlng.lat
+        var lng = e.latlng.lng
+        fetch(
+            '/buildings?lat='+lat+'&lng='+lng+'&field=' // +active_data_layer
+        ).then(
+            (res) => res.json()
+        ).then(function(data){
+            console.log(data)
+            if (data.geometry_id){
+                this.setState({highlight: data.geometry_id});
+            } else {
+                this.setState({highlight: undefined});
+            }
+            // var preview_el = document.getElementById('building-detail');
+            // if (data.error){
+            //     preview_el.textContent = 'Click a building to see data';
+            // } else {
+            //     preview_el.textContent = JSON.stringify(data, ["id", active_data_layer], 2);
+            // }
+        }.bind(this))
     }
 
     render() {
@@ -24,6 +53,10 @@ class ColouringMap extends Component {
         const url = `https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/${tilematrixSet}/${layer}/{z}/{x}/{y}.png?key=${key}`
         const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines.'
         const outline = '/tiles/outline/{z}/{x}/{y}.png'
+        const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${this.state.highlight}`
+        const highlightLayer = this.state.highlight ? (
+            <TileLayer key={this.state.highlight} url={highlight} />
+        ) : null;
         return (
             <Map
                 center={position}
@@ -32,9 +65,12 @@ class ColouringMap extends Component {
                 maxZoom={18}
                 doubleClickZoom={false}
                 zoomControl={false}
-                attributionControl={false}>
+                attributionControl={false}
+                onClick={this.handleClick}
+                >
                 <TileLayer url={url} attribution={attribution} />
                 <TileLayer url={outline} />
+                { highlightLayer }
                 <ZoomControl position="topright" />
                 <AttributionControl prefix="" />
             </Map>