Leaflet: layers control for WMS

Question

based on this tutorial (http://leafletjs.com/examples/layers-control.html), I've tried to add 2 layers for a WMS based solution. In the tutorial, they managed to add 2 layers (Street and GrayScales) and switch between them.

My code:

function getDefaultWmsValues() {

    var layer1, layer2;
    layer2= 'Street';
    layer1= 'Satellite';

    return {
        url: "http://dummy.com/wms/service",
        mapCenter: [1, 2],
        startZoom: 15,
        layer: [layer1,layer2],
        imageFormat: 'image/jpeg',
        autor: "WMS Dummy",
        maxZoom: 17,
        minZoom: 12,
        version: '1.1.0',
        interactiveMapBoundaries: [[123, 1234], [1245.164611, 17890.023279]],
        usedProjection: L.CRS.EPSG4326
    };
}

function getWmsConfig(wmsDefaultValues) {
    return L.tileLayer.wms(wmsDefaultValues.url, {
        layers: wmsDefaultValues.layer,
        format: wmsDefaultValues.imageFormat,
        version: wmsDefaultValues.version,
        maxZoom: wmsDefaultValues.maxZoom,
        minZoom: wmsDefaultValues.minZoom,
        crs: wmsDefaultValues.usedProjection,
        attribution: wmsDefaultValues.autor
    });
}
function createLeafletMap(wmsDefaultValues) {

    var map = L.map('map', {center: wmsDefaultValues.mapCenter, zoom: wmsDefaultValues.startZoom});
    var wmsConfig = getWmsConfig(wmsDefaultValues);
    wmsConfig.addTo(map);
    L.control.scale().addTo(map);
    map.setMaxBounds(wmsDefaultValues.interactiveMapBoundaries);
    L.marker(wmsDefaultValues.mapCenter).addTo(map);
    var baseMaps = {
        "Layer Name 1": 'Satellite',
        "Layer Name 2": 'Street'
    };
    L.control.layers(baseMaps).addTo(map);
    return map;
}

var wmsDefaultValues = getDefaultWmsValues();
var leafletMap = createLeafletMap(wmsDefaultValues);

In the function getDefaultWmsValues(), I have 2 valid layers, layer1 and layer2. If I let either => layer: [layer1] or layer: [layer2], my code will alternatively show the desired layer.

However, when I try to configure both to be able to switch with layer: [layer1,layer2], only one of the layer will be shown and the widget to switch between layers like in the tutorial (Grayscale / Street) seems to be broken=> it will only show one of the layers...

Any help would be very much appreciated!

PS: I've replaced variables with dummy data, but my code is really built like this snippet...

Answer 1

Few things to notice here, you're adding both the layers to a single variable, so they can't be treated as a two layers and hence can't be viewed in control box as two layers.

Further, you specify that you want to switch between layers, i.e., you want to see only one layer at a time, so, by default this functionality could only be achieved if we set our layers as base layer as mentioned here

Hence, you first need to change the getDefaultWmsValues() function as below

function getDefaultWmsValues() {

var layer1, layer2;
    layer2= 'Street';
    layer1= 'Satellite';

    return {
        url: "http://dummy.com/wms/service",
        mapCenter: [1, 2],
        startZoom: 15,
        layer1: [layer1],
        layer2: [layer2],
        imageFormat: 'image/jpeg',
        autor: "WMS Dummy",
        maxZoom: 17,
        minZoom: 12,
        version: '1.1.0',
        interactiveMapBoundaries: [[123, 1234], [1245.164611, 17890.023279]],
        usedProjection: L.CRS.EPSG4326
    };
}

Similarly, you need to create modify getWmsConfig() function, and pass the layer attribute separately as shown below

function getWmsConfig(wmsDefaultValues, layer) {
    return L.tileLayer.wms(wmsDefaultValues.url, {
        layers: layer,
        format: wmsDefaultValues.imageFormat,
        version: wmsDefaultValues.version,
        maxZoom: wmsDefaultValues.maxZoom,
        minZoom: wmsDefaultValues.minZoom,
        crs: wmsDefaultValues.usedProjection,
        attribution: wmsDefaultValues.autor
    });
}

Now, call the getWmsConfig() two times passing one layer each time

var wmsConfig1 = getWmsConfig(wmsDefaultValues,wmsDefaultValues.layer1);
var wmsConfig2 = getWmsConfig(wmsDefaultValues,wmsDefaultValues.layer2);
wmsConfig1.addTo(map);
wmsConfig2.addTo(map);

Now, add these two wmsConfig variables to control

var baseMaps = {
    "Layer Name 1": wmsConfig1,
    "Layer Name 2": wmsConfig2
};

Good Luck