From 8c726859fa47c3b7ddbc0bee4fac253cb9001786 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Fri, 5 Oct 2018 22:20:02 +0100
Subject: [PATCH] Work on maintaining map layers and cats over navigation

---
 app/src/frontend/building-view.js |  2 +-
 app/src/frontend/header.js        |  2 +-
 app/src/frontend/map.js           | 48 +++++++++++++++++++++++--------
 app/src/frontend/my-account.js    |  2 +-
 app/src/frontend/welcome.js       |  2 +-
 5 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index a4afccb5..4f5c4157 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -16,7 +16,7 @@ const BuildingView = (props) => {
             <Sidebar title="Building Not Found">
                 <InfoBox msg="We can't find that one anywhere - try the map again?" />
                 <div className="buttons-container with-space">
-                    <Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
+                    <Link to="/map/age.html" className="btn btn-secondary">Back to maps</Link>
                 </div>
             </Sidebar>
         );
diff --git a/app/src/frontend/header.js b/app/src/frontend/header.js
index d8d2037f..ef6dd00f 100644
--- a/app/src/frontend/header.js
+++ b/app/src/frontend/header.js
@@ -19,7 +19,7 @@ const Header = (props) => (
                     <a className="nav-link" href="https://pages.colouring.london/about">More about</a>
                 </li>
                 <li className="nav-item">
-                    <NavLink to="/map/date_year.html" className="nav-link">View Maps</NavLink>
+                    <NavLink to="/map/age.html" className="nav-link">View Maps</NavLink>
                 </li>
                 <li className="nav-item">
                     <a className="nav-link" href="https://pages.colouring.london/buildingcategories">Building Categories</a>
diff --git a/app/src/frontend/map.js b/app/src/frontend/map.js
index e00f7fbe..7cc660b0 100644
--- a/app/src/frontend/map.js
+++ b/app/src/frontend/map.js
@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { Map, TileLayer, ZoomControl, AttributionControl } from 'react-leaflet-universal';
+import queryString from 'query-string';
 
 import '../../node_modules/leaflet/dist/leaflet.css'
 import './map.css'
@@ -25,8 +26,14 @@ class ColouringMap extends Component {
     }
 
     handleClick(e) {
+        if (this.props.match.url.match('edit')){
+            // don't navigate away from edit view
+            return
+        }
         var lat = e.latlng.lat
         var lng = e.latlng.lng
+        const is_building = /building/.test(this.props.match.url);
+        const new_cat = get_cat(is_building, this.props.location, this.props.match.url);
         fetch(
             '/buildings/locate?lat='+lat+'&lng='+lng
         ).then(
@@ -35,11 +42,12 @@ class ColouringMap extends Component {
             if (data && data.length){
                 const building = data[0];
                 this.props.selectBuilding(building);
-                this.props.history.push(`/building/${building.building_id}.html`);
+                this.props.history.push(`/building/${building.building_id}.html?cat=${new_cat}`);
             } else {
-                // should deselect but keep/return to expected colour theme
-                // this.props.selectBuilding(undefined);
-                // this.props.history.push(`/map/date_year.html`);
+                // deselect but keep/return to expected colour theme
+                this.props.selectBuilding(undefined);
+                const map_cat = new_cat || 'age';
+                this.props.history.push(`/map/${map_cat}.html`);
             }
         }.bind(this)).catch(
             (err) => console.error(err)
@@ -63,19 +71,23 @@ class ColouringMap extends Component {
         const attribution = 'Building attribute data is © Colouring London contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines.'
 
         // colour-data tiles
-        const is_building = /building/.test(this.props.match.url)
-        const themer = /theme=([^&]*)/
-        const data_tileset = themer.test(this.props.match.url)? themer.exec(this.props.match.url)[1] : 'date_year';
-        console.log(is_building, data_tileset)
-
-        const dataLayer = <TileLayer key={data_tileset} url={`/tiles/${data_tileset}/{z}/{x}/{y}.png`} />;
+        const is_building = /building/.test(this.props.match.url);
+        const cat = get_cat(is_building, this.props.location, this.props.match.url);
+        const tileset_by_cat = {
+            age: 'date_year',
+            size: 'size_storeys'
+        }
+        const data_tileset = tileset_by_cat[cat];
+        const dataLayer = data_tileset?
+            <TileLayer key={data_tileset} url={`/tiles/${data_tileset}/{z}/{x}/{y}.png`} />
+            : null;
 
         // highlight
         const geometry_id = (this.props.building) ? this.props.building.geometry_id : undefined;
         const highlight = `/tiles/highlight/{z}/{x}/{y}.png?highlight=${geometry_id}`
-        const highlightLayer = (is_building && this.props.building) ? (
+        const highlightLayer = (is_building && this.props.building) ?
             <TileLayer key={this.props.building.building_id} url={highlight} />
-        ) : null;
+            : null;
 
         return (
             <Fragment>
@@ -101,4 +113,16 @@ class ColouringMap extends Component {
     }
 };
 
+function get_cat(is_building, location, url) {
+    const search = (location && location.search)? queryString.parse(location.search) : {};
+    var cat, matches;
+    if (is_building) {
+        cat = search.cat;
+    } else {
+        matches = /\/map\/([^.]+).html/.exec(url);
+        cat = matches && matches[1];
+    }
+    return cat;
+}
+
 export default ColouringMap;
diff --git a/app/src/frontend/my-account.js b/app/src/frontend/my-account.js
index 9fc765f0..9d588b29 100644
--- a/app/src/frontend/my-account.js
+++ b/app/src/frontend/my-account.js
@@ -45,7 +45,7 @@ class MyAccountPage extends Component {
                         GitHub</a>.
 
                         </p>
-                        <Link to="/map/date_year.html" className="btn btn-primary">Start colouring</Link>
+                        <Link to="/map/age.html" className="btn btn-primary">Start colouring</Link>
                         <ErrorBox msg={this.state.error} />
                         <form method="POST" action="/logout" onSubmit={this.handleSubmit}>
                             <input className="btn btn-secondary" type="submit" value="Log out"/>
diff --git a/app/src/frontend/welcome.js b/app/src/frontend/welcome.js
index 7193b752..5a0560ea 100644
--- a/app/src/frontend/welcome.js
+++ b/app/src/frontend/welcome.js
@@ -7,7 +7,7 @@ const Welcome = () => (
     <div className="jumbotron welcome-float">
         <h1 className="h1">Welcome to Colouring London</h1>
         <p className="lead">Colour in, view and download data on London's buildings</p>
-        <Link to="/map/date_year.html"
+        <Link to="/map/age.html"
             className="btn btn-outline-dark btn-lg btn-block">
             Start Colouring
         </Link>