Support multiple overlays in hash

data/imagery.json

@@ -51,6 +51,7 @@
     {
         "name": "TIGER 2012 Roads Overlay",
         "template": "http://{t}.tile.openstreetmap.us/tiger2012_roads_expanded/{z}/{x}/{y}.png",
+        "sourcetag": "TIGER 2012",
         "overlay": true,
         "scaleExtent": [
             16,

js/id/renderer/background.js

@@ -22,6 +22,31 @@ iD.Background = function(context) {
         });
     }
 
+    function updateHash() {
+        var b = background.baseLayerSource().data,
+            o = overlayLayers.map(function (d) { return d.source().data.sourcetag; }).join(','),
+            q = iD.util.stringQs(location.hash.substring(1));
+
+        var tag = b && b.sourcetag;
+        if (!tag && b && b.name === 'Custom') {
+            tag = 'custom:' + b.template;
+        }
+
+        if (tag) {
+            q.background = tag;
+        } else {
+            delete q.background;
+        }
+
+        if (o) {
+            q.overlays = o;
+        } else {
+            delete q.overlays;
+        }
+
+        location.replace('#' + iD.util.qsString(q, true));
+    }
+
     function background(selection) {
         var base = selection.selectAll('.background-layer')
             .data([0]);
@@ -73,8 +98,11 @@ iD.Background = function(context) {
 
     background.baseLayerSource = function(d) {
         if (!arguments.length) return baseLayer.source();
+
         baseLayer.source(d);
         dispatch.change();
+        updateHash();
+
         if (d.data.name === 'Custom (customized)') {
             context.history()
                 .imagery_used('Custom (' + d.data.template + ')');
@@ -82,6 +110,7 @@ iD.Background = function(context) {
             context.history()
                 .imagery_used(d.data.sourcetag || d.data.name);
         }
+
         return background;
     };
 
@@ -121,6 +150,7 @@ iD.Background = function(context) {
             if (layer.source() === d) {
                 overlayLayers.splice(i, 1);
                 dispatch.change();
+                updateHash();
                 return;
             }
         }
@@ -132,6 +162,7 @@ iD.Background = function(context) {
 
         overlayLayers.push(layer);
         dispatch.change();
+        updateHash();
     };
 
     background.nudge = function(d, zoom) {
@@ -159,5 +190,11 @@ iD.Background = function(context) {
         background.baseLayerSource(findSource(chosen) || findSource("Bing"));
     }
 
+    var overlays = (q.overlays || '').split(',');
+    overlays.forEach(function(overlay) {
+        overlay = findSource(overlay);
+        if (overlay) background.toggleOverlayLayer(overlay);
+    });
+
     return d3.rebind(background, dispatch, 'on');
 };

js/id/renderer/tile_layer.js

@@ -169,20 +169,6 @@ iD.TileLayer = function(backgroundType) {
         return background;
     };
 
-    function setHash(source) {
-        var tag = source.data && source.data.sourcetag;
-        if (!tag && source.data && source.data.name === 'Custom') {
-            tag = 'custom:' + source.data.template;
-        }
-        var q = iD.util.stringQs(location.hash.substring(1));
-        if (tag) {
-            q[backgroundType] = tag;
-            location.replace('#' + iD.util.qsString(q, true));
-        } else {
-            location.replace('#' + iD.util.qsString(_.omit(q, backgroundType), true));
-        }
-    }
-
     background.source = function(_) {
         if (!arguments.length) return source;
         source = _;
@@ -193,7 +179,6 @@ iD.TileLayer = function(backgroundType) {
         }
         cache = {};
         tile.scaleExtent((source.data && source.data.scaleExtent) || [1, 20]);
-        setHash(source);
         return background;
     };