Add click a building... notice to map

app/src/frontend/legend.css

@@ -10,7 +10,9 @@
     float: right;
     background: white;
     border-radius: 4px;
-    padding: 0.25rem 0;
+    padding: 0.5rem 0 0.25rem;
+    border: 1px solid #fff;
+    box-shadow: 0px 0px 1px 1px #222222;
 }
 @media (min-width: 380px){
     .map-legend {

app/src/frontend/map.css

@@ -1,4 +1,14 @@
-
+.map-notice {
+    padding: 0.5rem 0.75rem;
+    background: #fff;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    z-index: 1000;
+    position: absolute;
+    left: 25.5rem;
+    top: 0.5rem;
+    box-shadow: 0px 0px 1px 1px #222;
+}
 .leaflet-container {
     position: absolute;
     top: 0;
@@ -6,3 +16,7 @@
     left: 0;
     right: 0;
 }
+.leaflet-container .leaflet-control-zoom {
+    border: 1px solid #fff;
+    box-shadow: 0 0 1px 1px #222;
+}

app/src/frontend/map.js

@@ -6,6 +6,7 @@ import './map.css'
 import ThemeSwitcher from './theme-switcher';
 import { parseCategoryURL } from '../parse';
 import Legend from './legend';
+import { HelpIcon } from './icons';
 
 const OS_API_KEY = 'NVUxtY5r8eA6eIfwrPTAGKrAAsoeI9E9';
 
@@ -70,6 +71,7 @@ class ColouringMap extends Component {
 
         // colour-data tiles
         const is_building = /building/.test(this.props.match.url);
+        const is_edit = /edit/.test(this.props.match.url);
         const cat = parseCategoryURL(this.props.match.url);
         const tileset_by_cat = {
             age: 'date_year',
@@ -121,6 +123,13 @@ class ColouringMap extends Component {
                     <ZoomControl position="topright" />
                     <AttributionControl prefix="" />
                 </Map>
+                {
+                    !is_building? (
+                        <div class="map-notice">
+                            <HelpIcon /> {is_edit? 'Click a building to edit' : 'Click a building for details'}
+                        </div>
+                    ) : null
+                }
                 <Legend slug={cat} />
                 <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
             </Fragment>

app/src/frontend/theme-switcher.css

@@ -1,7 +1,7 @@
 .theme-switcher {
     z-index: 1000;
     position: absolute;
-    top: 75px;
+    top: 77px;
     right: 10px;
     float: right;
     background: white;