Update base layers

- simplify age render (no outline)
- base_light/base_night tiles
- cyan highlight

[Closes #50]

app/map_styles/polygon.xml

@@ -1,25 +1,25 @@
 <Map minimum-version="2.0.0">
-    <Style name="polygon">
+    <Style name="base_light">
         <Rule>
-            <PolygonSymbolizer fill="#4682B477" />
+            <PolygonSymbolizer fill="#cccccc" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
+            <TextSymbolizer face-name="DejaVu Sans Condensed Bold"  fill="#000000">
+                [location_number]
+            </TextSymbolizer>
+        </Rule>
+    </Style>
+    <Style name="base_night">
+        <Rule>
+            <PolygonSymbolizer fill="#303044" />
+            <TextSymbolizer face-name="DejaVu Sans Condensed Bold" fill="#ffffff">
+                [location_number]
+            </TextSymbolizer>
         </Rule>
     </Style>
     <Style name="highlight">
         <Rule>
             <Filter>[focus] = true</Filter>
-            <LineSymbolizer stroke="black" stroke-width="5" stroke-opacity="0.5" />
+            <LineSymbolizer stroke="#00ffffaa" stroke-width="4.5" />
-            <LineSymbolizer stroke="white" stroke-width="3" />
+            <LineSymbolizer stroke="#00ffffff" stroke-width="2.5" />
-            <TextSymbolizer face-name="DejaVu Sans Condensed Bold">
-                [location_number]
-            </TextSymbolizer>
-        </Rule>
-        <Rule>
-            <ElseFilter />
-            <LineSymbolizer stroke="black" stroke-width="0.3" />
-            <TextSymbolizer face-name="DejaVu Sans Condensed Bold">
-                [location_number]
-            </TextSymbolizer>
         </Rule>
     </Style>
     <Style name="size_storeys">
@@ -56,102 +56,78 @@
         <Rule>
             <Filter>[date_year] &gt;= 2000</Filter>
             <PolygonSymbolizer fill="#f0eaba" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1980 and [date_year] &lt; 2000</Filter>
             <PolygonSymbolizer fill="#fae269" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1960 and [date_year] &lt; 1980</Filter>
             <PolygonSymbolizer fill="#fbaf27" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1940 and [date_year] &lt; 1960</Filter>
             <PolygonSymbolizer fill="#e6711d" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1920 and [date_year] &lt; 1940</Filter>
             <PolygonSymbolizer fill="#d73d3a" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1900 and [date_year] &lt; 1920</Filter>
             <PolygonSymbolizer fill="#ba221c" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1880 and [date_year] &lt; 1900</Filter>
             <PolygonSymbolizer fill="#bb859b" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1860 and [date_year] &lt; 1880</Filter>
             <PolygonSymbolizer fill="#8b3654" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1840 and [date_year] &lt; 1860</Filter>
             <PolygonSymbolizer fill="#8f5385" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1820 and [date_year] &lt; 1840</Filter>
             <PolygonSymbolizer fill="#56619b" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1800 and [date_year] &lt; 1820</Filter>
             <PolygonSymbolizer fill="#6793b2" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1780 and [date_year] &lt; 1800</Filter>
             <PolygonSymbolizer fill="#83c3b3" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1760 and [date_year] &lt; 1780</Filter>
             <PolygonSymbolizer fill="#adc88f" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1740 and [date_year] &lt; 1760</Filter>
             <PolygonSymbolizer fill="#83a663" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1720 and [date_year] &lt; 1740</Filter>
             <PolygonSymbolizer fill="#77852d" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1700 and [date_year] &lt; 1720</Filter>
             <PolygonSymbolizer fill="#69814e" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1680 and [date_year] &lt; 1700</Filter>
             <PolygonSymbolizer fill="#d0c291" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &gt;= 1660 and [date_year] &lt; 1680</Filter>
             <PolygonSymbolizer fill="#918158" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
         </Rule>
         <Rule>
             <Filter>[date_year] &lt; 1660</Filter>
             <PolygonSymbolizer fill="#7a5732" />
-            <LineSymbolizer stroke="white" stroke-width="0.3" />
-        </Rule>
-        <Rule>
-            <ElseFilter />
-            <PolygonSymbolizer fill="#00000000" />
-            <LineSymbolizer stroke="black" stroke-width="0.3" />
         </Rule>
     </Style>
 </Map>

app/src/frontend/map.js

@@ -89,6 +89,10 @@ class ColouringMap extends Component {
             <TileLayer key={this.props.building.building_id} url={highlight} />
             : null;
 
+        const base_layer_url = (this.state.theme === 'light')?
+            `/tiles/base_light/{z}/{x}/{y}.png`
+            : `/tiles/base_night/{z}/{x}/{y}.png`
+
         return (
             <Fragment>
                 <Map
@@ -102,6 +106,7 @@ class ColouringMap extends Component {
                     onClick={this.handleClick}
                     >
                     <TileLayer url={url} attribution={attribution} />
+                    <TileLayer url={base_layer_url} />
                     { dataLayer }
                     { highlightLayer }
                     <ZoomControl position="topright" />

app/src/tileserver.js

@@ -11,10 +11,41 @@ import { strictParseInt } from './parse';
 const router = express.Router()
 
 // basic geometry tiles
-router.get('/outline/:z/:x/:y.png', function(req, res) {
+router.get('/base_light/:z/:x/:y.png', function(req, res) {
     const bbox = get_bbox(req.params)
-    const table_def = 'geometries'
+    const table_def = `(
-    const style_def = ['polygon']
+        SELECT
+            b.location_number as location_number,
+            g.geometry_geom
+        FROM
+            geometries as g,
+            buildings as b
+        WHERE
+            g.geometry_id = b.geometry_id
+    ) as outline`
+    const style_def = ['base_light']
+    render_tile(bbox, table_def, style_def, function(err, im) {
+        if (err) throw err
+
+        res.writeHead(200, {'Content-Type': 'image/png'})
+        res.end(im.encodeSync('png'))
+    })
+});
+
+// dark theme
+router.get('/base_night/:z/:x/:y.png', function(req, res) {
+    const bbox = get_bbox(req.params)
+    const table_def = `(
+        SELECT
+            b.location_number as location_number,
+            g.geometry_geom
+        FROM
+            geometries as g,
+            buildings as b
+        WHERE
+            g.geometry_id = b.geometry_id
+    ) as outline`
+    const style_def = ['base_night']
     render_tile(bbox, table_def, style_def, function(err, im) {
         if (err) throw err
 
@@ -35,7 +66,6 @@ router.get('/highlight/:z/:x/:y.png', function(req, res) {
     const table_def = `(
         SELECT
             g.geometry_id = ${geometry_id} as focus,
-            b.location_number as location_number,
             g.geometry_geom
         FROM
             geometries as g,