[WIP] GPX Layer is added to the mini-map.

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%;

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();
             });
         }