JSFiddle - React, Tailwind, and code Playground

by Mark Friesen

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css">
<div id='map'></div>

CSS

#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

var map = L.mapbox.map('map', 'examples.map-zgrqqx0w')
    .setView([38.902, -77.001], 12);
var layerGroup = new L.LayerGroup();
var bikes = L.mapbox.tileLayer('examples.bike-locations');
var lanes = L.mapbox.tileLayer('examples.bike-lanes');
layerGroup.addLayer(lanes);
layerGroup.addTo(map);



map.on('zoomend', function(e) {
	layerGroup.clearLayers();
    if (map.getZoom() >= 14) {
 		layerGroup.addLayer(bikes);
		layerGroup.addTo(map);
    } else {
  		layerGroup.addLayer(lanes);
		layerGroup.addTo(map);
    }
});