Leaflet tilelayer transparency

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://greeninfo-network.github.io/L.TileLayer.PixelFilter/leaflet-tileLayerPixelFilter.js"></script>
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

const map = L.map('map').setView([60.438160, 5.472157], 8);
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);


const filtered = new L.TileLayer.PixelFilter('https://earthengine.google.org/static/hansen_2014/gfw_loss_tree_year_30_2014/{z}/{x}/{y}.png', {
  attribution: 'Hansen/UMD/Google/USGS/NASA',
  pixelCodes: [
    [0, 0, 0] // find black pixels
  ],
  matchRGBA: [255, 255, 255, 0], // translate matching to this
  //missRGBA: [255, 255, 255, 64] // others
}).addTo(map);