Add a show/hide tiles toggle button, position buttons relatively

css/80_app.css

@@ -2707,33 +2707,33 @@ img.tile-removing {
     position: relative;
 }
 
+.panel-content .button {
+    display: inline-block;
+    background: #7092ff;
+    border-radius: 2px;
+    padding: 0 4px;
+    margin-top: 5px;
+    color: white;
+}
+
 .panel-content-history .links a {
-    padding-left: 10px;
+    margin-left: 10px;
 }
 [dir='rtl'] .panel-content-history .links a {
-    padding-left: auto;
-    padding-right: 10px;
+    margin-left: auto;
+    margin-right: 10px;
 }
 
 .panel-content-history .view-history-on-osm {
     display: block;
-    padding: 10px 0;
+    margin-top: 10px;
 }
 
 .panel-content-location .imagery-info,
 .panel-content-location .location-info {
-    padding-top: 10px;
+    margin-top: 10px;
 }
 
-.panel-content-measurement .button {
-    position: absolute;
-    background: #7092ff;
-    border-radius: 2px;
-    padding: 0 4px;
-    color: white;
-    top: 6px;
-    right: 10px;
-}
 
 /* About Section
 ------------------------------------------------------- */

data/core.yaml

@@ -290,6 +290,8 @@ en:
       zoom: Zoom
       vintage: Vintage
       unknown: Unknown
+      show_tiles: Show Tiles
+      hide_tiles: Hide Tiles
     location:
       key: L
       title: Location

dist/locales/en.json

@@ -366,7 +366,9 @@
                 "title": "Imagery",
                 "zoom": "Zoom",
                 "vintage": "Vintage",
-                "unknown": "Unknown"
+                "unknown": "Unknown",
+                "show_tiles": "Show Tiles",
+                "hide_tiles": "Hide Tiles"
             },
             "location": {
                 "key": "L",

modules/ui/panels/imagery.js

@@ -46,6 +46,19 @@ export function uiPanelImagery(context) {
         if (!currVintage) {
             debouncedGetVintage(selection);
         }
+
+        var toggle = context.getDebug('tile') ? 'hide_tiles' : 'show_tiles';
+
+        selection
+            .append('a')
+            .text(t('infobox.imagery.' + toggle))
+            .attr('href', '#')
+            .attr('class', 'button button-toggle-tiles')
+            .on('click', function() {
+                d3.event.preventDefault();
+                context.setDebug('tile', !context.getDebug('tile'));
+                selection.call(redraw);
+            });
     }
 
 

modules/ui/panels/measurement.js

@@ -188,7 +188,7 @@ export function uiPanelMeasurement(context) {
                 .append('a')
                 .text(t('infobox.measurement.' + toggle))
                 .attr('href', '#')
-                .attr('class', 'button')
+                .attr('class', 'button button-toggle-units')
                 .on('click', function() {
                     d3.event.preventDefault();
                     isImperial = !isImperial;