1

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')])
      }
    ];
Improve this question
2
  • Please, in future, do post nearly your full application code! It's annoying for people answering and debugging because we can't isolate use case to solve. Thanks ;)
    – ThomasG77
    Commented Nov 4, 2014 at 0:33
  • that isn't nearly the full application code, but I gotch ya. thank you for spending time with in in anycase. I thought it would provide more context. Wm
    – wayne-m
    Commented Nov 6, 2014 at 2:08

1 Answer 1

Reset to default
1

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>
Improve this answer
1
  • hmmm, that is a workaround perhaps. I will try that and I truly appreciate your time. and thanks for the heads up. wayne
    – wayne-m
    Commented Nov 6, 2014 at 2:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.