Leaflet Group Layer as BaseLayers
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/fieldwire-dev/leaflet/leaflet.css">
<script src="https://s3.amazonaws.com/fieldwire-dev/leaflet/leaflet-src.js"></script>
<div id="map"></div>
<input type="button" value="erase stored value for token" onclick="window.erase_token()"/>
<div id="info"><div>
CSS
#map { height: 400px; }
div.leaflet-control-layers-overlays, div.leaflet-control-layers-separator
{
display: none !important;
}
JavaScript
// Get the user's API key via prompt
if (!localStorage.getItem('mapbox_token')) {
localStorage.setItem('mapbox_token', prompt('Use your own Mapbox token.'));
}
// Confirm we've got 'em by displaying them to the screen
var token = localStorage.getItem('mapbox_token');
console.log('https://api.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token='+token);
var map = L.map('map').setView([39.171862, -86.53827], 13);
//street layer using mapbox basic
var mapboxbasic = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token='+token, {
maxZoom: 18
});
//City Trails
var trails = L.tileLayer.wms('https://bloomington.in.gov/geoserver/wms', {
layers: 'publicgis:TrailsAndPaths',
format: 'image/png',
transparent: true,
version: '1.1.1'
});
//aerial layer using mapbox satellite
var mapboxsat = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets-satellite/{z}/{x}/{y}.png?access_token='+token, {
maxZoom: 18
})
;
var streets = new L.layerGroup([mapboxbasic, trails]).addTo(map);
var imagery = new L.layerGroup([mapboxsat, trails]);
var basemap = { 'Streets': streets, 'Aerials': imagery}
;
var overlays=
{
"Trails": trails
};
L.control.layers(basemap,overlays).addTo(map);
window.erase_token=function()
{
localStorage.removeItem('mapbox_token');
if (!localStorage.getItem('mapbox_token')) {
document.getElementById("info").innerHTML="token erased.please run jsfiddle again to use a different token";
}
}