Transparency Slider for Basemap Gallery Widget

[shildebrand]

Does anyone know if there are plans to add a transparency slider to basemaps in the basemap gallery widget?  This is something i've been looking for in web app builder and experience builder but have not come across anything.  The one workaround i've found is to just add aerial image services directly to a web map and use the transparency slider in the layer list.  Any thoughts or suggestions would be greatly appreciated.

[MartinOwens1]

Robert Scheitlin's Enhanced Basemap Gallery widget has a transparency slider between basemaps for WAB. eBasemap Gallery Widget 

[JeffreyThompson2]

I have built a custom widget that uses the BasemapGallery from the API and implements an opacity slider. It's not really generalized enough to share the whole widget, but here is some key parts for the opacity slider.

const opacity = useRef(1)
const handleChangeOpacity = (event) => {
	jimuMapView.view.map.allLayers.items[0].opacity = event.target.value
		opacity.current = event.target.value
		const percentage = Math.round(opacity.current*100)
		document.getElementById('opacity').innerHTML = percentage.toString()
	}

const handleMapChange = () => {
	jimuMapView.view.map.allLayers.items[0].opacity = opacity.current
	}

//In return statement
<div className='border border-primary rounded-pill m-2'>
	<div className='d-flex justify-content-center'>
		<span className='m-1'>0%</span>
		<Slider
		        className='mt-2 w-75'
			defaultValue={opacity.current}
			min={0}
			max={1}
			step={.01}
			onChange={(event) => handleChangeOpacity(event)}
		/>
		<span className='m-1'>100%</span>
	</div>
	<div className='d-flex justify-content-center'>
		<span>Basemap Opacity: <span id='opacity'>100</span>%</span>
        </div>
</div>	
<div id='basemapDivCustom' onClick={() => handleMapChange()}></div>

//Step down a level in the React tree.
//In the lower level, use getElementById('basemapDivCustom') and use it to implment the API BasemapGallery.