This is driving me mad. See the Leaflet tutorial for adding a layer control to your map:

L.Icon.Default.imagePath = "Scripts/images";

var mapUrl = 'http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png';
var secondMap = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

var cities = L.layerGroup([littleton, denver, aurora, golden]);

var grayscale = L.tileLayer(mapUrl, { id: mapUrl }),
streets = L.tileLayer(secondMap, { id: secondMap });

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets

var overlayMaps = {
    "Cities": cities

L.control.layers(baseMaps, overlayMaps).addTo(map);

Now, how do I use the removeLayer function to remove the "GrayScale" map from the control using a map.on('click') event? The code would be:

map.on('click', function(){
    //remove GrayScale
  • Do you want the user to be able to remove the Grayscale with a button? Or for it to be removed dynamically as an effect of some other event? Or do you simply want the map to start without the grayscale layer at all? – hexamon Sep 24 '14 at 9:27
  • Let say the easiest solution: dynamically as an effect to an event. For example, map.on('click', function(){}). I will edit my post accordingly. – yesman Sep 24 '14 at 9:29

If you want to remove the grayscale map from the start just delete:

    "Grayscale": grayscale,


var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets

If you want to remove the layer on a click you call it as a method on the map object. Like so:


To remove it from the control you first have to assign the control to a variable. Change this:

L.control.layers(baseMaps, overlayMaps).addTo(map);

To this:

lcontrol = L.control.layers(baseMaps, overlayMaps).addTo(map);

Then you can call:


..to remove it from the control.

| improve this answer | |

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.