Preview building data

frontend/main.css

@@ -29,7 +29,9 @@ body {
 p {
     font-size: 1.1rem;
 }
-
+pre {
+    white-space: pre-wrap;
+}
 /**
  * Main Layout
  */

frontend/main.js

@@ -68,13 +68,21 @@ function map(){
         }).then(function(data){
             if (data.geometry_id){
                 highlight_layer.setUrl('/tiles/highlight/{z}/{x}/{y}.png?highlight='+data.geometry_id)
+            } else {
+                map.removeLayer(highlight_layer)
+                highlight_layer_added = false
             }
             if (!highlight_layer_added && data.geometry_id){
                 highlight_layer.addTo(map);
             }
+            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", "date_year", "date_source", "uprns"], 2);
+            }
         })
     })
-
 }
 
 /**

frontend/maps.html

@@ -60,10 +60,11 @@
       <h2>View Maps</h2>
       <ul class="maps-list">
           <li>Year Built</li>
-          <li>Size</li>
-          <li>Like Me!</li>
       </ul>
-      <a href="building-view.html">(Mock) View building detail</a>
+      <h3>Building</h3>
+      <pre id="building-detail">
+Click a building to see data.
+      </pre>
   </div>
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="