misc UI improvements & bug fixes

mbgl-index.html

@@ -51,6 +51,9 @@
     Choose a location in the map to switch to 3D view.  Then use mouse and W, A, S, D keys to move.
     <div id="cancel-3d-button">Cancel</div>
   </div>
+  <div id="map-info-zoom-message" class="kartta-hidden">
+    Zoom in to inspect features in the map
+  </div>
   <div id="kartta-attribution">
     <a href="/copyright">Copyright</a>
   </div>

mbgl-map.css

@@ -110,17 +110,18 @@ canvas.mapboxgl-canvas.crosshair-cursor {
 
 .button-photo {
   width: 17px;
+  height: 17px;
   border: 1px solid #aaa;
   padding: 5px;
   font-weight: bold;
-  font-size: 26px;
+  font-size: 24px;
   text-align: center;
   font-family: 'Zilla Slab';
   border-radius: 5px;
   background-color: white;
 }
 
-.button-photo-active {
+.button-photo-enabled {
   background-color: grey;
 }
 
@@ -160,6 +161,21 @@ canvas.mapboxgl-canvas.crosshair-cursor {
   font-weight: bold;
 }
 
+#map-info-zoom-message {
+  position: absolute;
+  top: 115px;
+  right: 0px;
+  bottom: 0;
+  background-color: rgba(255,255,255,0.6);
+  height: max-content;
+  margin-left: 50px;
+  margin-right: 50px;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
 .kartta-hidden {
   display: none;
 }
@@ -293,3 +309,12 @@ canvas.mapboxgl-canvas.crosshair-cursor {
   list-style: none;
   padding-inline-start: 0px ;
 }
+
+table.building-info {
+  border-collapse: collapse;
+}
+
+table.building-info tr td {
+  border: 1px solid black;
+  padding: 5px;
+}

mbgl-map.js

@@ -17,6 +17,7 @@
 class ThreeDControl {
   constructor(options) {
     this.getYear = options.getYear;
+    this._message = document.getElementById('map-3d-message-overlay');
   }
 
   onAdd(map) {
@@ -26,54 +27,40 @@ class ThreeDControl {
     this._container.id = "button-3d";
     this._container.textContent = '3D';
 
-    const message = document.getElementById('map-3d-message-overlay');
-
-    const handle_map_click_enter_3d = (e) => {
+    this._handle_map_click_enter_3d = (e) => {
       const lat = e.lngLat.lat;
       const lon = e.lngLat.lng;
       const url = new URL(window.location);
-      //const year = document.getElementById('year-slider').value;
       const year = this.getYear();
       window.location.href = url.origin + "/3d?year=" + year + "&lon=" + lon + "&lat=" + lat;
     };
 
-    let handle_keypress;
-
     // When 3D button is clicked:
     //   1. display the 3D message with cancel button
     //   2. change map cursor to crosshair
     //   3. listen for map clicks to switch to 3D
-    //   4. listen for esc key
     this._container.addEventListener('click', () => {
-      message.classList.remove('kartta-hidden');
-      map._canvas.classList.add('crosshair-cursor');
-      map.on('click', handle_map_click_enter_3d);
-      window.addEventListener('keydown', handle_keypress, false);
+      this._message.classList.remove('kartta-hidden');
+      this._map._canvas.classList.add('crosshair-cursor');
+      this._map.on('click', this._handle_map_click_enter_3d);
     });
 
-    // To cancel:
-    //   1. hide the 3D message
-    //   2. restore the normal map cursor
-    //   3. stop listening for map clicks
-    //   4. stop listening for esc key
-    const cancel_3d = () => {
-      message.classList.add('kartta-hidden');
-      map._canvas.classList.remove('crosshair-cursor');
-      map.off('click', handle_map_click_enter_3d);
-      window.removeEventListener('keydown', handle_keypress, false);
-    };
-
-    handle_keypress = (e) => {
-      if (e.key == 'Escape') {
-        cancel_3d();
-      }
-    };
-
-    document.getElementById('cancel-3d-button').addEventListener('click', cancel_3d);
+    document.getElementById('cancel-3d-button').addEventListener('click', () => { this.cancel(); });
 
     return this._container;
   }
 
+  // To cancel:
+  cancel() {
+    // hide the 3D message
+    this._message.classList.add('kartta-hidden');
+    // restore the normal map cursor
+    this._map._canvas.classList.remove('crosshair-cursor');
+    // stop listening for map clicks
+    this._map.off('click', this._handle_map_click_enter_3d);
+  }
+
+
   onRemove() {
     this._container.parentNode.removeChild(this._container);
     this._map = undefined;
@@ -130,19 +117,24 @@ document.addEventListener("DOMContentLoaded", function(){
     showCompass: false
   }));
 
-  map.addControl(new ThreeDControl({
+  const threeDControl = new ThreeDControl({
     getYear: () => {
       return currentYear;
     }
-  }));
+  });
+  map.addControl(threeDControl);
 
-  map.addControl(new PhotoMapControl({
+  const photoMapControl = new PhotoMapControl({
     layer: "buildings",
     outlineLayer: "buildings_outline",
     editorUrl: "{{ EDITOR_URL }}",
     noterUrl: "{{ NOTER_URL }}",
-    noterApiUrl: "{{ NOTER_API_URL }}"
-  }));
+    noterApiUrl: "{{ NOTER_API_URL }}",
+    getYear: () => {
+      return currentYear;
+    }
+  });
+  map.addControl(photoMapControl);
 
 
   const layersToFilter = [
@@ -282,4 +274,21 @@ document.addEventListener("DOMContentLoaded", function(){
     });
 
   }
+
+  const handleKeydown = (e) => {
+    if (e.target == searchQueryText) {
+      // don't consume keyboard events from search text box
+      return;
+    }
+    if (e.key == 'Escape') {
+      threeDControl.cancel();
+      photoMapControl.disable();
+      e.preventDefault();
+    } else if (e.key == 'i') {
+      photoMapControl.toggleEnabled();
+      e.preventDefault();
+    }
+  };
+  window.addEventListener('keydown', handleKeydown);
+
 });