Merge pull request #5148 from openstreetmap/refactor-loadTiles

moved getTiles and filtering to utils

modules/lib/d3.geo.tile.js

@@ -1,93 +0,0 @@
-import { range as d3_range } from 'd3-array';
-
-
-export function d3geoTile() {
-    var _size = [960, 500];
-    var _scale = 256;
-    var _scaleExtent = [0, 20];
-    var _translate = [_size[0] / 2, _size[1] / 2];
-    var _zoomDelta = 0;
-    var _margin = 0;
-
-    function bound(val) {
-        return Math.min(_scaleExtent[1], Math.max(_scaleExtent[0], val));
-    }
-
-    function tile() {
-        var z = Math.max(Math.log(_scale) / Math.LN2 - 8, 0);
-        var z0 = bound(Math.round(z + _zoomDelta));
-        var k = Math.pow(2, z - z0 + 8);
-        var origin = [
-            (_translate[0] - _scale / 2) / k,
-            (_translate[1] - _scale / 2) / k
-        ];
-
-        var cols = d3_range(
-            Math.max(0, Math.floor(-origin[0]) - _margin),
-            Math.max(0, Math.ceil(_size[0] / k - origin[0]) + _margin)
-        );
-        var rows = d3_range(
-            Math.max(0, Math.floor(-origin[1]) - _margin),
-            Math.max(0, Math.ceil(_size[1] / k - origin[1]) + _margin)
-        );
-
-        var tiles = [];
-        for (var i = 0; i < rows.length; i++) {
-            var y = rows[i];
-            for (var j = 0; j < cols.length; j++) {
-                var x = cols[j];
-
-                if (i >= _margin && i <= rows.length - _margin &&
-                    j >= _margin && j <= cols.length - _margin) {
-                    tiles.unshift([x, y, z0]);  // tiles in view at beginning
-                } else {
-                    tiles.push([x, y, z0]);     // tiles in margin at the end
-                }
-            }
-        }
-
-        tiles.translate = origin;
-        tiles.scale = k;
-
-        return tiles;
-    }
-
-    tile.scaleExtent = function(val) {
-        if (!arguments.length) return _scaleExtent;
-        _scaleExtent = val;
-        return tile;
-    };
-
-    tile.size = function(val) {
-        if (!arguments.length) return _size;
-        _size = val;
-        return tile;
-    };
-
-    tile.scale = function(val) {
-        if (!arguments.length) return _scale;
-        _scale = val;
-        return tile;
-    };
-
-    tile.translate = function(val) {
-        if (!arguments.length) return _translate;
-        _translate = val;
-        return tile;
-    };
-
-    tile.zoomDelta = function(val) {
-        if (!arguments.length) return _zoomDelta;
-        _zoomDelta = +val;
-        return tile;
-    };
-
-    // number to extend the rows/columns beyond those covering the viewport
-    tile.margin = function(val) {
-        if (!arguments.length) return _margin;
-        _margin = +val;
-        return tile;
-    };
-
-    return tile;
-}

modules/lib/index.js

@@ -1,3 +1,2 @@
 export { d3combobox } from './d3.combobox';
-export { d3geoTile } from './d3.geo.tile';
 export { d3keybinding } from './d3.keybinding';

modules/renderer/tile_layer.js

@@ -1,15 +1,14 @@
 import { select as d3_select } from 'd3-selection';
 import { t } from '../util/locale';
 
-import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
 import { geoScaleToZoom, geoVecLength } from '../geo';
-import { utilPrefixCSSProperty } from '../util';
+import { utilPrefixCSSProperty, utilTile } from '../util';
 
 
 export function rendererTileLayer(context) {
     var tileSize = 256;
     var transformProp = utilPrefixCSSProperty('Transform');
-    var geotile = d3_geoTile();
+    var geotile = utilTile();
 
     var _projection;
     var _cache = {};

modules/services/mapillary.js

@@ -18,10 +18,12 @@ import {
 
 import rbush from 'rbush';
 
-import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
 import { geoExtent } from '../geo';
 import { svgDefs } from '../svg';
-import { utilQsString, utilRebind } from '../util';
+import { utilDetect } from '../util/detect';
+import { utilQsString, utilRebind, utilTile } from '../util';
+
+var geoTile = utilTile();
 
 var apibase = 'https://a.mapillary.com/v3/';
 var viewercss = 'mapillary-js/mapillary.min.css';
@@ -63,33 +65,18 @@ function maxPageAtZoom(z) {
     if (z > 18)   return 80;
 }
 
-function getTiles(projection) {
-    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);
-    var origin = [
-        s / 2 - projection.translate()[0],
-        s / 2 - projection.translate()[1]
-    ];
 
-    return d3_geoTile()
-        .scaleExtent([tileZoom, tileZoom])
-        .scale(s)
-        .size(projection.clipExtent()[1])
-        .translate(projection.translate())()
-        .map(function(tile) {
-            var x = tile[0] * ts - origin[0];
-            var y = tile[1] * ts - origin[1];
-
-            return {
-                id: tile.toString(),
-                xyz: tile,
-                extent: geoExtent(
-                    projection.invert([x, y + ts]),
-                    projection.invert([x + ts, y])
-                )
-            };
-        });
+function localeTimestamp(s) {
+    if (!s) return null;
+    var detected = utilDetect();
+    var options = {
+        day: 'numeric', month: 'short', year: 'numeric',
+        hour: 'numeric', minute: 'numeric', second: 'numeric',
+        timeZone: 'UTC'
+    };
+    var d = new Date(s);
+    if (isNaN(d.getTime())) return null;
+    return d.toLocaleString(detected.locale, options);
 }
 
 
@@ -97,15 +84,11 @@ function loadTiles(which, url, projection) {
     var s = projection.scale() * 2 * Math.PI;
     var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
 
-    var tiles = getTiles(projection).filter(function(t) {
-        return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
-    });
+    var dimension = projection.clipExtent()[1];
+    var tiles = geoTile.getTiles(projection, dimension, tileZoom, 0);
+    tiles = geoTile.filterNullIsland(tiles);
 
-    _filter(which.inflight, function(v, k) {
-        var wanted = _find(tiles, function(tile) { return k === (tile.id + ',0'); });
-        if (!wanted) delete which.inflight[k];
-        return !wanted;
-    }).map(abortRequest);
+    geoTile.removeInflightRequests(which, tiles, abortRequest, ',0');
 
     tiles.forEach(function(tile) {
         loadNextTilePage(which, currZoom, url, tile);

modules/services/openstreetcam.js

@@ -22,9 +22,9 @@ import {
 
 import rbush from 'rbush';
 
-import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
 import { geoExtent } from '../geo';
 
+import { utilTile } from '../util';
 import { utilDetect } from '../util/detect';
 
 import {
@@ -33,6 +33,7 @@ import {
     utilSetTransform
 } from '../util';
 
+var geoTile = utilTile();
 
 var apibase = 'https://openstreetcam.org';
 var maxResults = 1000;
@@ -74,48 +75,15 @@ function maxPageAtZoom(z) {
 }
 
 
-function getTiles(projection) {
-    var s = projection.scale() * 2 * Math.PI,
-        z = Math.max(Math.log(s) / Math.log(2) - 8, 0),
-        ts = 256 * Math.pow(2, z - tileZoom),
-        origin = [
-            s / 2 - projection.translate()[0],
-            s / 2 - projection.translate()[1]];
-
-    return d3_geoTile()
-        .scaleExtent([tileZoom, tileZoom])
-        .scale(s)
-        .size(projection.clipExtent()[1])
-        .translate(projection.translate())()
-        .map(function(tile) {
-            var x = tile[0] * ts - origin[0],
-                y = tile[1] * ts - origin[1];
-
-            return {
-                id: tile.toString(),
-                xyz: tile,
-                extent: geoExtent(
-                    projection.invert([x, y + ts]),
-                    projection.invert([x + ts, y])
-                )
-            };
-        });
-}
-
-
 function loadTiles(which, url, projection) {
     var s = projection.scale() * 2 * Math.PI,
         currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
 
-    var tiles = getTiles(projection).filter(function(t) {
-            return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
-        });
+    var dimension = projection.clipExtent()[1];
+    var tiles = geoTile.getTiles(projection, dimension, tileZoom, 0);
+    tiles = geoTile.filterNullIsland(tiles);
 
-    _filter(which.inflight, function(v, k) {
-        var wanted = _find(tiles, function(tile) { return k === (tile.id + ',0'); });
-        if (!wanted) delete which.inflight[k];
-        return !wanted;
-    }).map(abortRequest);
+    geoTile.removeInflightRequests(which, tiles, abortRequest, ',0');
 
     tiles.forEach(function(tile) {
         loadNextTilePage(which, currZoom, url, tile);

modules/services/osm.js

@@ -17,7 +17,6 @@ import { xml as d3_xml } from 'd3-request';
 
 import osmAuth from 'osm-auth';
 import { JXON } from '../util/jxon';
-import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
 import { geoExtent, geoVecAdd } from '../geo';
 
 import {
@@ -31,9 +30,11 @@ import {
 import {
     utilRebind,
     utilIdleWorker,
+    utilTile,
     utilQsString
 } from '../util';
 
+var geoTile = utilTile();
 
 var dispatch = d3_dispatch('authLoading', 'authDone', 'change', 'loading', 'loaded', 'loadedNotes');
 var urlroot = 'https://www.openstreetmap.org';
@@ -777,44 +778,13 @@ export default {
             tilezoom = _tileZoom;
         }
 
-        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);
-        var origin = [
-            s / 2 - projection.translate()[0],
-            s / 2 - projection.translate()[1]
-        ];
-
-        // what tiles cover the view?
-        var tiler = d3_geoTile()
-            .scaleExtent([tilezoom, tilezoom])
-            .scale(s)
-            .size(dimensions)
-            .translate(projection.translate());
-
-        var tiles = tiler().map(function(tile) {
-            var x = tile[0] * ts - origin[0];
-            var y = tile[1] * ts - origin[1];
-
-            return {
-                id: tile.toString(),
-                extent: geoExtent(
-                    projection.invert([x, y + ts]),
-                    projection.invert([x + ts, y])
-                )
-            };
-        });
+        // get tiles
+        var tiles = geoTile.getTiles(projection, dimensions, tilezoom, 0);
+        tiles = geoTile.filterNullIsland(tiles);
 
         // remove inflight requests that no longer cover the view..
         var hadRequests = !_isEmpty(cache.inflight);
-        _filter(cache.inflight, function(v, i) {
-            var wanted = _find(tiles, function(tile) { return i === tile.id; });
-            if (!wanted) {
-                delete cache.inflight[i];
-            }
-            return !wanted;
-        }).map(abortRequest);
-
+        geoTile.removeInflightRequests(cache, tiles, abortRequest);
         if (hadRequests && !loadingNotes && _isEmpty(cache.inflight)) {
             dispatch.call('loaded');    // stop the spinner
         }

modules/services/streetside.js

@@ -17,7 +17,6 @@ import {
 import rbush from 'rbush';
 import { t } from '../util/locale';
 import { jsonpRequest } from '../util/jsonp_request';
-import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
 
 import {
     geoExtent,
@@ -29,10 +28,12 @@ import {
 } from '../geo';
 
 import { utilDetect } from '../util/detect';
-import { utilQsString, utilRebind } from '../util';
+import { utilQsString, utilRebind, utilTile } from '../util';
 
 import Q from 'q';
 
+var geoTile = utilTile();
+
 var bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?';
 var streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/';
 var bubbleAppKey = 'AuftgJsO0Xs8Ts4M1xZUQJQXJNsvmh3IV8DkNieCiy3tCwCUMq76-WpkrBtNAuEm';
@@ -85,46 +86,6 @@ function localeTimestamp(s) {
     return d.toLocaleString(detected.locale, options);
 }
 
-/**
- * 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.
- */
-function getTiles(projection, margin) {
-    // s is the current map scale
-    // z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground.
-    // ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification.
-    // See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx.
-    // As used here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels).
-    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);
-    var origin = [
-        s / 2 - projection.translate()[0],
-        s / 2 - projection.translate()[1]
-    ];
-
-    var tiler = d3_geoTile()
-        .scaleExtent([tileZoom, tileZoom])
-        .scale(s)
-        .size(projection.clipExtent()[1])
-        .translate(projection.translate())
-        .margin(margin || 0);   // request nearby tiles so we can connect sequences.
-
-    return tiler()
-        .map(function(tile) {
-            var x = tile[0] * ts - origin[0];
-            var y = tile[1] * ts - origin[1];
-            return {
-                id: tile.toString(),
-                xyz: tile,
-                extent: geoExtent(
-                    projection.invert([x, y + ts]),
-                    projection.invert([x + ts, y])
-                )
-            };
-        });
-}
 
 /**
  * loadTiles() wraps the process of generating tiles and then fetching image points for each tile.
@@ -133,10 +94,9 @@ function loadTiles(which, url, projection, margin) {
     var s = projection.scale() * 2 * Math.PI;
     var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
 
-    // breakup the map view into tiles
-    var tiles = getTiles(projection, margin).filter(function (t) {
-        return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
-    });
+    var dimension = projection.clipExtent()[1];
+    var tiles = geoTile.getTiles(projection, dimension, tileZoom, margin);
+    tiles = geoTile.filterNullIsland(tiles);
 
     tiles.forEach(function (tile) {
        loadNextTilePage(which, currZoom, url, tile);

modules/util/index.js

@@ -23,5 +23,6 @@ export { utilSessionMutex } from './session_mutex';
 export { utilStringQs } from './util';
 export { utilSuggestNames } from './suggest_names';
 export { utilTagText } from './util';
+export { utilTile } from './tile';
 export { utilTriggerEvent } from './trigger_event';
 export { utilWrap } from './util';

modules/util/tile.js

@@ -0,0 +1,179 @@
+import _filter from 'lodash-es/filter';
+import _find from 'lodash-es/find';
+import { range as d3_range } from 'd3-array';
+import { geoExtent } from '../geo';
+
+
+export function utilTile() {
+    var _size = [960, 500];
+    var _scale = 256;
+    var _scaleExtent = [0, 20];
+    var _translate = [_size[0] / 2, _size[1] / 2];
+    var _zoomDelta = 0;
+    var _margin = 0;
+
+    function bound(val) {
+        return Math.min(_scaleExtent[1], Math.max(_scaleExtent[0], val));
+    }
+
+    function nearNullIsland(x, y, z) {
+        if (z >= 7) {
+            var center = Math.pow(2, z - 1);
+            var width = Math.pow(2, z - 6);
+            var min = center - (width / 2);
+            var max = center + (width / 2) - 1;
+            return x >= min && x <= max && y >= min && y <= max;
+        }
+        return false;
+    }
+
+    function tile() {
+        var z = Math.max(Math.log(_scale) / Math.LN2 - 8, 0);
+        var z0 = bound(Math.round(z + _zoomDelta));
+        var k = Math.pow(2, z - z0 + 8);
+        var origin = [
+            (_translate[0] - _scale / 2) / k,
+            (_translate[1] - _scale / 2) / k
+        ];
+
+        var cols = d3_range(
+            Math.max(0, Math.floor(-origin[0]) - _margin),
+            Math.max(0, Math.ceil(_size[0] / k - origin[0]) + _margin)
+        );
+        var rows = d3_range(
+            Math.max(0, Math.floor(-origin[1]) - _margin),
+            Math.max(0, Math.ceil(_size[1] / k - origin[1]) + _margin)
+        );
+
+        var tiles = [];
+        for (var i = 0; i < rows.length; i++) {
+            var y = rows[i];
+            for (var j = 0; j < cols.length; j++) {
+                var x = cols[j];
+
+                if (i >= _margin && i <= rows.length - _margin &&
+                    j >= _margin && j <= cols.length - _margin) {
+                    tiles.unshift([x, y, z0]);  // tiles in view at beginning
+                } else {
+                    tiles.push([x, y, z0]);     // tiles in margin at the end
+                }
+            }
+        }
+
+        tiles.translate = origin;
+        tiles.scale = k;
+
+        return tiles;
+    }
+
+
+    /**
+     * 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.
+     */
+    tile.getTiles = function(projection, dimensions, tilezoom, margin) {
+
+        // s is the current map scale
+        // z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground.
+        // ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification.
+        // See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx.
+        // As used here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels).
+        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);
+        var origin = [
+            s / 2 - projection.translate()[0],
+            s / 2 - projection.translate()[1]
+        ];
+
+        var tiler = this
+            .scaleExtent([tilezoom, tilezoom])
+            .scale(s)
+            .size(dimensions)
+            .translate(projection.translate())
+            .margin(margin || 0);   // request nearby tiles so we can connect sequences.
+
+        var tiles = tiler()
+            .map(function(tile) {
+                var x = tile[0] * ts - origin[0];
+                var y = tile[1] * ts - origin[1];
+
+                return {
+                    id: tile.toString(),
+                    xyz: tile,
+                    extent: geoExtent(
+                        projection.invert([x, y + ts]),
+                        projection.invert([x + ts, y])
+                    )
+                };
+            });
+
+        return tiles;
+    };
+
+
+    tile.filterNullIsland = function(tiles) {
+        return tiles.filter(function(t) {
+            return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
+        });
+    };
+
+
+    // remove inflight requests that no longer cover the view..
+    tile.removeInflightRequests = function(cache, tiles, callback, modifier) {
+        return _filter(cache.inflight, function(v, i) {
+            var wanted = _find(tiles, function(tile) { return i === tile.id + modifier; });
+            if (!wanted) {
+                delete cache.inflight[i];
+            }
+            return !wanted;
+        }).map(callback); // abort request
+    };
+
+
+    tile.scaleExtent = function(val) {
+        if (!arguments.length) return _scaleExtent;
+        _scaleExtent = val;
+        return tile;
+    };
+
+
+    tile.size = function(val) {
+        if (!arguments.length) return _size;
+        _size = val;
+        return tile;
+    };
+
+
+    tile.scale = function(val) {
+        if (!arguments.length) return _scale;
+        _scale = val;
+        return tile;
+    };
+
+
+    tile.translate = function(val) {
+        if (!arguments.length) return _translate;
+        _translate = val;
+        return tile;
+    };
+
+
+    tile.zoomDelta = function(val) {
+        if (!arguments.length) return _zoomDelta;
+        _zoomDelta = +val;
+        return tile;
+    };
+
+
+    // number to extend the rows/columns beyond those covering the viewport
+    tile.margin = function(val) {
+        if (!arguments.length) return _margin;
+        _margin = +val;
+        return tile;
+    };
+
+
+    return tile;
+}

package.json

@@ -66,7 +66,7 @@
     "json-stringify-pretty-compact": "^1.1.0",
     "jsonschema": "^1.1.0",
     "mapillary-js": "2.12.1",
-    "mapillary_sprite_source": "^1.4.0",
+    "mapillary_sprite_source": "^1.5.0",
     "minimist": "^1.2.0",
     "mocha": "^5.0.0",
     "mocha-phantomjs-core": "^2.1.0",