Dynamic color and colorbar for each scalarField of multipleFromGeoTIFF

[lanas1234]

Hi,

I'm working with multiple band geotiff file using multipleFromGeoTIFF:

<script>
	
var map = L.map('map').setView([42.24,-8.75], 13);

var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
//var dark = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, example by <a href="http://www.digital-geography.com">digital-geography.com</a>'
}).addTo(map);

var freqs=["63 Hz","125 Hz","2 kHz","5 kHz"];
/* GeoTIFF with n bands */
d3.request("multiBand.tiff").responseType('arraybuffer').get(
	function (error, tiffData) {
		let scalarFields = L.ScalarField.multipleFromGeoTIFF(tiffData.response);
		let legend = {};
		let bounds = {};

		scalarFields.forEach(function (sf, index) {
			let layerSf = L.canvasLayer.scalarField(sf, {
				range: sf.range,
				color: chroma.scale(['000099','005500','FF0000']).domain(sf.range).classes(25),
				opacity: 0.85
			}).addTo(map);
		
			layerSf.on('click', function (e) {
			 if (e.value !== null) {
				 let v = e.value.toFixed(0);
				 let html = ('<span class="popupText">Pressure (dB): ' + v + '</span>');
				 L.popup()
				 .setLatLng(e.latlng)
				 .setContent(html)
				 .openOn(map);
			  }
			});
			legend[freqs[index]] = layerSf;
			bounds = layerSf.getBounds();
		 });
				
		// Layers control
		L.control.layers(legend, {}, {
			position: 'bottomleft',
			collapsed: false
			}).addTo(map);
		
		map.fitBounds(bounds);
		var bar = L.control.colorBar(chroma.scale(['000099','005500','FF0000']).domain([80,140]).classes(30), [80,140], {
			title: 'Pressure levels',
			units: 'dB',
			steps: 100,
			decimals: 1,
			width: 350,
			height: 20,
			position: 'bottomright',
			background: '#000',
			textColor: 'white',
			textLabels: ['80', '100', '140'],
			labels: [80, 100.0, 140.0],
			labelFontSize: 9
		}).addTo(map);
	
});
    </script>

that is my attempt to set a dynamic color for the data and a colorbar for each one of the bands of my multiBand geotiff, so everytime a new band is selected a new color and colorbar is set.
My attempt is not working, any clue on how to make this possible?

All the best