I have a collection of BaseMaps I want users to be able to select:

var BaseMaps = {
    // TODO blank tileLayer

    "Default": L.tileLayer('https://{s}.tiles.mapbox/v3/{id}/{z}/{x}/{y}.png', {
        id: 'examples.map-20v6611k',
        noWrap: true
    }),

    "ESRI Roads": L.tileLayer('/{z}/{y}/{x}', {
        noWrap: true
    })
};

These layers are added to the LayerGroup control of my map with L.control.layers(BaseMaps).addTo(map) and work as expected

The problem is I want the ability for the user to select a blank tile layer from the same control, effectively turning off the base map, but a null or blank tileLayer via L.tileLayer() does not work as this breaks Leaflet functionality

Is there a clean way to add a blank tileLayer option to this control? Digging through the API and various github/forum questions has not surfaced anything.

Thanks in advance!

I have a collection of BaseMaps I want users to be able to select:

var BaseMaps = {
    // TODO blank tileLayer

    "Default": L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        id: 'examples.map-20v6611k',
        noWrap: true
    }),

    "ESRI Roads": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
        noWrap: true
    })
};

These layers are added to the LayerGroup control of my map with L.control.layers(BaseMaps).addTo(map) and work as expected

The problem is I want the ability for the user to select a blank tile layer from the same control, effectively turning off the base map, but a null or blank tileLayer via L.tileLayer() does not work as this breaks Leaflet functionality

Is there a clean way to add a blank tileLayer option to this control? Digging through the API and various github/forum questions has not surfaced anything.

Thanks in advance!

• javascript
• leaflet

1 Answer 1

Giving an empty string as url parameter works for me and doesn't throw any errors:

var base = {
    'Empty': L.tileLayer(''),
    'OpenStreetMap': L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        'attribution': 'Map data © OpenStreetMap contributors'
    })
};

Working example on Plunker: http://plnkr.co/edit/v7sICO?p=preview