From f9cf06e203ce527b68e97d070f7f9532b4c362cd Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Thu, 9 Aug 2018 15:59:56 +0100
Subject: [PATCH] Age/size legends

---
 frontend/index.html | 133 ++++++++++++++++++++++++++++++++++++++++++--
 frontend/main.css   |  20 ++++++-
 frontend/main.js    |   6 +-
 frontend/maps.html  | 129 ++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 273 insertions(+), 15 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index abbdf9ff..916ff873 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -64,15 +64,136 @@
 
   <div id="legend" class="info-container offscreen">
       <h2 class="h2">Maps</h2>
-      <ul class="maps-list">
-        <li class="bullet-prefix age" data-map="date_year">Year Built</li>
-        <li class="bullet-prefix size" data-map="size_storeys">Number of storeys</li>
+      <div class="data-section">
+        <h3 class="h3 bullet-prefix age">Age</h3>
+        <dl class="data-list">
+          <dt><a href="/maps/date_year" data-map="date_year">Year Built</a></dt>
+          <dd>
+            <ul class="data-legend">
+              <li>
+                <span class="key" style="background: #fcfcb8">-</span>
+                &gt;=2000
+              </li>
+              <li>
+                <span class="key" style="background: #fee9a5">-</span>
+                1980-2000
+              </li>
+              <li>
+                <span class="key" style="background: #fec580">-</span>
+                1960-1980
+              </li>
+              <li>
+                <span class="key" style="background: #ffb63c">-</span>
+                1940-1960
+              </li>
+              <li>
+                <span class="key" style="background: #ff7e3e">-</span>
+                1920-1940
+              </li>
+              <li>
+                <span class="key" style="background: #ff5353">-</span>
+                1900-1920
+              </li>
+              <li>
+                <span class="key" style="background: #df73ff">-</span>
+                1880-1900
+              </li>
+              <li>
+                <span class="key" style="background: #b81ae7">-</span>
+                1860-1880
+              </li>
+              <li>
+                <span class="key" style="background: #8400a8">-</span>
+                1840-1860
+              </li>
+              <li>
+                <span class="key" style="background: #73ffdf">-</span>
+                1820-1840
+              </li>
+              <li>
+                <span class="key" style="background: #00ffc5">-</span>
+                1800-1820
+              </li>
+              <li>
+                <span class="key" style="background: #00c5ff">-</span>
+                1780-1800
+              </li>
+              <li>
+                <span class="key" style="background: #73b2ff">-</span>
+                1760-1780
+              </li>
+              <li>
+                <span class="key" style="background: #00a9e6">-</span>
+                1740-1760
+              </li>
+              <li>
+                <span class="key" style="background: #0070ff">-</span>
+                1720-1740
+              </li>
+              <li>
+                <span class="key" style="background: #004da8">-</span>
+                1700-1720
+              </li>
+              <li>
+                <span class="key" style="background: #897044">-</span>
+                1680-1700
+              </li>
+              <li>
+                <span class="key" style="background: #894444">-</span>
+                1660-1680
+              </li>
+              <li>
+                <span class="key" style="background: #4c0073">-</span>
+                &lt;1660
+              </li>
+            </ul>
+          </dd>
+        </dl>
+      </div>
+      <div class="data-section">
+        <h3 class="h3 bullet-prefix size">Size</h3>
+        <dl class="data-list">
+          <dt><a href="/maps/size_storeys" data-map="size_storeys">Number of storeys</a></dt>
+          <dd>
+            <ul class="data-legend">
+                <li>
+                  <span class="key" style="background: #ffc584">-</span>
+                  &gt;20
+                </li>
+                <li>
+                  <span class="key" style="background: #f46259">-</span>
+                  10-20
+                </li>
+                <li>
+                  <span class="key" style="background: #da456a">-</span>
+                  5-10
+                </li>
+                <li>
+                  <span class="key" style="background: #a8327d">-</span>
+                  4
+                </li>
+                <li>
+                  <span class="key" style="background: #7c2383">-</span>
+                  3
+                </li>
+                <li>
+                  <span class="key" style="background: #5b167f">-</span>
+                  2
+                </li>
+                <li>
+                  <span class="key" style="background: #360f69">-</span>
+                  1
+                </li>
+
+            </ul>
+          </dd>
+        </dl>
       </ul>
-      <h3 class="h3">Building</h3>
+      <h2 class="h2">Building</h2>
       <pre id="building-detail">
-Click a building to see data.
+  Click a building to see data.
       </pre>
-  </div>
+    </div>
 </main>
 <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
 integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
diff --git a/frontend/main.css b/frontend/main.css
index 65fedf28..e49a392b 100755
--- a/frontend/main.css
+++ b/frontend/main.css
@@ -454,8 +454,6 @@ small {
     background-color: #7d7d7d;
     content: ' ';
 }
-.data-section {
-}
 .data-section .h3 {
     margin: 0;
 }
@@ -463,6 +461,14 @@ small {
     margin: 0.5rem 0 1rem;
     padding-left: 1.5rem;
 }
+.data-list a {
+    color: #555;
+}
+.data-list a:focus,
+.data-list a:active,
+.data-list a:hover {
+    color: #222;
+}
 .data-list dt,
 .data-section label {
     margin: 0;
@@ -479,6 +485,16 @@ small {
 .data-list .no-data {
     color: #999;
 }
+.data-legend {
+    list-style: none;
+    padding: 0;
+}
+.data-legend .key {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    overflow: hidden;
+}
 
 /**
  * Forms
diff --git a/frontend/main.js b/frontend/main.js
index 109fcb53..ab9d8a47 100755
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -56,7 +56,7 @@ function map(){
         })
         data_layers[name].setZIndex(10);
 
-        var el = document.querySelector('li[data-map="'+name+'"]')
+        var el = document.querySelector('a[data-map="'+name+'"]')
         if (!el){
             continue;
         }
@@ -84,7 +84,7 @@ function map(){
         var lat = e.latlng.lat
         var lng = e.latlng.lng
         fetch(
-            '/api/buildings?lat='+lat+'&lng='+lng
+            '/api/buildings?lat='+lat+'&lng='+lng+'&field='+active_data_layer
         ).then(function(response){
             return response.json()
         }).then(function(data){
@@ -101,7 +101,7 @@ function map(){
             if (data.error){
                 preview_el.textContent = 'Click a building to see data';
             } else {
-                preview_el.textContent = JSON.stringify(data, ["id", "date_year", "date_source", "size_storeys", "uprns"], 2);
+                preview_el.textContent = JSON.stringify(data, ["id", active_data_layer], 2);
             }
         })
     })
diff --git a/frontend/maps.html b/frontend/maps.html
index f928456a..9f0058a4 100755
--- a/frontend/maps.html
+++ b/frontend/maps.html
@@ -58,11 +58,132 @@
   <div id="map"></div>
   <div id="legend" class="info-container">
     <h2 class="h2">Maps</h2>
-    <ul class="maps-list">
-      <li class="bullet-prefix age" data-map="date_year">Year Built</li>
-      <li class="bullet-prefix size" data-map="size_storeys">Number of storeys</li>
+    <div class="data-section">
+      <h3 class="h3 bullet-prefix age">Age</h3>
+      <dl class="data-list">
+        <dt><a href="/maps/date_year" data-map="date_year">Year Built</a></dt>
+        <dd>
+          <ul class="data-legend">
+            <li>
+              <span class="key" style="background: #fcfcb8">-</span>
+              &gt;=2000
+            </li>
+            <li>
+              <span class="key" style="background: #fee9a5">-</span>
+              1980-2000
+            </li>
+            <li>
+              <span class="key" style="background: #fec580">-</span>
+              1960-1980
+            </li>
+            <li>
+              <span class="key" style="background: #ffb63c">-</span>
+              1940-1960
+            </li>
+            <li>
+              <span class="key" style="background: #ff7e3e">-</span>
+              1920-1940
+            </li>
+            <li>
+              <span class="key" style="background: #ff5353">-</span>
+              1900-1920
+            </li>
+            <li>
+              <span class="key" style="background: #df73ff">-</span>
+              1880-1900
+            </li>
+            <li>
+              <span class="key" style="background: #b81ae7">-</span>
+              1860-1880
+            </li>
+            <li>
+              <span class="key" style="background: #8400a8">-</span>
+              1840-1860
+            </li>
+            <li>
+              <span class="key" style="background: #73ffdf">-</span>
+              1820-1840
+            </li>
+            <li>
+              <span class="key" style="background: #00ffc5">-</span>
+              1800-1820
+            </li>
+            <li>
+              <span class="key" style="background: #00c5ff">-</span>
+              1780-1800
+            </li>
+            <li>
+              <span class="key" style="background: #73b2ff">-</span>
+              1760-1780
+            </li>
+            <li>
+              <span class="key" style="background: #00a9e6">-</span>
+              1740-1760
+            </li>
+            <li>
+              <span class="key" style="background: #0070ff">-</span>
+              1720-1740
+            </li>
+            <li>
+              <span class="key" style="background: #004da8">-</span>
+              1700-1720
+            </li>
+            <li>
+              <span class="key" style="background: #897044">-</span>
+              1680-1700
+            </li>
+            <li>
+              <span class="key" style="background: #894444">-</span>
+              1660-1680
+            </li>
+            <li>
+              <span class="key" style="background: #4c0073">-</span>
+              &lt;1660
+            </li>
+          </ul>
+        </dd>
+      </dl>
+    </div>
+    <div class="data-section">
+      <h3 class="h3 bullet-prefix size">Size</h3>
+      <dl class="data-list">
+        <dt><a href="/maps/size_storeys" data-map="size_storeys">Number of storeys</a></dt>
+        <dd>
+          <ul class="data-legend">
+              <li>
+                <span class="key" style="background: #ffc584">-</span>
+                &gt;20
+              </li>
+              <li>
+                <span class="key" style="background: #f46259">-</span>
+                10-20
+              </li>
+              <li>
+                <span class="key" style="background: #da456a">-</span>
+                5-10
+              </li>
+              <li>
+                <span class="key" style="background: #a8327d">-</span>
+                4
+              </li>
+              <li>
+                <span class="key" style="background: #7c2383">-</span>
+                3
+              </li>
+              <li>
+                <span class="key" style="background: #5b167f">-</span>
+                2
+              </li>
+              <li>
+                <span class="key" style="background: #360f69">-</span>
+                1
+              </li>
+
+          </ul>
+        </dd>
+      </dl>
     </ul>
-    <h3 class="h3">Building</h3>
+    <h2 class="h2">Building</h2>
     <pre id="building-detail">
 Click a building to see data.
     </pre>