[GIS] mapbox.js 1.6.2 – change tile set on zoom levels

mapboxtileszoom

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 a minZoom and a maxZoom.

Options minZoom and maxZoom 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.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<button id="navigation">Test</button>
<script>
  L.mapbox.accessToken = 'your_token';
  var layers = [
    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
      minZoom: 0,
      maxZoom: 5,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
      id: 'wmarci.i6n42nl5'
    }),
    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
      minZoom: 5,
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
      id: 'wmarci.k300ifal'
    })
  ];
  var layerGroup = new L.layerGroup(layers);

  var map = L.mapbox.map('map', null, { 
    center: new L.LatLng(38.8929,-100.0252), 
    zoom: 4,
    layers: layerGroup 
  });
</script>
</body>
</html>
Related Question