import solara
import leafmap
# zoom = solara.reactive(12)
# center = solara.reactive(([23.5, 121.0]))
import solara
import leafmap
# Reactive variables for zoom level and map center
zoom_level = solara.reactive(14)
map_center = solara.reactive([32.774285, 22.625613])
class MapWithSplitView(leafmap.Map):
def __init__(self, before_url, after_url, **kwargs):
super().__init__(**kwargs)
# Add Cloud Optimized GeoTIFF (COG) layers
self.add_cog_layer(before_url, name="Before")
self.add_cog_layer(after_url, name="After")
# Configure split view for comparison
self.split_map(
before_url,
after_url,
left_label="Before",
right_label="After",
add_close_button=True
)
@solara.component
def Page():
# Set theme for the page
solara.lab.theme.dark = False
# URLs for comparison layers
before_layer_url = "https://github.com/snowedinh/gis/raw/refs/heads/main/Spring_tiff_cropped.tif"
after_layer_url = "https://github.com/snowedinh/gis/raw/refs/heads/main/timeWindowComposite_tiff_cropped.tif"
# Render the map component
MapWithSplitView.element(
before_url=before_layer_url,
after_url=after_layer_url,
center=map_center.value,
zoom=zoom_level.value,
on_center=map_center.set,
on_zoom=zoom_level.set,
height="750px"
)
# Display current map center and zoom level
solara.Text(f"Center: {map_center.value}")
solara.Text(f"Zoom: {zoom_level.value}")