[Leaflet] Layers

by 1004lucifer

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

CSS

html,body { width:100%; height:100%; margin:0; padding:0; }
#map { width:100%; height:100%; }

JavaScript

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

var 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: function(map) {
    var img = L.DomUtil.create('img');

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

    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(map);