Rename scaleExtent to zoomExtent, slightly simplify getTiles()

API.md

@@ -219,7 +219,7 @@ Each imagery source should have the following properties:
 Optional properties:
 * `description` - A longer source description which, if included, will be displayed in a popup when viewing the background imagery list
 * `overlay` - If `true`, this is an overlay layer (a transparent layer rendered above base imagery layer). Defaults to `false`
-* `scaleExtent` - Allowable min and max zoom levels, defaults to `[0, 22]`
+* `zoomExtent` - Allowable min and max zoom levels, defaults to `[0, 22]`
 * `polygon` - Array of coordinate rings within which imagery is valid.  If omitted, imagery is assumed to be valid worldwide
 * `overzoom` - Can this imagery be scaled up when zooming in beyond the max zoom?  Defaults to `true`
 * `terms_url` - Url to link to when displaying the imagery terms

data/update_imagery.js

@@ -116,7 +116,7 @@ sources.concat(whitelist).forEach(function(source) {
 
     var extent = source.extent || {};
     if (extent.min_zoom || extent.max_zoom) {
-        im.scaleExtent = [
+        im.zoomExtent = [
             extent.min_zoom || 0,
             extent.max_zoom || 22
         ];

modules/renderer/background_source.js

@@ -48,7 +48,7 @@ export function rendererBackgroundSource(data) {
     var best = !!source.best;
     var template = source.template;
 
-    source.scaleExtent = data.scaleExtent || [0, 22];
+    source.zoomExtent = data.zoomExtent || [0, 22];
     source.overzoom = data.overzoom !== false;
 
 
@@ -171,8 +171,8 @@ export function rendererBackgroundSource(data) {
 
 
     source.validZoom = function(z) {
-        return source.scaleExtent[0] <= z &&
-            (source.overzoom || source.scaleExtent[1] > z);
+        return source.zoomExtent[0] <= z &&
+            (source.overzoom || source.zoomExtent[1] > z);
     };
 
 
@@ -347,13 +347,13 @@ rendererBackgroundSource.Esri = function(data) {
             }
 
             // if any tiles are missing at level 20 we restrict maxZoom to 19
-            esri.scaleExtent[1] = (hasTiles ? 22 : 19);
+            esri.zoomExtent[1] = (hasTiles ? 22 : 19);
         });
     };
 
     esri.getMetadata = function(center, tileCoord, callback) {
         var tileId = tileCoord.slice(0, 3).join('/');
-        var zoom = Math.min(tileCoord[2], esri.scaleExtent[1]);
+        var zoom = Math.min(tileCoord[2], esri.zoomExtent[1]);
         var centerPoint = center[0] + ',' + center[1];  // long, lat (as it should be)
         var unknown = t('info_panels.background.unknown');
         var metadataLayer;

modules/renderer/tile_layer.js

@@ -271,7 +271,7 @@ export function rendererTileLayer(context) {
         if (!arguments.length) return _source;
         _source = _;
         _cache = {};
-        tiler.scaleExtent(_source.scaleExtent);
+        tiler.zoomExtent(_source.zoomExtent);
         return background;
     };
 

modules/services/mapillary.js

@@ -28,7 +28,7 @@ var viewerjs = 'mapillary-js/mapillary.min.js';
 var clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi';
 var maxResults = 1000;
 var tileZoom = 14;
-var tiler = utilTiler().skipNullIsland(true);
+var tiler = utilTiler().zoomExtent([tileZoom, tileZoom]).skipNullIsland(true);
 var dispatch = d3_dispatch('loadedImages', 'loadedSigns');
 var _mlyFallback = false;
 var _mlyCache;
@@ -54,7 +54,7 @@ function maxPageAtZoom(z) {
 
 function loadTiles(which, url, projection) {
     var currZoom = Math.floor(geoScaleToZoom(projection.scale()));
-    var tiles = tiler.getTiles(projection, tileZoom);
+    var tiles = tiler.getTiles(projection);
 
     // abort inflight requests that are no longer needed
     var cache = _mlyCache[which];

modules/services/openstreetcam.js

@@ -35,7 +35,7 @@ import {
 var apibase = 'https://openstreetcam.org';
 var maxResults = 1000;
 var tileZoom = 14;
-var tiler = utilTiler().skipNullIsland(true);
+var tiler = utilTiler().zoomExtent([tileZoom, tileZoom]).skipNullIsland(true);
 var dispatch = d3_dispatch('loadedImages');
 var imgZoom = d3_zoom()
     .extent([[0, 0], [320, 240]])
@@ -63,7 +63,7 @@ function maxPageAtZoom(z) {
 
 function loadTiles(which, url, projection) {
     var currZoom = Math.floor(geoScaleToZoom(projection.scale()));
-    var tiles = tiler.getTiles(projection, tileZoom);
+    var tiles = tiler.getTiles(projection);
 
     // abort inflight requests that are no longer needed
     var cache = _oscCache[which];

modules/services/osm.js

@@ -769,7 +769,7 @@ export default {
         var path = '/api/0.6/map?bbox=';
 
         // determine the needed tiles to cover the view
-        var tiles = tiler.getTiles(projection, _tileZoom);
+        var tiles = tiler.zoomExtent([_tileZoom, _tileZoom]).getTiles(projection);
 
         // abort inflight requests that are no longer needed
         var hadRequests = !_isEmpty(_tileCache.inflight);
@@ -809,7 +809,7 @@ export default {
     // Load notes from the API in tiles
     // GET /api/0.6/notes?bbox=
     loadNotes: function(projection, noteOptions) {
-        noteOptions = _extend({ limit: 10000, closed: 7}, noteOptions);
+        noteOptions = _extend({ limit: 10000, closed: 7 }, noteOptions);
         if (_off) return;
 
         var that = this;
@@ -821,7 +821,7 @@ export default {
         }, 750);
 
         // determine the needed tiles to cover the view
-        var tiles = tiler.getTiles(projection, _noteZoom);
+        var tiles = tiler.zoomExtent([_noteZoom, _noteZoom]).getTiles(projection);
 
         // abort inflight requests that are no longer needed
         abortUnwantedRequests(_noteCache, tiles);

modules/services/streetside.js

@@ -41,7 +41,7 @@ var pannellumViewerCSS = 'pannellum-streetside/pannellum.css';
 var pannellumViewerJS = 'pannellum-streetside/pannellum.js';
 var maxResults = 2000;
 var tileZoom = 16.5;
-var tiler = utilTiler().skipNullIsland(true);
+var tiler = utilTiler().zoomExtent([tileZoom, tileZoom]).skipNullIsland(true);
 var dispatch = d3_dispatch('loadedBubbles', 'viewerChanged');
 var minHfov = 10;         // zoom in degrees:  20, 10, 5
 var maxHfov = 90;         // zoom out degrees
@@ -81,7 +81,7 @@ function localeTimestamp(s) {
  * loadTiles() wraps the process of generating tiles and then fetching image points for each tile.
  */
 function loadTiles(which, url, projection, margin) {
-    var tiles = tiler.margin(margin).getTiles(projection, tileZoom);
+    var tiles = tiler.margin(margin).getTiles(projection);
 
     // abort inflight requests that are no longer needed
     var cache = _ssCache[which];

modules/util/tiler.js

@@ -1,18 +1,19 @@
 import { range as d3_range } from 'd3-array';
-import { geoExtent } from '../geo';
+import { geoExtent, geoScaleToZoom } from '../geo';
 
 
 export function utilTiler() {
-    var _size = [960, 500];
+    var _size = [256, 256];
     var _scale = 256;
-    var _scaleExtent = [0, 20];
+    var _tileSize = 256;
+    var _zoomExtent = [0, 20];
     var _translate = [_size[0] / 2, _size[1] / 2];
     var _margin = 0;
     var _skipNullIsland = false;
 
 
     function bound(val) {
-        return Math.min(_scaleExtent[1], Math.max(_scaleExtent[0], val));
+        return Math.min(_zoomExtent[1], Math.max(_zoomExtent[0], val));
     }
 
 
@@ -32,7 +33,7 @@ export function utilTiler() {
 
 
     function tiler() {
-        var z = Math.max(Math.log(_scale) / Math.LN2 - 8, 0);
+        var z = geoScaleToZoom(_scale / (2 * Math.PI), _tileSize);
         var z0 = bound(Math.round(z));
         var k = Math.pow(2, z - z0 + 8);
         var origin = [
@@ -72,27 +73,23 @@ export function utilTiler() {
 
 
     /**
-     * getTiles() returns array of d3 geo tiles.
-     * Using d3.geo.tiles.js from lib, gets tile extents for each grid tile in a grid created from
-     * an area around (and including) the current map view extents.
+     * getTiles() returns an array of tiles that cover the map view
      */
-    tiler.getTiles = function(projection, tilezoom) {
-        var dimensions = projection.clipExtent()[1];
-        var s = projection.scale() * 2 * Math.PI;
-        var z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
-        var ts = 256 * Math.pow(2, z - tilezoom);
+    tiler.getTiles = function(projection) {
         var origin = [
-            s / 2 - projection.translate()[0],
-            s / 2 - projection.translate()[1]
+            projection.scale() * Math.PI - projection.translate()[0],
+            projection.scale() * Math.PI - projection.translate()[1]
         ];
 
         this
-            .scaleExtent([tilezoom, tilezoom])
-            .scale(s)
-            .size(dimensions)
+            .size(projection.clipExtent()[1])
+            .scale(projection.scale() * 2 * Math.PI)
             .translate(projection.translate());
 
-        return tiler()
+        var tiles = tiler();
+        var ts = tiles.scale;
+
+        return tiles
             .map(function(tile) {
                 if (_skipNullIsland && nearNullIsland(tile)) {
                     return false;
@@ -111,9 +108,16 @@ export function utilTiler() {
     };
 
 
-    tiler.scaleExtent = function(val) {
-        if (!arguments.length) return _scaleExtent;
-        _scaleExtent = val;
+    tiler.tileSize = function(val) {
+        if (!arguments.length) return _tileSize;
+        _tileSize = val;
+        return tiler;
+    };
+
+
+    tiler.zoomExtent = function(val) {
+        if (!arguments.length) return _zoomExtent;
+        _zoomExtent = val;
         return tiler;
     };
 

test/spec/renderer/background_source.js

@@ -44,28 +44,28 @@ describe('iD.rendererBackgroundSource', function() {
     });
 
     it('correctly displays an overlay with no overzoom specified', function() {
-        var source = iD.rendererBackgroundSource({ scaleExtent: [6,16] });
+        var source = iD.rendererBackgroundSource({ zoomExtent: [6,16] });
         expect(source.validZoom(10)).to.be.true;
         expect(source.validZoom(3)).to.be.false;
         expect(source.validZoom(17)).to.be.true;
     });
 
     it('correctly displays an overlay with an invalid overzoom', function() {
-        var source = iD.rendererBackgroundSource({ scaleExtent: [6,16], overzoom: 'gibberish'});
+        var source = iD.rendererBackgroundSource({ zoomExtent: [6,16], overzoom: 'gibberish'});
         expect(source.validZoom(10)).to.be.true;
         expect(source.validZoom(3)).to.be.false;
         expect(source.validZoom(17)).to.be.true;
     });
 
     it('correctly displays an overlay with overzoom:true', function() {
-        var source = iD.rendererBackgroundSource({ scaleExtent: [6,16], overzoom: true});
+        var source = iD.rendererBackgroundSource({ zoomExtent: [6,16], overzoom: true});
         expect(source.validZoom(10)).to.be.true;
         expect(source.validZoom(3)).to.be.false;
         expect(source.validZoom(17)).to.be.true;
     });
 
     it('correctly displays an overlay with overzoom:false', function() {
-        var source = iD.rendererBackgroundSource({ scaleExtent: [6,16], overzoom: false});
+        var source = iD.rendererBackgroundSource({ zoomExtent: [6,16], overzoom: false});
         expect(source.validZoom(10)).to.be.true;
         expect(source.validZoom(3)).to.be.false;
         expect(source.validZoom(17)).to.be.false;