From ba4312ed80826b033c2d5f261b298792a14e43a2 Mon Sep 17 00:00:00 2001
From: Denys Digtiar <duemir@gmail.com>
Date: Sat, 13 Jun 2015 15:27:24 +1000
Subject: [PATCH] [WIP] GPX Layer is added to the mini-map.

---
 css/app.css            |  7 +++++--
 js/id/ui/map_in_map.js | 22 +++++++++++++++-------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/css/app.css b/css/app.css
index bc5c07269..9bec9494c 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2136,8 +2136,11 @@ img.wiki-image {
     user-select: none;
 }
 
-.map-in-map-svg {
-    position: relative;
+.map-in-map-svg,
+.map-in-map-gpx {
+    position: absolute;
+    top: 0;
+    left: 0;
     overflow: hidden;
     height: 100%;
     width: 100%;
diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js
index 0c7d18917..715b83f8a 100644
--- a/js/id/ui/map_in_map.js
+++ b/js/id/ui/map_in_map.js
@@ -3,8 +3,7 @@ iD.ui.MapInMap = function(context) {
 
     function map_in_map(selection) {
         var backgroundLayer = iD.TileLayer(),
-            gpxLayer = iD.GpxLayer(context)
-                .projection(context.projection),
+            gpxLayer = iD.GpxLayer(context),
             overlayLayer = iD.TileLayer(),
             projection = iD.geo.RawMercator(),
             zoom = d3.behavior.zoom()
@@ -153,10 +152,6 @@ iD.ui.MapInMap = function(context) {
             background
                 .call(backgroundLayer);
 
-            // Add the gpxLayer _somewhere_ here
-            // background
-            //     .call(gpxLayer)
-
             // redraw overlay
             var overlaySources = context.background().overlayLayerSources(),
                 hasOverlay = false;
@@ -189,6 +184,20 @@ iD.ui.MapInMap = function(context) {
                     .call(overlayLayer);
             }
 
+            gpxLayer
+                .projection(projection);
+
+            var gpx = tiles
+                .selectAll('.map-in-map-gpx')
+                .data([0]);
+
+            gpx.enter()
+                .append('div')
+                .attr('class', 'map-in-map-gpx');
+
+            gpx.call(gpxLayer);
+            gpx.dimensions(dMini);
+
             // redraw bounding box
             if (!panning) {
                 var getPath = d3.geo.path().projection(projection),
@@ -275,7 +284,6 @@ iD.ui.MapInMap = function(context) {
         if (gpx) {
             d3.text(gpx, function(err, gpxTxt) {
                 gpxLayer.geojson(toGeoJSON.gpx(toDom(gpxTxt)));
-                console.log(gpxTxt)
                 queueRedraw();
             });
         }