From bd5eb5e9728012673857a9e22fd9add7cd147eb6 Mon Sep 17 00:00:00 2001
From: Rowan Hogan <rowan.hogan@gmail.com>
Date: Sun, 14 Jun 2015 11:11:56 +1000
Subject: [PATCH] Adds minimap toggle to background menu. Also resolves CSS
 issue with GPX layer in minimap.

---
 css/app.css            | 28 ++++++++++++++++++++++++++--
 data/core.yaml         |  1 +
 dist/locales/en.json   |  1 +
 js/id/ui/background.js | 18 ++++++++++++++++++
 js/id/ui/map_in_map.js |  4 +++-
 5 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/css/app.css b/css/app.css
index 9bec9494c..f678ff350 100644
--- a/css/app.css
+++ b/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);
diff --git a/data/core.yaml b/data/core.yaml
index ad4af61e7..cadffa530 100644
--- a/data/core.yaml
+++ b/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
diff --git a/dist/locales/en.json b/dist/locales/en.json
index d21a16cfb..a79334cde 100644
--- a/dist/locales/en.json
+++ b/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": {
diff --git a/js/id/ui/background.js b/js/id/ui/background.js
index 73c3f0bbd..a2b876abb 100644
--- a/js/id/ui/background.js
+++ b/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');
 
diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js
index 4713ba6a7..f2500be59 100644
--- a/js/id/ui/map_in_map.js
+++ b/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)