From 1b6e44bc147b56a14a8544a558c6ce97f113473f Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Wed, 17 Jun 2020 12:40:36 -0400
Subject: [PATCH] Support `{@2x}` and `{r}` as parameters for high-res custom
 TMS tiles (close #7712) Use retina tiles for the locator overlay on supported
 displays

---
 data/imagery.json                     |  2 +-
 modules/renderer/background_source.js | 17 ++++++++++++++++-
 scripts/update_imagery.js             |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/data/imagery.json b/data/imagery.json
index d3a5f5bb0..f282be6d6 100644
--- a/data/imagery.json
+++ b/data/imagery.json
@@ -44311,7 +44311,7 @@
     "id": "mapbox_locator_overlay",
     "name": "Locator Overlay",
     "type": "tms",
-    "template": "https://api.mapbox.com/styles/v1/openstreetmap/ckasmteyi1tda1ipfis6wqhuq/tiles/256/{zoom}/{x}/{y}?access_token=pk.eyJ1Ijoib3BlbnN0cmVldG1hcCIsImEiOiJja2JjaDZoMm8wMXU5MzJvMmZwOHY3ZHRyIn0.nzEnT3XUHOzDoZxawHYGxg",
+    "template": "https://api.mapbox.com/styles/v1/openstreetmap/ckasmteyi1tda1ipfis6wqhuq/tiles/256/{zoom}/{x}/{y}{@2x}?access_token=pk.eyJ1Ijoib3BlbnN0cmVldG1hcCIsImEiOiJja2JjaDZoMm8wMXU5MzJvMmZwOHY3ZHRyIn0.nzEnT3XUHOzDoZxawHYGxg",
     "zoomExtent": [0, 16],
     "overzoom": false,
     "terms_url": "https://www.mapbox.com/about/maps",
diff --git a/modules/renderer/background_source.js b/modules/renderer/background_source.js
index 892ad39a5..6d39bb270 100644
--- a/modules/renderer/background_source.js
+++ b/modules/renderer/background_source.js
@@ -7,6 +7,19 @@ import { utilQsString, utilStringQs } from '../util';
 import { utilAesDecrypt } from '../util/aes';
 
 
+var isRetina = window.devicePixelRatio && window.devicePixelRatio >= 2;
+
+// listen for DPI change, e.g. when dragging a browser window from a retina to non-retina screen
+window.matchMedia(`
+        (-webkit-min-device-pixel-ratio: 2), /* Safari */
+        (min-resolution: 2dppx),             /* standard */
+        (min-resolution: 192dpi)             /* fallback */
+    `).addListener(function() {
+
+    isRetina = window.devicePixelRatio && window.devicePixelRatio >= 2;
+});
+
+
 function localeDateString(s) {
     if (!s) return null;
     var options = { day: 'numeric', month: 'short', year: 'numeric' };
@@ -172,7 +185,9 @@ export function rendererBackgroundSource(data) {
                 .replace('{y}', coord[1])
                 // TMS-flipped y coordinate
                 .replace(/\{[t-]y\}/, Math.pow(2, coord[2]) - coord[1] - 1)
-                .replace(/\{z(oom)?\}/, coord[2]);
+                .replace(/\{z(oom)?\}/, coord[2])
+                // only fetch retina tiles for retina screens
+                .replace(/\{@2x\}|\{r\}/, isRetina ? '@2x' : '');
 
         } else if (source.type === 'bing') {
             result = result
diff --git a/scripts/update_imagery.js b/scripts/update_imagery.js
index 287626ff4..f3f0f1921 100644
--- a/scripts/update_imagery.js
+++ b/scripts/update_imagery.js
@@ -123,6 +123,8 @@ sources.concat(keep).forEach(source => {
     im.tileSize = 512;
   } else if (source.id === 'mtbmap-no') {
     im.tileSize = 512;
+  } else if (source.id === 'mapbox_locator_overlay') {
+    im.template = im.template.replace('{y}', '{y}{@2x}');
   }
 
   // Some WMS sources are supported, check projection