COGMate can be used for working with Cloud Optimized GeoTiff's (COG). Add, remove, show, hide a COG from any LeafletJS map. Allows for multi-band pixel math. Multiple palette styles, grayscale, gradient, colorStop, Look-Up Table. Allows color mapping values to colors. This is a wrapper around georaster-layer-for-leaflet for extended functionality and ease of use. Documentation at the bottom.

(Gradient palette with color mapped values using a single 1.8GB 30 meter elevation COG)

Here are some examples using LeafletJS and the minimum JavaScript required:

(A simple green footprint of the elevation COG)

var map = L.map('map', {
   center: { lat: 39, lng: -95 }
   ,zoom: 4
});
let dem30m = new COGMate(map, { 
   url: "https://www.femafhz.com/map/data/raster/conusDem30m_cog.tif" 
});
dem30m.addLayer();

(grayscale example)

var map = L.map('map', {
   center: { lat: 39, lng: -95 }
   ,zoom: 4
});
let dem30m = new COGMate(map, { 
   url: "https://www.femafhz.com/map/data/raster/conusDem30m_cog.tif" 
   ,minValue: -114
   ,maxValue: 4410
   ,paletteFn: 'grayscale'
});
dem30m.addLayer();

(code for the interactive map above)

var map = L.map('map', {
   center: { lat: 39, lng: -95 }
   ,zoom: 4
});

let dem30m = new COGMate(map, { 
   id: "dem30m"
   ,url: "https://www.femafhz.com/map/data/raster/conusDem30m_cog.tif"
   ,minZoom: 1
   ,maxZoom: 18
   ,valueScaleFn: function (m = 0) { return parseInt(m * 3.28084); }
   ,minValue: -1000
   ,maxValue: 15000
   ,values: '-1000,3,25,100,500,1000,1500,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000,13000,14000,15000'
   ,colors:'#284083,#364f86,#516e8b,#6c8c91,#87aa96,#9dc39b,#b7d7a8,#d2e5bc,#e7f1cc,#f6f9d8,#fcfcdc,#fcf8d5,#fbefc8,#f5e2b8,#ead4aa,#ddc39a,#cfb289,#c19e76,#b18a63,#a1754f,#986a44'
   ,paletteFn: 'gradient'
   ,attribution: '<a href="https://www.usgs.gov" target="_blank">USGS<a>'
});
dem30m.addLayer();

Documentation
Requires georaster-layer-for-leaflet

• Options
  
• url: required. Path to Cloud Optimized GeoTIFF (COG)
• minValue: minimum valid pixel value
• maxValue: maximum valid pixel value
• minZoom: minimum zoom level to display raster
• maxZoom: maximum zoom level to display raster
• color: solid color to use when no paletteFn is specified Default #007700
• zIndex: where to stack raster
• resampleMethod: passed to georaster, nearest (default) or bilinear
• resolution: passed to georaster, 256 (default)
• purge: on removeLayer() this removes data as well as default DOM removal
• values: values used to scale colors. Used in conjunction with colors
• colors: colors to be scaled. Used in conjunction with values
• valueScaleFn: function that applies math to band 1 pixels. Example, meters to feet:
      valueScaleFn: function (meters) { return parseInt(meters * 3.28084); }
• calcFn: function that applies multi band pixel math. Bands start at zero. Example:
      calcFn: function (bands) { return (bands[0] * bands[6]) / bands[7]; }
• paletteFn: (valueScaleFn & calcFn are applied to all palettes except test and lut)
• test: default. COG footprint in option color.
• grayscale: scales between minValue and maxValue, otherwise between 0-255
• gradient: scaled pixels using values and colors. Options values and colors required
• colorStop: discrete pixels using values and colors. Options values and colors required
• rgb: renders 3 band raster in pixel color
• lut: uses raster internal Look-Up Table to render pixels
• + Any options that need to be passed to georaster can be added to the options object

• Methods
  
• addLayer(): adds layer after instance creation or re-adds after removeLayer()
• removeLayer([purge = false]): removes layer from DOM after addLayer(). If purge is true, data is deleted, too.

That's it!