2

I'm using Leaflet v 1.4.0. In LL, using L.control.layer, the basemap (and overlay) is assigned as follows:

$.fn.initBaseMaps = function (selectedIndexProjectionOption) {
    lyrNASAGIBSBlueMarble = L.tileLayer(nasagibs_static_templates[selectedIndexProjectionOption], nasagibs_static_template_options[selectedIndexProjectionOption]);

    lyrGebcoBathy = L.tileLayer.wms(gebcoWMSServers[selectedIndexProjectionOption], gebco_static_template_options[selectedIndexProjectionOption]);

    baseLayers = [lyrNASAGIBSBlueMarble, lyrGebcoBathy];

    // Define base map object
    objBasemaps = {
        "NASA Blue Marble": lyrNASAGIBSBlueMarble,
        "Gebco Bathymetry": lyrGebcoBathy
    };
    // Define overlays
    objOverlays = {};

    ctlLayers = L.control.layers(objBasemaps, objOverlays, {
        position: 'topright',
        unloadInvisibleTiles: true,
        collapsed: false // temporary
    }).addTo(map);

    //Initial choice
    map.addLayer(baseLayers[0]);
};
$.fn.initBaseMaps(selectedIndexProjectionOption);

This works fine. However, when I change certain 'display conditions', I need to redefine the source of the 2 base layers. How to achieve this?

Note that I am keeping the 2 radio buttons as placeholders and am trying to change the source of the basemaps in runtime. (Please note that I am not asking about how to toggle between radio choices - but change the underlying source of the basemaps).

It seems like even after programmatically removing the baselayers using map.removeLayer(layer), leaflet seems to be storing some internal reference to the old basemaps somewhere and forcing its display as well, along with the newer one. That is, I cannot completely get rid of the older basemaps.

0

If you would only want to change layer source, that could be done with L.tileLayer.setUrl method. Since you are also changing layer options, the only sensible way is to remove old layer, create new layer and add it to the map. It's impossible to say why this didn't work for you without seeing your code.

Code below should work:

var lyrNASAGIBSBlueMarble = null;
var lyrGebcoBathy = null;
var ctlLayers = L.control.layers({
        position: 'topright',
        unloadInvisibleTiles: true,
        collapsed: false // temporary
    }).addTo(map);

$.fn.initBaseMaps = function (selectedIndexProjectionOption) {
    if (lyrNASAGIBSBlueMarble != null) {
      map.removeLayer(lyrNASAGIBSBlueMarble);
      ctlLayers.removeLayer(lyrNASAGIBSBlueMarble);
      lyrNASAGIBSBlueMarble = null;
    }
    lyrNASAGIBSBlueMarble = L.tileLayer(nasagibs_static_templates[selectedIndexProjectionOption], nasagibs_static_template_options[selectedIndexProjectionOption]);

    if (lyrGebcoBathy != null) {
      map.removeLayer(lyrGebcoBathy);
      ctlLayers.removeLayer(lyrGebcoBathy);
      lyrGebcoBathy = null;
    }
    lyrGebcoBathy = L.tileLayer.wms(gebcoWMSServers[selectedIndexProjectionOption], gebco_static_template_options[selectedIndexProjectionOption]);

    //Initial choice
    map.addLayer(lyrNASAGIBSBlueMarble);

    ctlLayers.addBaseLayer(lyrNASAGIBSBlueMarble, "NASA Blue Marble");
    ctlLayers.addBaseLayer(lyrGebcoBathy, "Gebco Bathymetry");    
};
  • I could not upload all (too much) but just the bare-bone function. Actually, I'm trying to change CRS and 'selectedIndexProjectionOption' index chooses one of 3: EPSG3413, EPSG4326, EPSG3031 link While your suggestion works, the Position of the 'L.controls.layer' changes upon the function call. Even though we call it 'topright', there are other controls and its renewed location goes underneath other existing controls. Any thoughts? And many thanks for your thoughtful response. – PDash Jul 11 at 3:36
  • I modified answer so that control is not removed, just layers replaced. I can't test this at the moment but it should work. – TomazicM Jul 11 at 6:14
  • Nice and clean approach and it works. However, the remaining issue is now the zIndex is not maintained and the redrawn basemap covers other tilelayers that shows various satellite data. Is it possible to maintain its original zIndex? – PDash Jul 11 at 21:24
  • Since you are finding answer useful, you should at least upvote it if not accept it before you can expect any further help. – TomazicM Jul 12 at 5:19
  • Believe it or not, I keenly looked for Upvote/Like options next to your answers yesterday but did not find it (my bad, being a newbie on this platform). Will google now for this and may be it guides for voting opt. Is it possible that I don't have these rights being new or not having enough points? Anyways, thanks for your time and let me know if I can help you someday. – PDash Jul 12 at 5:45
0

Thanks, Here is the final version with pane options. (I used zIndex before for overlays but pane seems to be an inherent function, so changed back). There were other issues in deleting older overlay layers (not baselayer) with date change and I added an internal name in layer.options.internalname to use as an argument for deleting overlays and retaining baselayers. But that's a separate issue. The final version for dealing with layercontrol:

    ////////////////////////////////////////////////////
    // Add a layer control before adding basemaps
    ////////////////////////////////////////////////////
    ctlLayers = L.control.layers({}, {}, {
        position: 'topright',
        unloadInvisibleTiles: true,
        collapsed: false // temporary
    }).addTo(map);

    map.createPane('basemapcontainer');
    map.getPane('basemapcontainer').style.zIndex = 199;

    map.createPane('overlaymapcontainer');
    map.getPane('overlaymapcontainer').style.zIndex = 200;

    ////////////////////////////////////////////////////
    // Functions to Initiate and Update base maps
    ////////////////////////////////////////////////////
    $.fn.initBaseMaps = function (selectedIndexProjectionOption) {

        var options_lyrNASAGIBSBlueMarble = nasagibs_static_template_options[selectedIndexProjectionOption];
        // extend previously defined options using jquery
        options_lyrNASAGIBSBlueMarble = $.extend(options_lyrNASAGIBSBlueMarble, {pane: 'basemapcontainer'});

        var options_lyrGebcoBathy = gebco_static_template_options[selectedIndexProjectionOption];
        // extend previously defined options using jquery
        options_lyrGebcoBathy = $.extend(options_lyrGebcoBathy, {pane: 'basemapcontainer'});

        if (lyrNASAGIBSBlueMarble != null) {
            map.removeLayer(lyrNASAGIBSBlueMarble);
            ctlLayers.removeLayer(lyrNASAGIBSBlueMarble);
            lyrNASAGIBSBlueMarble = null;
        }
        lyrNASAGIBSBlueMarble = L.tileLayer(nasagibs_static_templates[selectedIndexProjectionOption], options_lyrNASAGIBSBlueMarble);

        if (lyrGebcoBathy != null) {
            map.removeLayer(lyrGebcoBathy);
            ctlLayers.removeLayer(lyrGebcoBathy);
            lyrGebcoBathy = null;
        }
        lyrGebcoBathy = L.tileLayer.wms(gebcoWMSServers[selectedIndexProjectionOption], options_lyrGebcoBathy);

        //Initial choice
        map.addLayer(lyrNASAGIBSBlueMarble);
        lyrNASAGIBSBlueMarble.bringToBack();
        //map.addLayer(lyrGebcoBathy);
        //lyrGebcoBathy.bringToBack();

        ctlLayers.addBaseLayer(lyrNASAGIBSBlueMarble, "NASA Blue Marble");
        ctlLayers.addBaseLayer(lyrGebcoBathy, "Gebco Bathymetry");
    };
    $.fn.initBaseMaps(selectedIndexProjectionOption);

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.