From 13f0ceda3e474d9edfdd69bb584eafa262216bf9 Mon Sep 17 00:00:00 2001
From: Brian Reavis <brian@thirdroute.com>
Date: Tue, 10 Nov 2015 12:03:13 -0700
Subject: [PATCH] Support for multiple overlays in minimap + fix for #2813

---
 js/id/ui/map_in_map.js | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js
index 27cbc232c..4f4d95df5 100644
--- a/js/id/ui/map_in_map.js
+++ b/js/id/ui/map_in_map.js
@@ -4,9 +4,9 @@ iD.ui.MapInMap = function(context) {
     function map_in_map(selection) {
 
         var backgroundLayer = iD.TileLayer(),
+            overlayLayers = {},
             dispatch = d3.dispatch('change'),
             gpxLayer = iD.GpxLayer(context, dispatch),
-            overlayLayer = iD.TileLayer(),
             projection = iD.geo.RawMercator(),
             zoom = d3.behavior.zoom()
                 .scaleExtent([ztok(0.5), ztok(24)])
@@ -159,37 +159,39 @@ iD.ui.MapInMap = function(context) {
                 .call(backgroundLayer);
 
             // redraw overlay
-            var overlaySources = context.background().overlayLayerSources(),
-                hasOverlay = false;
-
+            var overlaySources = context.background().overlayLayerSources();
+            var activeOverlayLayers = [];
             for (var i = 0; i < overlaySources.length; i++) {
                 if (overlaySources[i].validZoom(zMini)) {
-                    overlayLayer
+                    if (!overlayLayers[i]) overlayLayers[i] = iD.TileLayer();
+                    activeOverlayLayers.push(overlayLayers[i]
                         .source(overlaySources[i])
                         .projection(projection)
-                        .dimensions(dMini);
-
-                    hasOverlay = true;
-                    break;
+                        .dimensions(dMini));
                 }
             }
 
             var overlay = tiles
                 .selectAll('.map-in-map-overlay')
-                .data(hasOverlay ? [0] : []);
+                .data([0]);
 
             overlay.enter()
                 .append('div')
                 .attr('class', 'map-in-map-overlay');
 
-            overlay.exit()
+            var overlays = overlay
+                .selectAll('div')
+                .data(activeOverlayLayers, function(d) { return d.source().name(); });
+
+            overlays.enter().append('div');
+            overlays.each(function(layer) {
+                d3.select(this).call(layer);
+            });
+
+            overlays.exit()
                 .remove();
 
-            if (hasOverlay) {
-                overlay
-                    .call(overlayLayer);
-            }
-
+            // redraw gpx overlay
             gpxLayer
                 .projection(projection);