# check out https://solara.dev/ for documentation
# or https://github.com/widgetti/solara/
# And check out https://py.cafe/maartenbreddels for more examples
import solara
import leafmap
# reactive variables will trigger a component rerender
# when changed.
# When you change the default (now 0), hit the embedded browser
# refresh button to reset the state
zoom = solara.reactive(14)
center = solara.reactive((32.76, 22.63))
# clicks = solara.reactive(0)
class Map(leafmap.Map):
def __init__(self, **kwargs):
super().__init__(**kwargs)
# Add what you want below
# self.add_stac_gui()
# self.add_basemap('Hybrid')
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
)
@solara.component
def Page():
with solara.Column(style={"min-width": "500px"}):
# solara components support reactive variables
# solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
# using 3rd party widget library require wiring up the events manually
# using zoom.value and zoom.set
Map.element( # type: ignore
zoom=zoom.value,
on_zoom=zoom.set,
center=center.value,
on_center=center.set,
scroll_wheel_zoom=True,
toolbar_ctrl=False,
data_ctrl=False,
# height="780px",
)
solara.Text(f"Zoom: {zoom.value}")
solara.Text(f"Center: {center.value}")
# Solara also supports ipywidgets
# remove the Page component and assign an ipywidget to
# the page variable, e.g.
# page = mywidget