Alright, this is what I've got. What you've suggested doesn't seem to be working. I need to change the basemap at a certain zoom level…
var map = L.mapbox.map('map', 'wmarci.i6n42nl5', {
center: new L.LatLng(38.8929,-100.0252),
zoom: 4,
minZoom: 0, maxZoom: 5,
layers: [ L.mapbox.tileLayer('wmarci.k300ifal', { maxZoom: 13, minZoom: 5, }) ]
});
new L.Control.Zoom({ position: 'topright' }).addTo(map);
//Navigate to Places
document.getElementById('navigation').onclick = function(e) {
var pos = e.target.getAttribute('data-position');
if (pos) {
var loc = pos.split(',');
map.setView(loc, 10);
}
}
//Navigate to Places
document.getElementById('zoomout').onclick = function(e) {
var pos = e.target.getAttribute('data-position');
if (pos) {
var loc = pos.split(',');
map.setView(loc, 4);
}
}
//Mapbox layers for switcher
var ui = document.getElementById('map-ui-zoning');
// Layers and Grids!!!!!!!!
var layers = [{
name: 'basemap',
minZoom: 0,
maxZoom: 19,
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.i6n42nl5'),
L.mapbox.gridLayer('')])
},
{
name: '1775',
minZoom: 0,
maxZoom: 19,
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.g2ufpqfr'),
L.mapbox.gridLayer('wmarci.g2ufpqfr')])
},
{
name: '1805',
minZoom: 0,
maxZoom: 9,
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.tlk2csor'),
L.mapbox.gridLayer('wmarci.tlk2csor')])
},
{
name: '1835',
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.mt4t2o6r'),
L.mapbox.gridLayer('wmarci.mt4t2o6r')])
},
{
name: '1865',
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.m8peewmi'),
L.mapbox.gridLayer('wmarci.m8peewmi')])
},
{
name: '1895',
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.hafhto6r'),
L.mapbox.gridLayer('wmarci.hafhto6r')])
},
{
name: '2014',
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.bqz4obt9'),
L.mapbox.gridLayer('wmarci.bqz4obt9')])
},
{
name: 'contemp',
minZoom:7,
maxZoom:19,
layer: L.layerGroup([
L.mapbox.tileLayer('wmarci.k300ifal'),
L.mapbox.gridLayer('wmarci.k300ifal')])
}
];
Best Answer
Change tiles in your account
For one style, set the various correct styles for the right level. With this, no need to manage at code level the switch by zoom levels.
With your existing tiles( separated tiles set for each data types)
You can make a
LayerGroup
and for each tile set, provide aminZoom
and amaxZoom
.Options
minZoom
andmaxZoom
are inherited.Edit
After, some research loading using L.mapbox.tileLayer() call a tileJSON. If you look in the Network panel debugger, you will see the tileJSON embed minzoom and maxzoom and so setting in code minZoom and maxZoom do not work in options.
To solve it, I used the Leaflet L.tileLayer instead that only use the tiles but do not retrieve other parameters like minzoom, maxzoom. I suppose you can change minzoom, maxzoom in MapBox account for your tiles set but didn't find how.