Hide Watermark by clicking on it, on the leaflet map?

Question

Please help with the code to hide the watermark by clicking on watermark. 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);

If I understand correctly, you want a watermark control to be displayed whenever some Layer is displayed on the map? — ghybs, Oct 07 '19 at 09:57

Grzegorz T. · Accepted Answer · 2019-10-08T19:26:01.163

It should also work in 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>

Update - Adding a button showing/hiding the watermark

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>

Is it possible to control the on / off function of the watermark from the control.layers menu? Another check box? — Katamanga, Oct 08 '19 at 18:19
I've added a button to the map that hides or shows the watermark. I added a new code. Of course you can add it to the control.layers menu. In the same way as in that example I marked all groups. But I leave it to you;) — Grzegorz T., Oct 08 '19 at 19:32
Thanks :) But I will have to create a new question, how to add this function to control.layers :)) In any case, I am very grateful to you! — Katamanga, Oct 08 '19 at 20:02
Help with another question please, if you don't mind? - https://stackoverflow.com/questions/58297619/how-to-stretch-the-map-under-the-visible-area — Katamanga, Oct 09 '19 at 06:50

Hide Watermark by clicking on it, on the leaflet map?

1 Answers1