All imagery layers should just be owned by rendererBackground()

This moves management of the custom layer out of uiBackground()

modules/renderer/background.js

@@ -15,13 +15,6 @@ export function rendererBackground(context) {
         backgroundSources;
 
 
-    function findSource(id) {
-        return _.find(backgroundSources, function(d) {
-            return d.id && d.id === id;
-        });
-    }
-
-
     function background(selection) {
         var base = selection.selectAll('.layer-background')
             .data([0]);
@@ -155,15 +148,22 @@ export function rendererBackground(context) {
             fail = regex.test(template);
         }
 
-        baseLayer.source(!fail ? d : rendererBackgroundSource.None());
+        baseLayer.source(!fail ? d : background.findSource('none'));
         dispatch.call('change');
         background.updateImagery();
         return background;
     };
 
 
+    background.findSource = function(id) {
+        return _.find(backgroundSources, function(d) {
+            return d.id && d.id === id;
+        });
+    };
+
+
     background.bing = function() {
-        background.baseLayerSource(findSource('Bing'));
+        background.baseLayerSource(background.findSource('Bing'));
     };
 
 
@@ -229,10 +229,12 @@ export function rendererBackground(context) {
 
         var dataImagery = data.imagery || [],
             q = utilStringQs(window.location.hash.substring(1)),
-            chosen = q.background || q.layer,
+            requested = q.background || q.layer,
             extent = parseMap(q.map),
+            first,
             best;
 
+        // Add all the available imagery sources
         backgroundSources = dataImagery.map(function(source) {
             if (source.type === 'bing') {
                 return rendererBackgroundSource.Bing(source, dispatch);
@@ -241,18 +243,33 @@ export function rendererBackground(context) {
             }
         });
 
+        first = backgroundSources.length && backgroundSources[0];
+
+        // Add 'None'
         backgroundSources.unshift(rendererBackgroundSource.None());
 
-        if (!chosen && extent) {
+        // Add 'Custom'
+        var template = context.storage('background-custom-template') || '';
+        var custom = rendererBackgroundSource.Custom(template);
+        backgroundSources.unshift(custom);
+
+
+        // Decide which background layer to display
+        if (!requested && extent) {
             best = _.find(this.sources(extent), function(s) { return s.best(); });
         }
-
-        if (chosen && chosen.indexOf('custom:') === 0) {
-            var template = chosen.replace(/^custom:/, '');
-            background.baseLayerSource(rendererBackgroundSource.Custom(template));
+        if (requested && requested.indexOf('custom:') === 0) {
+            template = requested.replace(/^custom:/, '');
+            background.baseLayerSource(custom.template(template));
             context.storage('background-custom-template', template);
         } else {
-            background.baseLayerSource(findSource(chosen) || best || findSource('Bing') || backgroundSources[1] || backgroundSources[0]);
+            background.baseLayerSource(
+                background.findSource(requested) ||
+                best ||
+                background.findSource('Bing') ||
+                first ||
+                background.findSource('none')
+            );
         }
 
         var locator = _.find(backgroundSources, function(d) {
@@ -265,7 +282,7 @@ export function rendererBackground(context) {
 
         var overlays = (q.overlays || '').split(',');
         overlays.forEach(function(overlay) {
-            overlay = findSource(overlay);
+            overlay = background.findSource(overlay);
             if (overlay) {
                 background.toggleOverlayLayer(overlay);
             }

modules/renderer/tile_layer.js

@@ -3,7 +3,6 @@ import { t } from '../util/locale';
 import { d3geoTile } from '../lib/d3.geo.tile';
 import { geoEuclideanDistance } from '../geo';
 import { utilPrefixCSSProperty } from '../util';
-import { rendererBackgroundSource } from './background_source.js';
 
 
 export function rendererTileLayer(context) {
@@ -14,7 +13,7 @@ export function rendererTileLayer(context) {
         tileOrigin,
         z,
         transformProp = utilPrefixCSSProperty('Transform'),
-        source = rendererBackgroundSource.None();
+        source;
 
 
     // blacklist overlay tiles around Null Island..
@@ -92,6 +91,7 @@ export function rendererTileLayer(context) {
     // Important that this part not depend on `projection` because it's
     // rentered when tiles load/error (see #644).
     function render(selection) {
+        if (!source) return;
         var requests = [];
         var showDebug = context.getDebug('tile') && !source.overlay;
 

modules/ui/background.js

@@ -2,7 +2,6 @@ import * as d3 from 'd3';
 import _ from 'lodash';
 import { d3keybinding } from '../lib/d3.keybinding.js';
 import { t, textDirection } from '../util/locale';
-import { rendererBackgroundSource } from '../renderer/index';
 import { geoMetersToOffset, geoOffsetToMeters } from '../geo/index';
 import { utilDetect } from '../util/detect';
 import { utilSetTransform } from '../util/index';
@@ -24,8 +23,7 @@ export function uiBackground(context) {
             ['bottom', [0, 0.5]]],
         opacityDefault = (context.storage('background-opacity') !== null) ?
             (+context.storage('background-opacity')) : 1.0,
-        customTemplate = context.storage('background-custom-template') || '',
-        customSource = rendererBackgroundSource.Custom(customTemplate),
+        customSource = context.background().findSource('custom'),
         previous;
 
     // Can be 0 from <1.3.0 use or due to issue #1923.
@@ -92,7 +90,7 @@ export function uiBackground(context) {
                 return context.background().showsLayer(d);
             }
 
-            content.selectAll('.layer, .custom_layer')
+            content.selectAll('.layer')
                 .classed('active', active)
                 .classed('switch', function(d) { return d === previous; })
                 .call(setTooltips)
@@ -102,6 +100,10 @@ export function uiBackground(context) {
 
 
         function clickSetSource(d) {
+            if (d.id === 'custom' && !d.template()) {
+                return editCustom();
+            }
+
             d3.event.preventDefault();
             previous = context.background().baseLayerSource();
             context.background().baseLayerSource(d);
@@ -120,7 +122,6 @@ export function uiBackground(context) {
 
             if (template) {
                 context.storage('background-custom-template', template);
-                customTemplate = template;
                 customSource.template(template);
                 clickSetSource(customSource);
             } else {
@@ -149,10 +150,20 @@ export function uiBackground(context) {
                 .remove();
 
             var enter = layerLinks.enter()
-                .insert('li', '.custom_layer')
+                .append('li')
                 .attr('class', 'layer')
+                .classed('layer-custom', function(d) { return d.id === 'custom'; })
                 .classed('best', function(d) { return d.best(); });
 
+            enter.filter(function(d) { return d.id === 'custom'; })
+                .append('button')
+                .attr('class', 'layer-browse')
+                .call(tooltip()
+                    .title(t('background.custom_button'))
+                    .placement((textDirection === 'rtl') ? 'right' : 'left'))
+                .on('click', editCustom)
+                .call(svgIcon('#icon-search'));
+
             enter.filter(function(d) { return d.best(); })
                 .append('div')
                 .attr('class', 'best')
@@ -342,7 +353,7 @@ export function uiBackground(context) {
                         .duration(200)
                         .style('right', '0px');
 
-                    content.selectAll('.layer, .custom_layer')
+                    content.selectAll('.layer')
                         .call(setTooltips);
 
                 } else {
@@ -409,46 +420,13 @@ export function uiBackground(context) {
             .style('opacity', function(d) { return 1.25 - d; });
 
 
-        /* background switcher */
+        /* background list */
 
         var backgroundList = content
             .append('ul')
             .attr('class', 'layer-list')
             .attr('dir', 'auto');
 
-        var custom = backgroundList
-            .append('li')
-            .attr('class', 'custom_layer')
-            .datum(customSource);
-
-        custom
-            .append('button')
-            .attr('class', 'layer-browse')
-            .call(tooltip()
-                .title(t('background.custom_button'))
-                .placement((textDirection === 'rtl') ? 'right' : 'left'))
-            .on('click', editCustom)
-            .call(svgIcon('#icon-search'));
-
-        var label = custom
-            .append('label');
-
-        label
-            .append('input')
-            .attr('type', 'radio')
-            .attr('name', 'layers')
-            .on('change', function () {
-                if (customSource.template()) {
-                    clickSetSource(customSource);
-                } else {
-                    editCustom();
-                }
-            });
-
-        label
-            .append('span')
-            .text(t('background.custom'));
-
         content
             .append('div')
             .attr('class', 'imagery-faq')
@@ -460,6 +438,9 @@ export function uiBackground(context) {
             .append('span')
             .text(t('background.imagery_source_faq'));
 
+
+        /* overlay list */
+
         var overlayList = content
             .append('ul')
             .attr('class', 'layer-list');