Skip to content

Commit

Permalink
Pull min/maxNativeZoom from TileLayer into GridLayer, as per Leaflet#…
Browse files Browse the repository at this point in the history
…5316. (Leaflet#5319)

* Pull min/maxNativeZoom from TileLayer into GridLayer, as per Leaflet#5316.

* Add a couple unit tests for GridLayer's maxNativeZoom
  • Loading branch information
jkuebart authored and IvanSanchez committed Feb 9, 2017
1 parent 689b71e commit 1010451
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 140 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
"build-jake": "jake build",
"build": "npm run rollup && npm run uglify",
"release": "./build/publish.sh",
"lint": "eslint src",
"lintfix": "eslint src --fix",
"lint": "eslint src; eslint spec/suites",
"lintfix": "eslint src --fix; eslint spec/suites --fix; ",
"rollup": "rollup -c build/rollup-config.js",
"watch": "rollup -w -c build/rollup-watch-config.js",
"uglify": "uglifyjs dist/leaflet-src.js -c -m -o dist/leaflet.js"
Expand Down
53 changes: 52 additions & 1 deletion spec/suites/layer/tile/GridLayerSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ describe('GridLayer', function () {
});
});

describe("when a tilelayer is removed from a map", function () {
describe("when a gridlayer is removed from a map", function () {
it("has its zoomlevels updated to only fit the layers it currently has", function () {
var tiles = [
L.gridLayer({minZoom: 10, maxZoom: 15}).addTo(map),
Expand Down Expand Up @@ -264,6 +264,57 @@ describe('GridLayer', function () {
});
});


describe("min/maxNativeZoom option", function () {
it("calls createTile() with maxNativeZoom when map zoom is larger", function (done) {
map.setView([0, 0], 10);

var grid = L.gridLayer({
maxNativeZoom: 5
});
var tileCount = 0;

grid.createTile = function (coords) {
expect(coords.z).to.be(5);
tileCount++;
return document.createElement('div');
};
grid.on('load', function () {
if (tileCount > 0) {
done();
} else {
done('No tiles loaded');
}
});

map.addLayer(grid);
});

it("calls createTile() with minNativeZoom when map zoom is smaller", function (done) {
map.setView([0, 0], 3);

var grid = L.gridLayer({
minNativeZoom: 5
});
var tileCount = 0;

grid.createTile = function (coords) {
expect(coords.z).to.be(5);
tileCount++;
return document.createElement('div');
};
grid.on('load', function () {
if (tileCount > 0) {
done();
} else {
done('No tiles loaded');
}
});

map.addLayer(grid);
});
});

describe("number of 256px tiles loaded in synchronous non-animated grid @800x600px", function () {
var clock, grid, counts;

Expand Down
89 changes: 0 additions & 89 deletions spec/suites/layer/tile/TileLayerSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -378,93 +378,4 @@ describe('TileLayer', function () {
});
});
});

describe('minNativeZoom', function () {
before(function () {
div = document.createElement('div');
div.style.width = '400px';
div.style.height = '400px';
div.style.visibility = 'hidden';

document.body.appendChild(div);

map = L.map(div).setView([0, 0], 0);
});

it('returns downscaled tileSize when zoom is lower than minNativeZoom (zoom = 0, minNativeZoom = 1)', function () {
var layer = L.tileLayer('http://{s}.example.com/{z}/{-y}/{x}.png', {
minNativeZoom: 1,
tileSize: 256
}).addTo(map);
map.setView([0, 0], 0);
expect(map.getZoom()).to.equal(0);
expect(layer.getTileSize().x).to.equal(128);
expect(layer.getTileSize().y).to.equal(128);
});

it('returns regular tileSize when zoom is equal to minNativeZoom (zoom = 1, minNativeZoom = 1)', function () {
var layer = L.tileLayer('http://{s}.example.com/{z}/{-y}/{x}.png', {
minNativeZoom: 1,
tileSize: 256
}).addTo(map);
map.setView([0, 0], 1);
expect(map.getZoom()).to.equal(1);
expect(layer.getTileSize().x).to.equal(256);
expect(layer.getTileSize().y).to.equal(256);
});

it('returns regular tileSize when zoom is greater than minNativeZoom (zoom = 2, minNativeZoom = 1)', function () {
var layer = L.tileLayer('http://{s}.example.com/{z}/{-y}/{x}.png', {
minNativeZoom: 1,
tileSize: 256
}).addTo(map);
map.setView([0, 0], 2);
expect(map.getZoom()).to.equal(2);
expect(layer.getTileSize().x).to.equal(256);
expect(layer.getTileSize().y).to.equal(256);
});
});

describe('maxNativeZoom', function () {
before(function () {
div = document.createElement('div');
div.style.width = '400px';
div.style.height = '400px';
div.style.visibility = 'hidden';

document.body.appendChild(div);

map = L.map(div).setView([0, 0], 0);
});

it('returns upscaled tileSize when zoom is higher than maxNativeZoom (zoom = 2, maxNativeZoom = 1)', function () {
var layer = L.tileLayer('http://{s}.example.com/{z}/{-y}/{x}.png', {
maxNativeZoom: 1,
tileSize: 256
}).addTo(map);
map.setView([0, 0], 2);
expect(layer.getTileSize().x).to.equal(512);
expect(layer.getTileSize().y).to.equal(512);
});

it('returns regular tileSize when zoom is equal to minNativeZoom (zoom = 1, maxNativeZoom = 1)', function () {
var layer = L.tileLayer('http://{s}.example.com/{z}/{-y}/{x}.png', {
maxNativeZoom: 1,
tileSize: 256
}).addTo(map);
map.setView([0, 0], 1);
expect(layer.getTileSize().x).to.equal(256);
expect(layer.getTileSize().y).to.equal(256);
});

it('returns regular tileSize when zoom is lower than minNativeZoom (zoom = 0, maxNativeZoom = 1)', function () {
var layer = L.tileLayer('http://{s}.example.com/{z}/{-y}/{x}.png', {
maxNativeZoom: 1,
tileSize: 256
}).addTo(map);
map.setView([0, 0], 0);
expect(layer.getTileSize().x).to.equal(256);
expect(layer.getTileSize().y).to.equal(256);
});
});
});
30 changes: 28 additions & 2 deletions src/layer/tile/GridLayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,18 @@ export var GridLayer = Layer.extend({
// The maximum zoom level that tiles will be loaded at.
maxZoom: undefined,

// @option maxNativeZoom: Number = undefined
// Maximum zoom number the tile source has available. If it is specified,
// the tiles on all zoom levels higher than `maxNativeZoom` will be loaded
// from `maxNativeZoom` level and auto-scaled.
maxNativeZoom: undefined,

// @option minNativeZoom: Number = undefined
// Minimum zoom number the tile source has available. If it is specified,
// the tiles on all zoom levels lower than `minNativeZoom` will be loaded
// from `minNativeZoom` level and auto-scaled.
minNativeZoom: undefined,

// @option noWrap: Boolean = false
// Whether the layer is wrapped around the antimeridian. If `true`, the
// GridLayer will only be displayed once at low zoom levels. Has no
Expand Down Expand Up @@ -497,8 +509,22 @@ export var GridLayer = Layer.extend({
this._setView(e.center, e.zoom, true, e.noUpdate);
},

_clampZoom: function (zoom) {
var options = this.options;

if (undefined !== options.minNativeZoom && zoom < options.minNativeZoom) {
return options.minNativeZoom;
}

if (undefined !== options.maxNativeZoom && options.maxNativeZoom < zoom) {
return options.maxNativeZoom;
}

return zoom;
},

_setView: function (center, zoom, noPrune, noUpdate) {
var tileZoom = Math.round(zoom);
var tileZoom = this._clampZoom(Math.round(zoom));
if ((this.options.maxZoom !== undefined && tileZoom > this.options.maxZoom) ||
(this.options.minZoom !== undefined && tileZoom < this.options.minZoom)) {
tileZoom = undefined;
Expand Down Expand Up @@ -592,7 +618,7 @@ export var GridLayer = Layer.extend({
_update: function (center) {
var map = this._map;
if (!map) { return; }
var zoom = map.getZoom();
var zoom = this._clampZoom(map.getZoom());

if (center === undefined) { center = map.getCenter(); }
if (this._tileZoom === undefined) { return; } // if out of minzoom/maxzoom
Expand Down
48 changes: 2 additions & 46 deletions src/layer/tile/TileLayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,6 @@ export var TileLayer = GridLayer.extend({
// Maximum zoom number.
maxZoom: 18,

// @option maxNativeZoom: Number = null
// Maximum zoom number the tile source has available. If it is specified,
// the tiles on all zoom levels higher than `maxNativeZoom` will be loaded
// from `maxNativeZoom` level and auto-scaled.
maxNativeZoom: null,

// @option minNativeZoom: Number = null
// Minimum zoom number the tile source has available. If it is specified,
// the tiles on all zoom levels lower than `minNativeZoom` will be loaded
// from `minNativeZoom` level and auto-scaled.
minNativeZoom: null,

// @option subdomains: String|String[] = 'abc'
// Subdomains of the tile service. Can be passed in the form of one string (where each letter is a subdomain name) or an array of strings.
subdomains: 'abc',
Expand Down Expand Up @@ -206,26 +194,6 @@ export var TileLayer = GridLayer.extend({
done(e, tile);
},

getTileSize: function () {
var map = this._map,
tileSize = GridLayer.prototype.getTileSize.call(this),
zoom = this._tileZoom + this.options.zoomOffset,
minNativeZoom = this.options.minNativeZoom,
maxNativeZoom = this.options.maxNativeZoom;

// decrease tile size when scaling below minNativeZoom
if (minNativeZoom !== null && zoom < minNativeZoom) {
return tileSize.divideBy(map.getZoomScale(minNativeZoom, zoom)).round();
}

// increase tile size when scaling above maxNativeZoom
if (maxNativeZoom !== null && zoom > maxNativeZoom) {
return tileSize.divideBy(map.getZoomScale(maxNativeZoom, zoom)).round();
}

return tileSize;
},

_onTileRemove: function (e) {
e.tile.onload = null;
},
Expand All @@ -234,25 +202,13 @@ export var TileLayer = GridLayer.extend({
var zoom = this._tileZoom,
maxZoom = this.options.maxZoom,
zoomReverse = this.options.zoomReverse,
zoomOffset = this.options.zoomOffset,
minNativeZoom = this.options.minNativeZoom,
maxNativeZoom = this.options.maxNativeZoom;
zoomOffset = this.options.zoomOffset;

if (zoomReverse) {
zoom = maxZoom - zoom;
}

zoom += zoomOffset;

if (minNativeZoom !== null && zoom < minNativeZoom) {
return minNativeZoom;
}

if (maxNativeZoom !== null && zoom > maxNativeZoom) {
return maxNativeZoom;
}

return zoom;
return zoom + zoomOffset;
},

_getSubdomain: function (tilePoint) {
Expand Down

0 comments on commit 1010451

Please sign in to comment.