Add location map (count of data entries)

Closes #43
Closes #96

app/map_styles/polygon.xml

@@ -22,6 +22,28 @@
             <LineSymbolizer stroke="#00ffffff" stroke-width="2.5" />
         </Rule>
     </Style>
+    <Style name="location_info_count">
+        <Rule>
+            <Filter>[location_info_count] &gt;= 5</Filter>
+            <PolygonSymbolizer fill="#f0f9e8" />
+        </Rule>
+        <Rule>
+            <Filter>[location_info_count] = 4</Filter>
+            <PolygonSymbolizer fill="#bae4bc" />
+        </Rule>
+        <Rule>
+            <Filter>[location_info_count] = 3</Filter>
+            <PolygonSymbolizer fill="#7bccc4" />
+        </Rule>
+        <Rule>
+            <Filter>[location_info_count] = 2</Filter>
+            <PolygonSymbolizer fill="#43a2ca" />
+        </Rule>
+        <Rule>
+            <Filter>[location_info_count] = 1</Filter>
+            <PolygonSymbolizer fill="#0868ac" />
+        </Rule>
+    </Style>
     <Style name="size_storeys">
         <Rule>
             <Filter>[size_storeys] &gt;= 20</Filter>

app/src/frontend/legend.js

@@ -9,6 +9,19 @@ import CONFIG from './fields-config.json';
 
 
 const LEGEND_CONFIG = {
+    location: [
+        {
+            title: 'Location Information (number of data entries)',
+            slug: 'location',
+            elements: [
+                { color: '#f0f9e8', text: '>5' },
+                { color: '#bae4bc', text: '4' },
+                { color: '#7bccc4', text: '3' },
+                { color: '#43a2ca', text: '2' },
+                { color: '#0868ac', text: '1' }
+            ]
+        }
+    ],
     age: [
         {
             title: 'Year Built',

app/src/frontend/map.js

@@ -75,7 +75,8 @@ class ColouringMap extends Component {
         const cat = get_cat(is_building, this.props.location, this.props.match.url);
         const tileset_by_cat = {
             age: 'date_year',
-            size: 'size_storeys'
+            size: 'size_storeys',
+            location: 'location',
         }
         const data_tileset = tileset_by_cat[cat];
         const dataLayer = data_tileset?

app/src/tileserver.js

@@ -131,4 +131,35 @@ router.get('/size_storeys/:z/:x/:y.png', function(req, res) {
     })
 });
 
+// location information depth
+router.get('/location/:z/:x/:y.png', function(req, res) {
+    const bbox = get_bbox(req.params)
+    const table_def = `(
+        SELECT
+            (
+                case when b.location_name is null then 0 else 1 end +
+                case when b.location_number is null then 0 else 1 end +
+                case when b.location_street is null then 0 else 1 end +
+                case when b.location_line_two is null then 0 else 1 end +
+                case when b.location_town is null then 0 else 1 end +
+                case when b.location_postcode is null then 0 else 1 end +
+                case when b.location_latitude is null then 0 else 1 end +
+                case when b.location_longitude is null then 0 else 1 end
+            ) as location_info_count,
+            g.geometry_geom
+        FROM
+            geometries as g,
+            buildings as b
+        WHERE
+            g.geometry_id = b.geometry_id
+    ) as location`
+    const style_def = ['location_info_count']
+    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'))
+    })
+});
+
 export default router;