Enable / disable the WMS layer using the "Click" button on the sheet

I created several maps, and now I would like to publish them using a flyer and a geoserver. Everything works fine, I can change layers using level control, but I want to do this using my own buttons. The problem is that I cannot figure out how to do this. I have all the buttons created, and I just want to create a function that will add a wms tile layer to the map when I click

Any help would be greatly appreciated. Here is what I have tried so far, but it does not work:

function appear(){
    var floodToday = L.tileLayer.wms("http://localhost:8080/geoserver/wms", {
        layers: 'FloodlayerWMS',
        format:'image/png',
        version: '1.1.1',
        transparent: true
    })
    map.addLayer(floodToday);
}
$(".WToday").on("click",appear);

I already found this answer: Hide / Show layers in the Flyer with its own buttons , but it was not useful. I assume my problems are with using wms tile layers, but I'm not sure how to get around this.

UPDATE

@ HudsonPH , Javascript JQuery, , , , :

$("#WToday").click(function(event) {
    var floodToday = L.tileLayer.wms("http://localhost:8080/geoserver/wms", {
    layers: 'FloodlayerWMS',
    format:'image/png',
    version: '1.1.1',
    transparent: true
    })
map.addLayer(floodToday);
});

, .

+4
2

trim . Obs: data

 $("[name='leaflet-base-layers']").parent().each(function (index) {
            $layerControl = $(this);
            if ($that.attr("Your-Date-Attribute").trim() == $layerControl.find("span").text().trim()) {                                  
                $(this).find("input").trigger("click");
            }
        });
+1

. . .

 $("#WToday").click(function(event) {
   const model = new Model().init("http://localhost:8080/geoserver/wms","FloodlayerWMS");
   const layerWMS = new Facade().requestWMS(model);
   map.addLayer(layerWMS);
 });
//Module Facade
let Facade = (function() {
  function _requestWMS(model) {
    return L.tileLayer.wms(model.getUrl(), model.toOptions());
  }
  function _requestWFS(model) {}
  return {
    requestWMS:_requestWMS,
    requestWFS:_requestWFS
  }
}());
//Model for webservices
let Model = (function() {
 let url, layers, format, transparent, version;
function _Model(pUrl, pLayer) {
  url        = pUrl;
  layers     = pLayer;
  format     = 'image/png';
  transparent = true;
  version = '1.1.1';
}
function _toOptions() {
    let options = {
        layers:         layers,
        format:         format,
        transparent:    transparent
        version:        version,
        };
    return  options;
}
function _getUrl() {
    return url;
}
 return {
        init:_Model,
        getUrl:_getUrl,
        toOptions: _toOptions
 };
}());
0

All Articles