From eff9aaeceb9090b7db1ec003b0e4d3ffa3c83b97 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 20 Jun 2017 00:38:49 -0400
Subject: [PATCH] Add example to custom url template prompt (closes #3887)

---
 API.md                   | 2 +-
 data/core.yaml           | 2 +-
 dist/locales/en.json     | 2 +-
 modules/ui/background.js | 3 ++-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/API.md b/API.md
index 3607483de..5463c0ff3 100644
--- a/API.md
+++ b/API.md
@@ -19,7 +19,7 @@ in the hash portion of the URL:
   where the URL can contain the standard tile URL placeholders `{x}`, `{y}` and
   `{z}`/`{zoom}`, `{ty}` for flipped TMS-style Y coordinates, and `{switch:a,b,c}` for
   DNS multiplexing.  Example:
-  `background=custom:http://{switch:a,b,c}.tiles.mapbox.com/v4/examples.map-4l7djmvo/{z}/{x}/{y}.png`
+  `background=custom:https://{switch:a,b,c}.tiles.mapbox.com/v4/examples.map-4l7djmvo/{zoom}/{x}/{y}.png`
 * `gpx` - A custom URL for loading a gpx track.  Specifying a `gpx` parameter will
   automatically enable the gpx layer for display.  Example:
   `gpx=https://tasks.hotosm.org/project/592/task/16.gpx`
diff --git a/data/core.yaml b/data/core.yaml
index 3fa423746..4436d3251 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -347,7 +347,7 @@ en:
     switch: Switch back to this background
     custom: Custom
     custom_button: Edit custom background
-    custom_prompt: "Enter a tile URL template. Valid tokens are {zoom}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme."
+    custom_prompt: "Enter a tile URL template. Valid tokens are {zoom}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.\n\nExample:\n{example}"
     fix_misalignment: Adjust imagery offset
     imagery_source_faq: Where does this imagery come from?
     reset: reset
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 4461b2cab..9e8394f3f 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -431,7 +431,7 @@
             "switch": "Switch back to this background",
             "custom": "Custom",
             "custom_button": "Edit custom background",
-            "custom_prompt": "Enter a tile URL template. Valid tokens are {zoom}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.",
+            "custom_prompt": "Enter a tile URL template. Valid tokens are {zoom}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.\n\nExample:\n{example}",
             "fix_misalignment": "Adjust imagery offset",
             "imagery_source_faq": "Where does this imagery come from?",
             "reset": "reset",
diff --git a/modules/ui/background.js b/modules/ui/background.js
index 9be6240bf..b4f0ffa8a 100644
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -111,7 +111,8 @@ export function uiBackground(context) {
 
         function editCustom() {
             d3.event.preventDefault();
-            var template = window.prompt(t('background.custom_prompt'), customTemplate);
+            var example = 'https://{switch:a,b,c}.tiles.mapbox.com/v4/examples.map-4l7djmvo/{zoom}/{x}/{y}.png';
+            var template = window.prompt(t('background.custom_prompt', { example: example }), customTemplate);
             if (template) {
                 setCustom(template);
             } else {