import solara
import leafmap
# Define reactive zoom and center values
zoom = solara.reactive(14)
center = solara.reactive((32.774285, 22.625613))
# Define the Map class inheriting from leafmap.Map
class MyMap(leafmap.Map):
def __init__(self, **kwargs):
super().__init__(**kwargs)
before = "https://github.com/opengeos/datasets/releases/download/raster/Libya-2023-07-01.tif"
after = "https://github.com/opengeos/datasets/releases/download/raster/Libya-2023-09-13.tif"
self.add_cog_layer(before, name="Before")
self.add_cog_layer(after, name="After")
self.add("layer_manager")
self.split_map(before, after, left_label="Before", right_label="After", add_close_button=True)
# Define the Page component using solara.component decorator
@solara.component
def Page():
solara.lab.theme.dark = False
map_instance = MyMap(center=center.value, zoom=zoom.value)
# Return a single root element (VBox) containing the child components
return solara.VBox([
map_instance.element(
center=center.value,
zoom=zoom.value,
on_center=center.set,
on_zoom=zoom.set,
height="750px"
),
solara.Text(f"Center: {center.value}"),
solara.Text(f"Zoom: {zoom.value}")
])