Use single Custom backround source, and add template() accessor

Before, each time the user switched to the custom source, it would
create a brand new custom source with the offset set to [0,0]
(closes #3982)

modules/renderer/background.js

@@ -62,7 +62,7 @@ export function rendererBackground(context) {
 
         var id = b.id;
         if (id === 'custom') {
-            id = 'custom:' + b.template;
+            id = 'custom:' + b.template();
         }
 
         if (id) {
@@ -133,14 +133,15 @@ export function rendererBackground(context) {
         // test source against OSM imagery blacklists..
         var blacklists = context.connection().imageryBlacklists();
 
-        var fail = false,
+        var template = d.template(),
+            fail = false,
             tested = 0,
             regex, i;
 
         for (i = 0; i < blacklists.length; i++) {
             try {
                 regex = new RegExp(blacklists[i]);
-                fail = regex.test(d.template);
+                fail = regex.test(template);
                 tested++;
                 if (fail) break;
             } catch (e) {
@@ -151,7 +152,7 @@ export function rendererBackground(context) {
         // ensure at least one test was run.
         if (!tested) {
             regex = new RegExp('.*\.google(apis)?\..*/(vt|kh)[\?/].*([xyz]=.*){3}.*');
-            fail = regex.test(d.template);
+            fail = regex.test(template);
         }
 
         baseLayer.source(!fail ? d : rendererBackgroundSource.None());

modules/renderer/background_source.js

@@ -29,7 +29,8 @@ export function rendererBackgroundSource(data) {
         offset = [0, 0],
         name = source.name,
         description = source.description,
-        best = !!source.best;
+        best = !!source.best,
+        template = source.template;
 
     source.scaleExtent = data.scaleExtent || [0, 20];
     source.overzoom = data.overzoom !== false;
@@ -78,8 +79,15 @@ export function rendererBackgroundSource(data) {
     };
 
 
+    source.template = function(_) {
+        if (!arguments.length) return template;
+        if (source.id === 'custom') template = _;
+        return source;
+    };
+
+
     source.url = function(coord) {
-        return data.template
+        return template
             .replace('{x}', coord[0])
             .replace('{y}', coord[1])
             // TMS-flipped y coordinate
@@ -253,7 +261,7 @@ rendererBackgroundSource.Custom = function(template) {
 
 
     source.imageryUsed = function() {
-        return 'Custom (' + template + ')';
+        return 'Custom (' + source.template() + ')';
     };
 
 

modules/ui/background.js

@@ -25,6 +25,7 @@ export function uiBackground(context) {
         opacityDefault = (context.storage('background-opacity') !== null) ?
             (+context.storage('background-opacity')) : 1.0,
         customTemplate = context.storage('background-custom-template') || '',
+        customSource = rendererBackgroundSource.Custom(customTemplate),
         previous;
 
     // Can be 0 from <1.3.0 use or due to issue #1923.
@@ -112,23 +113,22 @@ export function uiBackground(context) {
         function editCustom() {
             d3.event.preventDefault();
             var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
-            var template = window.prompt(t('background.custom_prompt', { example: example }), customTemplate);
+            var template = window.prompt(
+                t('background.custom_prompt', { example: example }),
+                customSource.template() || example
+            );
+
             if (template) {
-                setCustom(template);
+                context.storage('background-custom-template', template);
+                customTemplate = template;
+                customSource.template(template);
+                clickSetSource(customSource);
             } else {
                 selectLayer();
             }
         }
 
 
-        function setCustom(template) {
-            context.storage('background-custom-template', template);
-            var d = rendererBackgroundSource.Custom(template);
-            content.selectAll('.custom_layer').datum(d);
-            clickSetSource(d);
-        }
-
-
         function clickSetOverlay(d) {
             d3.event.preventDefault();
             context.background().toggleOverlayLayer(d);
@@ -187,12 +187,6 @@ export function uiBackground(context) {
             overlayList.call(drawList, 'checkbox', clickSetOverlay, function(d) { return d.overlay; });
 
             selectLayer();
-
-            var source = context.background().baseLayerSource();
-            if (source.id === 'custom') {
-                customTemplate = source.template;
-            }
-
             updateOffsetVal();
         }
 
@@ -419,7 +413,7 @@ export function uiBackground(context) {
         var custom = backgroundList
             .append('li')
             .attr('class', 'custom_layer')
-            .datum(rendererBackgroundSource.Custom());
+            .datum(customSource);
 
         custom
             .append('button')
@@ -438,8 +432,8 @@ export function uiBackground(context) {
             .attr('type', 'radio')
             .attr('name', 'layers')
             .on('change', function () {
-                if (customTemplate) {
-                    setCustom(customTemplate);
+                if (customSource.template()) {
+                    clickSetSource(customSource);
                 } else {
                     editCustom();
                 }