<script>
var opts = {
    map: {
      center: [41.4583, 12.7059],
      zoom: 5,
    },
    otmLayer: {
      url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
      options: {
        attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
        maxZoom: 17,
      },
    },
    satelliteLayer: {
      url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
      options: {
        attribution: '&copy; <a href="http://www.esri.com/">Esri</a>',
        maxZoom: 18,
      },
    },
    opacityBaseControl: {
      options: {
        sliderImageUrl: "images/opacity-slider2.png",
        backgroundColor: "rgba(0, 0, 0, 0.9)",
        opacity: 1,
        position: 'topright',
      }
    },
    opacityOverlayControl: {
      options: {
        sliderImageUrl: "images/opacity-slider2.png",
        backgroundColor: "rgba(229, 227, 223, 0.9)",
        opacity: 0.75,
        position: 'topright',
      }
    },
  };
  var map = new L.Map('map', opts.map);
  var layer = new L.TileLayer(opts.otmLayer.url, opts.otmLayer.options);
  var overlay = new L.TileLayer(opts.satelliteLayer.url, opts.satelliteLayer.options);
  var controlBaseOpacity = new L.Control.OpacitySlider(null, opts.opacityBaseControl.options);
  var controlOverlayOpacity = new L.Control.OpacitySlider(overlay, opts.opacityOverlayControl.options);
  controlBaseOpacity.addTo(map);
  controlOverlayOpacity.addTo(map);
  layer.addTo(map);
</script>