Adds minimap toggle to background menu. Also resolves CSS issue with GPX layer in minimap.

css/app.css

@@ -1785,7 +1785,7 @@ img.wiki-image {
     padding-bottom: 10px;
 }
 
-.layer-list {
+.layer-list, .controls-list {
     margin-bottom: 10px;
     border: 1px solid #CCC;
     border-radius: 4px;
@@ -1835,6 +1835,22 @@ img.wiki-image {
     text-overflow: ellipsis;
 }
 
+.minimap-toggle {
+    display: block;
+    padding: 5px 10px;
+    cursor: pointer;
+    color: #7092FF;
+    border-radius: 3px;
+}
+
+.minimap-toggle.active {
+    background: #E8EBFF;
+}
+
+.minimap-toggle:hover {
+    background-color: #ececec;
+}
+
 .hide-toggle {
     display: block;
     padding-left:12px;
@@ -2138,7 +2154,6 @@ img.wiki-image {
 
 .map-in-map-svg,
 .map-in-map-gpx {
-    position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
@@ -2146,6 +2161,15 @@ img.wiki-image {
     width: 100%;
 }
 
+.map-in-map-svg {
+    position: absolute;
+}
+
+.map-in-map-gpx {
+  position: relative;
+  /*z-index: 1;*/
+}
+
 .map-in-map-bbox {
     fill: none;
     stroke: rgba(255, 255, 0, 0.75);

data/core.yaml

@@ -267,6 +267,7 @@ en:
     custom_button: Edit custom background
     custom_prompt: "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme."
     fix_misalignment: Fix alignment
+    toggle_minimap: Minimap
     reset: reset
   map_data:
     title: Map Data

dist/locales/en.json

@@ -323,6 +323,7 @@
         "custom_button": "Edit custom background",
         "custom_prompt": "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.",
         "fix_misalignment": "Fix alignment",
+        "toggle_minimap": "Minimap",
         "reset": "reset"
     },
     "map_data": {

js/id/ui/background.js

@@ -252,6 +252,24 @@ iD.ui.Background = function(context) {
         var overlayList = content.append('ul')
             .attr('class', 'layer-list');
 
+        var controls = content.append('div')
+            .attr('class', 'controls-list');
+
+        var label = controls.append('label');
+
+        label.classed('minimap-toggle', true)
+            .append('input')
+            .attr('type', 'checkbox')
+            .on('change', function() {
+                var exp = label.classed('active');
+                iD.ui.MapInMap.toggle();
+                label.classed('active', !exp);
+                d3.event.preventDefault();
+            });
+
+        label.append('span')
+            .text(t('background.toggle_minimap'));
+
         var adjustments = content.append('div')
             .attr('class', 'adjustments');
 

js/id/ui/map_in_map.js

@@ -51,7 +51,7 @@ iD.ui.MapInMap = function(context) {
 
             iD.util.setTransform(tiles, tX, tY, scale);
             iD.util.setTransform(svg, 0, 0, scale);
-            iD.util.setTransform(gpx, 0, 0, scale);
+            iD.util.setTransform(gpx, tX, tY, scale);
             transformed = true;
 
             queueRedraw();
@@ -113,6 +113,7 @@ iD.ui.MapInMap = function(context) {
             if (transformed) {
                 iD.util.setTransform(tiles, 0, 0);
                 iD.util.setTransform(svg, 0, 0);
+                iD.util.setTransform(gpx, 0, 0);
                 transformed = false;
             }
         }
@@ -262,6 +263,7 @@ iD.ui.MapInMap = function(context) {
             }
         }
 
+        iD.ui.MapInMap.toggle = toggle;
 
         selection
             .on('mousedown.map-in-map', startMouse)