SplitMap Control with transparent layers

The SplitMap Control does not work properly for transparent layers. For example, when adding a WMS layer with transparency (i.e., NoData area is transparent), there is a background basemap on the left blocking the layer on the right. There is still a gray background on the left even when the basemap is cleared. Ideally, the left layer with transparency would be directly overlaid on the right layer without being interfered by the basemap or gray background.

from ipyleaflet import Map, basemaps, basemap_to_tiles, SplitMapControl, WMSLayer

m = Map(center=(40, -100), zoom=4)
m.clear_layers()

right_layer = basemap_to_tiles(basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-11-11")
# left_layer = basemap_to_tiles(basemaps.NASAGIBS.ModisAquaBands721CR, "2017-11-11")
naip_url = 'https://services.nationalmap.gov/arcgis/services/USGSNAIPImagery/ImageServer/WMSServer?'
left_layer = WMSLayer(url=naip_url, layers='0', name='NAIP Imagery', format='image/png')

control = SplitMapControl(left_layer=left_layer, right_layer=right_layer)
m.add_control(control)

m

[giswqs]

@martinRenou Thanks to your suggestion. I was able to make it work. Note that the script below is only a portion of a much longer Earth Engine script. Therefore, you won’t be able to run it directly.

layer_index = 0

water_image = ee.Image(water_images.toList(water_images.size()).get(layer_index))
landsat_image = ee.Image(landsat_images.toList(landsat_images.size()).get(layer_index))


left_layer = geemap.ee_tile_layer(water_image, water_vis, 'Water')
right_layer = geemap.ee_tile_layer(landsat_image, landsat_vis, 'Landsat')

Map = geemap.Map()
Map.addLayer(landsat_image, landsat_vis, 'Landsat')
Map.split_map(left_layer, right_layer)
Map

[martinRenou]

Ok now I understand. So the code that should do what you want is:

from ipyleaflet import Map, basemaps, basemap_to_tiles, SplitMapControl, WMSLayer

m = Map(center=(40, -100), zoom=4, layers=[basemap_to_tiles(basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-11-11")])

naip_url = 'https://services.nationalmap.gov/arcgis/services/USGSNAIPImagery/ImageServer/WMSServer?'
left_layer = WMSLayer(url=naip_url, layers='0', name='NAIP Imagery', format='image/png')

control = SplitMapControl(left_layer=left_layer)
m.add_control(control)

m

But again, it does not work and lots of errors are appearing.

It looks like this works:

from ipyleaflet import Map, basemaps, basemap_to_tiles, SplitMapControl, WMSLayer

m = Map(center=(40, -100), zoom=4, layers=[basemap_to_tiles(basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-11-11")])

naip_url = 'https://services.nationalmap.gov/arcgis/services/USGSNAIPImagery/ImageServer/WMSServer?'
left_layer = WMSLayer(url=naip_url, layers='0', name='NAIP Imagery', format='image/png')

control = SplitMapControl(left_layer=left_layer, right_layer=basemap_to_tiles(basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-11-11"))
m.add_control(control)

m