import solara
import leafmap
zoom = solara.reactive(14.0)
center = solara.reactive(([32.77558436781694, 22.63114929199219]))
class Map(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(before, name="after")
        self.add("layer_manger")
        self.split_map(before, after, left_label="before", right_label="after", add_close_button=True)
@solara.component
def Page():
    solara.lab.theme.dark = False
    Map.element(
        center = center.value,
        zoom = zoom.value,
        on_center = center.set,
        on_zoom = zoom.set,
        height="500px"
    )
    solara.Text(f"Center: {center.value}")
    solara.Text(f"Zoom: {zoom.value}")