From 52dc6c280fab25c77c1daaa6b373009459c81cf1 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sun, 22 Jul 2018 01:43:56 -0400
Subject: [PATCH] Preparation for non-256px tileSizes in sources

---
 modules/renderer/background_source.js |  6 +++---
 modules/renderer/tile_layer.js        | 13 +++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/modules/renderer/background_source.js b/modules/renderer/background_source.js
index f580a6742..005500a9a 100644
--- a/modules/renderer/background_source.js
+++ b/modules/renderer/background_source.js
@@ -48,10 +48,10 @@ export function rendererBackgroundSource(data) {
     var best = !!source.best;
     var template = source.template;
 
+    source.tileSize = data.tileSize || 256;
     source.zoomExtent = data.zoomExtent || [0, 22];
     source.overzoom = data.overzoom !== false;
 
-
     source.offset = function(_) {
         if (!arguments.length) return offset;
         offset = _;
@@ -133,8 +133,8 @@ export function rendererBackgroundSource(data) {
             var minXmaxY = tileToProjectedCoords(coord[0], coord[1], coord[2]);
             var maxXminY = tileToProjectedCoords(coord[0]+1, coord[1]+1, coord[2]);
             return template
-                .replace('{width}', 256)
-                .replace('{height}', 256)
+                .replace('{width}', this.tileSize)
+                .replace('{height}', this.tileSize)
                 .replace('{proj}', this.projection)
                 .replace('{bbox}', minXmaxY.x + ',' + maxXminY.y + ',' + maxXminY.x + ',' + minXmaxY.y);
         }
diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js
index d7d93bef3..03af506d6 100644
--- a/modules/renderer/tile_layer.js
+++ b/modules/renderer/tile_layer.js
@@ -6,10 +6,10 @@ import { utilPrefixCSSProperty, utilTiler } from '../util';
 
 
 export function rendererTileLayer(context) {
-    var tileSize = 256;
     var transformProp = utilPrefixCSSProperty('Transform');
     var tiler = utilTiler();
 
+    var _tileSize = 256;
     var _projection;
     var _cache = {};
     var _tileOrigin;
@@ -19,7 +19,7 @@ export function rendererTileLayer(context) {
 
     function tileSizeAtZoom(d, z) {
         var EPSILON = 0.002;
-        return ((tileSize * Math.pow(2, z - d[2])) / tileSize) + EPSILON;
+        return ((_tileSize * Math.pow(2, z - d[2])) / _tileSize) + EPSILON;
     }
 
 
@@ -64,7 +64,7 @@ export function rendererTileLayer(context) {
 
     // Update tiles based on current state of `projection`.
     function background(selection) {
-        _zoom = geoScaleToZoom(_projection.scale(), tileSize);
+        _zoom = geoScaleToZoom(_projection.scale(), _tileSize);
 
         var pixelOffset;
         if (_source) {
@@ -140,7 +140,7 @@ export function rendererTileLayer(context) {
         }
 
         function imageTransform(d) {
-            var ts = tileSize * Math.pow(2, _zoom - d[2]);
+            var ts = _tileSize * Math.pow(2, _zoom - d[2]);
             var scale = tileSizeAtZoom(d, _zoom);
             return 'translate(' +
                 ((d[0] * ts) - _tileOrigin[0]) + 'px,' +
@@ -149,7 +149,7 @@ export function rendererTileLayer(context) {
         }
 
         function tileCenter(d) {
-            var ts = tileSize * Math.pow(2, _zoom - d[2]);
+            var ts = _tileSize * Math.pow(2, _zoom - d[2]);
             return [
                 ((d[0] * ts) - _tileOrigin[0] + (ts / 2)),
                 ((d[1] * ts) - _tileOrigin[1] + (ts / 2))
@@ -270,8 +270,9 @@ export function rendererTileLayer(context) {
     background.source = function(_) {
         if (!arguments.length) return _source;
         _source = _;
+        _tileSize = _source.tileSize;
         _cache = {};
-        tiler.zoomExtent(_source.zoomExtent);
+        tiler.tileSize(_source.tileSize).zoomExtent(_source.zoomExtent);
         return background;
     };