leaflet-transparency

    0.0.6 • Public • Published

    leaflet-transparency.js

    Leaflet plugin that allows to add an opacity control.

    For a working example see demo


    Initally based on the google-transparency plugin


    How to use

    1. include CSS & JavaScript
      <head>
      ...
      <style>htmlbody#map { width: 100%; height: 100%; margin: 0; padding: 0; }</style> 
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.2/dist/leaflet.css" />
      <script src="https://unpkg.com/leaflet@1.3.2/dist/leaflet.js"></script>
      <script src="https://unpkg.com/leaflet-transparency@latest/leaflet-transparency.js"></script>
      ...
      </head>
    2. choose the div container used for the slippy map
      <body>
      ...
      <div id="map"></div>
      ...
      </body>
    3. create your first simple “leaflet-transparency” slippy map
      <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> 

    Compatibile with: leaflet@1.3.2


    Contributors: Raruto

    Install

    npm i leaflet-transparency

    DownloadsWeekly Downloads

    101

    Version

    0.0.6

    License

    GPL-3.0

    Unpacked Size

    65.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • raruto