From b4c26fa9f67fc8fbbd464353522170e128afb1d5 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Wed, 1 Aug 2018 18:42:52 +0100
Subject: [PATCH] Add render and highlight to frontend

---
 frontend/main.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/main.js b/frontend/main.js
index 75c19255..9094f7af 100755
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -32,11 +32,41 @@ function map(){
         doubleClickZoom: false,
     });
     
+    // Controls
     var attr = L.control.attribution({prefix: ""});
     attr.addAttribution("Contains OS data © Crown copyright: OS Maps baselayers and building outlines. Building attribute data is © Colouring London contributors");
     attr.addTo(map);
     L.control.zoom({position: 'topright'}).addTo(map);
     L.control.layers(baseMaps, {}, {position: 'topright'}).addTo(map);
+
+    // Rendered layer
+    var outline_layer = L.tileLayer('/tiles/outline/{z}/{x}/{y}.png', {
+        maxZoom: 20,
+        minZoom: 14
+    })
+    outline_layer.addTo(map);
+
+    var highlight_layer = L.tileLayer('/tiles/highlight/{z}/{x}/{y}.png', {
+        maxZoom: 20,
+        minZoom: 14
+    })
+    highlight_layer.addTo(map);
+
+    // Query for building on click
+    map.on('click', function(e){
+        var lat = e.latlng.lat
+        var lng = e.latlng.lng
+        fetch(
+            '/api/buildings?lat='+lat+'&lng='+lng
+        ).then(function(response){
+            return response.json()
+        }).then(function(data){
+            if (data.geometry_id){
+                highlight_layer.setUrl('/tiles/highlight/{z}/{x}/{y}.png?highlight='+data.geometry_id)
+            }
+        })
+    })
+
 }
 
 /**