Скрыть водяной знак, нажав на него, на карте листовки?

Question

Пожалуйста, помогите с кодом, чтобы скрыть водяной знак, нажав на водяной знак. LiveUrl: http://breamap.hostronavt.ru

    L.Control.Watermark = L.Control.extend({
        onAdd: function(map) {
            var img = L.DomUtil.create('img');          
            img.src = 'images/art/Baby_512.png';
            img.style.width = '250px';          
            return img;
        },      
        onRemove: function(map) {
        // Nothing to do here
        }
    });
    L.control.watermark = function(opts) {
        return new L.Control.Watermark(opts);
    }
    L.control.watermark({ position: 'bottomleft' })
         .addTo(Dont_Think_Group);

Answer 1

Должно также работать в IE11;)

let map = L.map('map', {
  center: [40, 0],
  zoom: 1
});

let positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(map);

L.Control.Watermark = L.Control.extend({
  onAdd(map) {
    let img = L.DomUtil.create('img');

    img.src = 'https://leafletjs.com/docs/images/logo.png';
    img.style.width = '200px';

    img.addEventListener('click', function(e) {
      let target = e.target;
      target.parentNode.removeChild(target);
    });
    return img;
  },

  onRemove(map) {}
});

L.control.watermark = function(opts) {
  return new L.Control.Watermark(opts);
};

L.control.watermark({
  position: 'bottomleft'
}).addTo(map);

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 600px;
  height: 400px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<div id='map'></div>

Обновление - Добавление кнопки, показывающей / скрывающей водяной знак

let map = L.map('map', {
  center: [40, 0],
  zoom: 1
});

let positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(map);

let customControl = L.Control.extend({
  options: {
    position: 'topleft'
  },
  onAdd(map) {
    let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');

    container.style.backgroundColor = 'white';
    container.style.backgroundSize = '30px 30px';
    container.style.width = '30px';
    container.style.height = '30px';
    container.style.cursor = 'pointer';
    container.classList.add('watermark-button');
    container.innerText = 'hide';


    container.onclick = function() {
      const watermarkCheck = document.querySelector('.watermark-hidden');
      const watermark = document.querySelector('.watermark');
      if (watermarkCheck) {
        container.innerText = 'hide';
        watermark.classList.remove('watermark-hidden');
      } else {
        container.innerText = 'show';
        watermark.classList.add('watermark-hidden');
      }
    };

    return container;
  }
});


L.Control.Watermark = L.Control.extend({
  onAdd(map) {
    let img = L.DomUtil.create('img');

    img.src = 'https://leafletjs.com/docs/images/logo.png';
    img.style.width = '200px';
    img.classList.add('watermark');

    img.addEventListener('click', function(e) {
      const watermarkButton = document.querySelector('.watermark-button');
      let target = e.target;
      watermarkButton.innerText = 'show';
      target.classList.add('watermark-hidden');
    });
    return img;
  },

  onRemove(map) {}
});

L.control.watermark = function(opts) {
  return new L.Control.Watermark(opts);
};

L.control.watermark({
  position: 'bottomleft'
}).addTo(map);
map.addControl(new customControl());

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 600px;
  height: 400px;
}

.watermark-hidden {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>

<div id='map'></div>