toy_app/pages/03_cog.py

from ipyleaflet import Polygon, WidgetControl
from ipywidgets import widgets
import leafmap
import logging
import solara
from reacton import component as component

from toy_app.src import map_utils

log = logging.getLogger(__name__)


# Display a cog in leafmap
# Allow the user to draw a shape on the map
# Retrieve the user's shape and run metrics on it
# Used Stac to get the available collections from the 10m Annual Land Use Land Cover (9-class)
libya_fire_url = (
    "https://github.com/opengeos/data/releases/download/raster/Libya-2023-07-01.tif"
)
libya_fire_name = "Libya Fire"
libya_layer_visible = solara.reactive("True")
test_poly = {
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-72.949219, 42.447781],
                [-73.35022, 42.195969],
                [-73.372192, 41.799983],
                [-73.026123, 41.566142],
                [-72.608643, 41.343825],
                [-72.301025, 41.590797],
                [-71.993408, 41.442726],
                [-71.768188, 41.967659],
                [-71.28479, 42.138968],
                [-72.064819, 42.362603],
                [-72.614136, 42.195969],
                [-72.949219, 42.447781],
            ]
        ],
    },
}


class Map(leafmap.Map):
    """
    This is the map which will be displayed in the solara webapp
    """

    def __init__(self, **kwargs):
        log.warning("Starting Map init")
        kwargs["toolbar_control"] = False
        super().__init__(**kwargs)
        basemap = {
            "url": "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
            "attribution": "Google",
            "name": "Google Satellite",
            "opacity": 1.0,
        }
        self.add_tile_layer(**basemap, shown=False)
        self.add_layer_manager(opened=False)
        self.add_cog_layer(
            url=libya_fire_url, name=libya_fire_name
        )  # Just display the cog for now, the layer toggle isn't working as expected
        # self.toggle_libya_layer()
        # user_poly = map_utils.get_user_polygon(self)
        # if user_poly:
        #     log.warning(f"Polygon? {user_poly}")
        # self.add_click_detector_widget()
        self.add_button()

    def add_click_detector_widget(self, position="bottomright"):
        output = widgets.Output()
        control = WidgetControl(widget=output, position=position)
        self.add(control)

        def update_user_click(**kwargs):
            with output:
                print(kwargs)

        self.on_interaction(update_user_click)

    def add_button(self):
        button = widgets.Button(description="Get ROI")
        output = widgets.Output()

        def on_button_click(_):
            if self.user_roi is not None:
                with output:
                    output.clear_output()
                    print(map_utils.calculate_area(self.user_roi))

        button.on_click(on_button_click)

        widget = widgets.VBox([button, output])
        self.add_widget(widget)

    def toggle_libya_layer(self):
        if libya_layer_visible.value == "True":
            # The layer should be visible, if you don't find it, add it
            log.warning("Layer should be visible, checking it needs to be added")
            for layer in self.layers:
                l_name = layer.name
                if l_name == libya_fire_name:
                    return
            else:
                log.warning("Layer not found, adding new cog layer")
                self.add_cog_layer(url=libya_fire_url, name=libya_fire_name)
        else:
            # The layer should not be visible, if you find it, remove it
            log.warning("Layer should not be visible, checking to see if it's there")
            for layer in self.layers:
                l_name = layer.name
                if l_name != libya_fire_name:
                    continue
                log.warning("Layer found, removing it")
                self.remove_layer(l_name)


zoom = solara.reactive(2)
center = solara.reactive((20, 0))
drawing = solara.reactive(Polygon())


@component
def Page():
    l_map = Map()

    # def toggle_map():
    #     log.warning("Attempting to toggle the layer")
    #     if libya_layer_visible.value == "True":
    #         libya_layer_visible.set("False")
    #     else:
    #         libya_layer_visible.set("True")
    #     log.warning(f"New layer visibility is set to {libya_layer_visible.value}")
    def calc_area():
        log.info("Trying to calculate the area")
        # user_polygon = l_map.user_roi
        user_polygon = drawing.value
        log.warning(f"The polygon is: {user_polygon}")
        log.warning(f"The user_roi is: {l_map.user_rois}")

        print("Not yet implemented")

    with solara.Column(style={"min_width": "500px"}):
        # Map.element(  # type: ignore
        l_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,
            draw_control=True,
            on_draw=drawing.set,
            # data_ctrl=False,
            height="780px",
        )
        with solara.Row():
            solara.Text(f"Center: {center.value}")
            solara.Text(f"Zoom: {zoom.value}")

    with solara.Row():
        solara.Button(label="Calculate Polygon Area", on_click=calc_area)
        # solara.Button(label="Toggle Fire Image", on_click=toggle_map)  # Disable toggle for now since it's not working as expected