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')])
      }
    ];
  • 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 Nov 4 '14 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 Nov 6 '14 at 2:08
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>
  • 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 Nov 6 '14 at 2:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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