103 split control

Creating a split-panel map

This notebook demonstrates how to add a split-panel map with geemap and folium. It also supports streamlit. Note that the ipyleaflet SplitControl does not support streamlit.

Uncomment the following line to install geemap if needed.

In [ ]:

# !pip install geemap

# !pip install geemap

In [ ]:

import ee
import folium
import geemap.foliumap as geemap

import ee import folium import geemap.foliumap as geemap

The split-panel map requires two layers: left_layer and right_layer. The layer instance can be a string representing a basemap, or an HTTP URL to a Cloud Optimized GeoTIFF (COG), or a folium TileLayer instance.

Using basemaps

In [ ]:

m = geemap.Map(height=500)
m.split_map(left_layer="TERRAIN", right_layer="OpenTopoMap")
m

m = geemap.Map(height=500) m.split_map(left_layer="TERRAIN", right_layer="OpenTopoMap") m

Show available basemaps.

In [ ]:

# geemap.basemaps.keys()

# geemap.basemaps.keys()

Using COG

In [ ]:

m = geemap.Map(height=600, center=[39.4948, -108.5492], zoom=12)
url = "https://github.com/opengeos/data/releases/download/raster/Libya-2023-07-01.tif"
url2 = "https://github.com/opengeos/data/releases/download/raster/Libya-2023-09-13.tif"
m.split_map(url, url2)
m

m = geemap.Map(height=600, center=[39.4948, -108.5492], zoom=12) url = "https://github.com/opengeos/data/releases/download/raster/Libya-2023-07-01.tif" url2 = "https://github.com/opengeos/data/releases/download/raster/Libya-2023-09-13.tif" m.split_map(url, url2) m

Using folium TileLayer

In [ ]:

m = geemap.Map(center=[40, -100], zoom=4)

url1 = "https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2001_Land_Cover_L48/wms?"
url2 = "https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2019_Land_Cover_L48/wms?"

left_layer = folium.WmsTileLayer(
    url=url1,
    layers="NLCD_2001_Land_Cover_L48",
    name="NLCD 2001",
    attr="MRLC",
    fmt="image/png",
    transparent=True,
)
right_layer = folium.WmsTileLayer(
    url=url2,
    layers="NLCD_2019_Land_Cover_L48",
    name="NLCD 2019",
    attr="MRLC",
    fmt="image/png",
    transparent=True,
)

m.split_map(left_layer, right_layer)
m

m = geemap.Map(center=[40, -100], zoom=4) url1 = "https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2001_Land_Cover_L48/wms?" url2 = "https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2019_Land_Cover_L48/wms?" left_layer = folium.WmsTileLayer( url=url1, layers="NLCD_2001_Land_Cover_L48", name="NLCD 2001", attr="MRLC", fmt="image/png", transparent=True, ) right_layer = folium.WmsTileLayer( url=url2, layers="NLCD_2019_Land_Cover_L48", name="NLCD 2019", attr="MRLC", fmt="image/png", transparent=True, ) m.split_map(left_layer, right_layer) m

Using Earth Engine layers

In [ ]:

m = geemap.Map(center=[39.3322, -106.7349], zoom=10)

m = geemap.Map(center=[39.3322, -106.7349], zoom=10)

In [ ]:

srtm = ee.Image("USGS/SRTMGL1_003")
hillshade = ee.Terrain.hillshade(srtm)

srtm = ee.Image("USGS/SRTMGL1_003") hillshade = ee.Terrain.hillshade(srtm)

In [ ]:

vis = {
    "min": 0,
    "max": 5000,
    "palette": ["006633", "E5FFCC", "662A00", "D8D8D8", "F5F5F5"],
}

vis = { "min": 0, "max": 5000, "palette": ["006633", "E5FFCC", "662A00", "D8D8D8", "F5F5F5"], }

In [ ]:

left_layer = geemap.ee_tile_layer(hillshade, name="Hillshade")
right_layer = geemap.ee_tile_layer(srtm, vis, name="DEM")

left_layer = geemap.ee_tile_layer(hillshade, name="Hillshade") right_layer = geemap.ee_tile_layer(srtm, vis, name="DEM")

In [ ]:

m.split_map(left_layer, right_layer)
m

m.split_map(left_layer, right_layer) m