Add more apps (#5)

* Add more apps

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

notebooks/01_basic.ipynb

@@ -1,5 +1,14 @@
 {
  "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,

notebooks/02_inspector.ipynb

@@ -1,5 +1,14 @@
 {
  "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -8,7 +17,6 @@
    "source": [
     "import ee\n",
     "import geemap\n",
-    "\n",
     "import solara\n",
     "\n",
     "\n",
@@ -47,7 +55,7 @@
     "\n",
     "@solara.component\n",
     "def Page():\n",
-    "    with solara.Column(style={\"min-width\": \"500px\"}):\n",
+    "    with solara.Column(style={\"min-width\": \"500px\", \"isolation\": \"isolate\"}):\n",
     "        Map.element(\n",
     "            center=[40, -100],\n",
     "            zoom=4,\n",

notebooks/03_plotting.ipynb

@@ -1,5 +1,14 @@
 {
  "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -8,7 +17,6 @@
    "source": [
     "import ee\n",
     "import geemap\n",
-    "\n",
     "import solara\n",
     "\n",
     "\n",
@@ -40,7 +48,7 @@
     "\n",
     "@solara.component\n",
     "def Page():\n",
-    "    with solara.Column(style={\"min-width\": \"500px\"}):\n",
+    "    with solara.Column(style={\"min-width\": \"500px\", \"isolation\": \"isolate\"}):\n",
     "        Map.element(\n",
     "            center=[40, -100],\n",
     "            zoom=4,\n",

notebooks/04_split_map.ipynb

@@ -1,5 +1,14 @@
 {
  "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -8,7 +17,6 @@
    "source": [
     "import ee\n",
     "import geemap\n",
-    "\n",
     "import solara\n",
     "\n",
     "\n",
@@ -58,7 +66,7 @@
     "\n",
     "@solara.component\n",
     "def Page():\n",
-    "    with solara.Column(style={\"min-width\": \"500px\"}):\n",
+    "    with solara.Column(style={\"min-width\": \"500px\", \"isolation\": \"isolate\"}):\n",
     "        Map.element(\n",
     "            center=[40, -100],\n",
     "            zoom=4,\n",

notebooks/05_timelapse.ipynb

@@ -0,0 +1,72 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import geemap\n",
+    "import solara\n",
+    "\n",
+    "\n",
+    "class Map(geemap.Map):\n",
+    "    def __init__(self, **kwargs):\n",
+    "        super().__init__(**kwargs)\n",
+    "        self.add_basemap(\"Esri.WorldImagery\")\n",
+    "        self.add_gui(\"timelapse\", basemap=None)\n",
+    "\n",
+    "\n",
+    "@solara.component\n",
+    "def Page():\n",
+    "    with solara.Column(style={\"min-width\": \"500px\", \"isolation\": \"isolate\"}):\n",
+    "        Map.element(\n",
+    "            center=[20, -0],\n",
+    "            zoom=2,\n",
+    "            height=\"750px\",\n",
+    "            zoom_ctrl=False,\n",
+    "            measure_ctrl=False,\n",
+    "        )"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Page()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "geo",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

notebooks/06_timeseries.ipynb

@@ -0,0 +1,341 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import geemap\n",
+    "import ipywidgets as widgets\n",
+    "import solara\n",
+    "from geemap import get_current_year, jslink_slider_label\n",
+    "\n",
+    "\n",
+    "class Map(geemap.Map):\n",
+    "    def __init__(self, **kwargs):\n",
+    "        super().__init__(**kwargs)\n",
+    "        self.add_basemap(\"Esri.WorldImagery\")\n",
+    "        self.add_ts_gui(position=\"topright\")\n",
+    "\n",
+    "    def clean_up(self):\n",
+    "        if hasattr(self, \"slider_ctrl\") and self.slider_ctrl is not None:\n",
+    "            self.remove(self.slider_ctrl)\n",
+    "            delattr(self, \"slider_ctrl\")\n",
+    "\n",
+    "        layer = self.find_layer(\"Time series\")\n",
+    "        if layer is not None:\n",
+    "            self.remove(layer)\n",
+    "        layer = self.find_layer(\"Image X\")\n",
+    "        if layer is not None:\n",
+    "            self.remove(layer)\n",
+    "\n",
+    "        draw_layer = self.find_layer(\"Drawn Features\")\n",
+    "        if draw_layer is not None:\n",
+    "            self.remove(draw_layer)\n",
+    "\n",
+    "    def add_ts_gui(self, position=\"topright\", **kwargs):\n",
+    "\n",
+    "        widget_width = \"350px\"\n",
+    "        padding = \"0px 0px 0px 5px\"  # upper, right, bottom, left\n",
+    "        style = {\"description_width\": \"initial\"}\n",
+    "        current_year = get_current_year()\n",
+    "\n",
+    "        collection = widgets.Dropdown(\n",
+    "            options=[\n",
+    "                \"Landsat TM-ETM-OLI Surface Reflectance\",\n",
+    "            ],\n",
+    "            value=\"Landsat TM-ETM-OLI Surface Reflectance\",\n",
+    "            description=\"Collection:\",\n",
+    "            layout=widgets.Layout(width=widget_width, padding=padding),\n",
+    "            style=style,\n",
+    "        )\n",
+    "        bands = widgets.Dropdown(\n",
+    "            description=\"Bands:\",\n",
+    "            options=[\n",
+    "                \"Red/Green/Blue\",\n",
+    "                \"NIR/Red/Green\",\n",
+    "                \"SWIR2/SWIR1/NIR\",\n",
+    "                \"NIR/SWIR1/Red\",\n",
+    "                \"SWIR2/NIR/Red\",\n",
+    "                \"SWIR2/SWIR1/Red\",\n",
+    "                \"SWIR1/NIR/Blue\",\n",
+    "                \"NIR/SWIR1/Blue\",\n",
+    "                \"SWIR2/NIR/Green\",\n",
+    "                \"SWIR1/NIR/Red\",\n",
+    "            ],\n",
+    "            value=\"SWIR1/NIR/Red\",\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(width=\"195px\", padding=padding),\n",
+    "        )\n",
+    "\n",
+    "        frequency = widgets.Dropdown(\n",
+    "            description=\"Frequency:\",\n",
+    "            options=[\"year\", \"quarter\", \"month\"],\n",
+    "            value=\"year\",\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(width=\"150px\", padding=padding),\n",
+    "        )\n",
+    "\n",
+    "        start_year = widgets.IntSlider(\n",
+    "            description=\"Start Year:\",\n",
+    "            value=1984,\n",
+    "            min=1984,\n",
+    "            max=current_year,\n",
+    "            readout=False,\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(width=\"138px\", padding=padding),\n",
+    "        )\n",
+    "\n",
+    "        start_year_label = widgets.Label(\"1984\")\n",
+    "        jslink_slider_label(start_year, start_year_label)\n",
+    "\n",
+    "        end_year = widgets.IntSlider(\n",
+    "            description=\"End Year:\",\n",
+    "            value=current_year,\n",
+    "            min=1984,\n",
+    "            max=current_year,\n",
+    "            readout=False,\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(width=\"138px\", padding=padding),\n",
+    "        )\n",
+    "        end_year_label = widgets.Label(str(current_year))\n",
+    "        jslink_slider_label(end_year, end_year_label)\n",
+    "\n",
+    "        start_month = widgets.IntSlider(\n",
+    "            description=\"Start Month:\",\n",
+    "            value=5,\n",
+    "            min=1,\n",
+    "            max=12,\n",
+    "            readout=False,\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(width=\"145px\", padding=padding),\n",
+    "        )\n",
+    "\n",
+    "        start_month_label = widgets.Label(\n",
+    "            \"5\",\n",
+    "            layout=widgets.Layout(width=\"20px\", padding=padding),\n",
+    "        )\n",
+    "        jslink_slider_label(start_month, start_month_label)\n",
+    "\n",
+    "        end_month = widgets.IntSlider(\n",
+    "            description=\"End Month:\",\n",
+    "            value=10,\n",
+    "            min=1,\n",
+    "            max=12,\n",
+    "            readout=False,\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(width=\"155px\", padding=padding),\n",
+    "        )\n",
+    "\n",
+    "        end_month_label = widgets.Label(\"10\")\n",
+    "        jslink_slider_label(end_month, end_month_label)\n",
+    "\n",
+    "        output = widgets.Output()\n",
+    "\n",
+    "        button_width = \"113px\"\n",
+    "        apply_btn = widgets.Button(\n",
+    "            description=\"Time slider\",\n",
+    "            button_style=\"primary\",\n",
+    "            tooltip=\"Click to create timeseries\",\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=\"0px\", width=button_width),\n",
+    "        )\n",
+    "\n",
+    "        split_btn = widgets.Button(\n",
+    "            description=\"Split map\",\n",
+    "            button_style=\"primary\",\n",
+    "            tooltip=\"Click to create timeseries\",\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=\"0px\", width=button_width),\n",
+    "        )\n",
+    "\n",
+    "        reset_btn = widgets.Button(\n",
+    "            description=\"Reset\",\n",
+    "            button_style=\"primary\",\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=\"0px\", width=button_width),\n",
+    "        )\n",
+    "\n",
+    "        vbox = widgets.VBox(\n",
+    "            [\n",
+    "                collection,\n",
+    "                widgets.HBox([bands, frequency]),\n",
+    "                widgets.HBox([start_year, start_year_label, end_year, end_year_label]),\n",
+    "                widgets.HBox(\n",
+    "                    [start_month, start_month_label, end_month, end_month_label]\n",
+    "                ),\n",
+    "                widgets.HBox([apply_btn, split_btn, reset_btn]),\n",
+    "                output,\n",
+    "            ]\n",
+    "        )\n",
+    "        self.add_widget(vbox, position=position, add_header=True)\n",
+    "\n",
+    "        def apply_btn_click(change):\n",
+    "\n",
+    "            if hasattr(self, \"slider_ctrl\") and self.slider_ctrl is not None:\n",
+    "                self.remove(self.slider_ctrl)\n",
+    "                delattr(self, \"slider_ctrl\")\n",
+    "\n",
+    "            with output:\n",
+    "                output.clear_output()\n",
+    "                if self.user_roi is None:\n",
+    "                    output.append_stdout(\"Please draw a ROI first.\")\n",
+    "                else:\n",
+    "                    output.append_stdout(\"Creating time series...\")\n",
+    "                    collection = geemap.landsat_timeseries(\n",
+    "                        roi=self.user_roi,\n",
+    "                        start_year=start_year.value,\n",
+    "                        end_year=end_year.value,\n",
+    "                        start_date=str(start_month.value).zfill(2) + \"-01\",\n",
+    "                        end_date=str(end_month.value).zfill(2) + \"-01\",\n",
+    "                        frequency=frequency.value,\n",
+    "                    )\n",
+    "                    vis_params = {\n",
+    "                        \"bands\": bands.value.split(\"/\"),\n",
+    "                        \"min\": 0,\n",
+    "                        \"max\": 0.4,\n",
+    "                    }\n",
+    "\n",
+    "                    if frequency.value == \"year\":\n",
+    "                        date_format = \"YYYY\"\n",
+    "                    elif frequency.value == \"quarter\":\n",
+    "                        date_format = \"YYYY-MM\"\n",
+    "                    elif frequency.value == \"month\":\n",
+    "                        date_format = \"YYYY-MM\"\n",
+    "\n",
+    "                    self.add_time_slider(\n",
+    "                        collection,\n",
+    "                        region=self.user_roi,\n",
+    "                        vis_params=vis_params,\n",
+    "                        date_format=date_format,\n",
+    "                    )\n",
+    "                    self._draw_control.clear()\n",
+    "                    draw_layer = self.find_layer(\"Drawn Features\")\n",
+    "                    if draw_layer is not None:\n",
+    "                        self.remove(draw_layer)\n",
+    "                    output.clear_output()\n",
+    "\n",
+    "        apply_btn.on_click(apply_btn_click)\n",
+    "\n",
+    "        def split_btn_click(change):\n",
+    "\n",
+    "            if hasattr(self, \"slider_ctrl\") and self.slider_ctrl is not None:\n",
+    "                self.remove(self.slider_ctrl)\n",
+    "                delattr(self, \"slider_ctrl\")\n",
+    "\n",
+    "            with output:\n",
+    "                output.clear_output()\n",
+    "                if self.user_roi is None:\n",
+    "                    output.append_stdout(\"Please draw a ROI first.\")\n",
+    "                else:\n",
+    "                    output.append_stdout(\"Creating time series...\")\n",
+    "                    collection = geemap.landsat_timeseries(\n",
+    "                        roi=self.user_roi,\n",
+    "                        start_year=start_year.value,\n",
+    "                        end_year=end_year.value,\n",
+    "                        start_date=str(start_month.value).zfill(2) + \"-01\",\n",
+    "                        end_date=str(end_month.value).zfill(2) + \"-01\",\n",
+    "                        frequency=frequency.value,\n",
+    "                    )\n",
+    "                    vis_params = {\n",
+    "                        \"bands\": bands.value.split(\"/\"),\n",
+    "                        \"min\": 0,\n",
+    "                        \"max\": 0.4,\n",
+    "                    }\n",
+    "\n",
+    "                    if frequency.value == \"year\":\n",
+    "                        date_format = \"YYYY\"\n",
+    "                        dates = geemap.image_dates(collection, date_format).getInfo()\n",
+    "                    elif frequency.value == \"quarter\":\n",
+    "                        date_format = \"YYYY-MM\"\n",
+    "                        dates = geemap.image_dates(collection, date_format).getInfo()\n",
+    "                    elif frequency.value == \"month\":\n",
+    "                        date_format = \"YYYY-MM\"\n",
+    "                        dates = geemap.image_dates(collection, date_format).getInfo()\n",
+    "\n",
+    "                    self.ts_inspector(\n",
+    "                        collection,\n",
+    "                        left_names=dates,\n",
+    "                        left_vis=vis_params,\n",
+    "                        add_close_button=True,\n",
+    "                    )\n",
+    "                    output.clear_output()\n",
+    "\n",
+    "                    try:\n",
+    "                        self._draw_control.clear()\n",
+    "                        draw_layer = self.find_layer(\"Drawn Features\")\n",
+    "                        if draw_layer is not None:\n",
+    "                            self.remove(draw_layer)\n",
+    "                    except Exception as e:\n",
+    "                        print(e)\n",
+    "\n",
+    "        split_btn.on_click(split_btn_click)\n",
+    "\n",
+    "        def reset_btn_click(change):\n",
+    "            output.clear_output()\n",
+    "            self.clean_up()\n",
+    "\n",
+    "        reset_btn.on_click(reset_btn_click)\n",
+    "\n",
+    "\n",
+    "@solara.component\n",
+    "def Page():\n",
+    "    with solara.Column(style={\"min-width\": \"500px\"}):\n",
+    "        Map.element(\n",
+    "            center=[20, -0],\n",
+    "            zoom=2,\n",
+    "            height=\"750px\",\n",
+    "            zoom_ctrl=False,\n",
+    "            measure_ctrl=False,\n",
+    "        )"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Page()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "geo",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

notebooks/07_jrc.ipynb

@@ -0,0 +1,198 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ee\n",
+    "import geemap\n",
+    "import ipywidgets as widgets\n",
+    "from IPython.display import display\n",
+    "import solara\n",
+    "\n",
+    "\n",
+    "class Map(geemap.Map):\n",
+    "    def __init__(self, **kwargs):\n",
+    "        super().__init__(**kwargs)\n",
+    "        self.add_basemap(\"Esri.WorldImagery\")\n",
+    "        self.add_ee_data()\n",
+    "        self.add_buttons(add_header=True)\n",
+    "\n",
+    "    def add_ee_data(self):\n",
+    "\n",
+    "        dataset = ee.Image(\"JRC/GSW1_4/GlobalSurfaceWater\")\n",
+    "        image = dataset.select([\"occurrence\"])\n",
+    "        vis_params = {\n",
+    "            \"min\": 0.0,\n",
+    "            \"max\": 100.0,\n",
+    "            \"palette\": [\"ffffff\", \"ffbbbb\", \"0000ff\"],\n",
+    "        }\n",
+    "        self.addLayer(image, vis_params, \"Occurrence\")\n",
+    "        self.add_colorbar(\n",
+    "            vis_params, label=\"Water occurrence (%)\", layer_name=\"Occurrence\"\n",
+    "        )\n",
+    "\n",
+    "    def add_buttons(self, position=\"topright\", **kwargs):\n",
+    "        padding = \"0px 5px 0px 5px\"\n",
+    "        widget = widgets.VBox(layout=widgets.Layout(padding=padding))\n",
+    "        layout = widgets.Layout(width=\"auto\")\n",
+    "        style = {\"description_width\": \"initial\"}\n",
+    "        hist_btn = widgets.Button(description=\"Occurrence\", layout=layout)\n",
+    "        bar_btn = widgets.Button(description=\"Monthly history\", layout=layout)\n",
+    "        reset_btn = widgets.Button(description=\"Reset\", layout=layout)\n",
+    "        scale = widgets.IntSlider(\n",
+    "            min=30, max=1000, value=90, description=\"Scale\", layout=layout, style=style\n",
+    "        )\n",
+    "        month_slider = widgets.IntRangeSlider(\n",
+    "            description=\"Months\",\n",
+    "            value=[5, 10],\n",
+    "            min=1,\n",
+    "            max=12,\n",
+    "            step=1,\n",
+    "            layout=layout,\n",
+    "            style=style,\n",
+    "        )\n",
+    "        widget.children = [\n",
+    "            widgets.HBox([hist_btn, bar_btn, reset_btn]),\n",
+    "            month_slider,\n",
+    "            scale,\n",
+    "        ]\n",
+    "        self.add_widget(widget, position=position, **kwargs)\n",
+    "        output = widgets.Output()\n",
+    "        self.add_widget(output, position=\"bottomleft\", add_header=False)\n",
+    "\n",
+    "        def hist_btn_click(b):\n",
+    "            region = self.user_roi\n",
+    "            if region is not None:\n",
+    "                output.clear_output()\n",
+    "                output.append_stdout(\"Computing histogram...\")\n",
+    "                image = ee.Image(\"JRC/GSW1_4/GlobalSurfaceWater\").select([\"occurrence\"])\n",
+    "                self.default_style = {\"cursor\": \"wait\"}\n",
+    "                hist = geemap.image_histogram(\n",
+    "                    image,\n",
+    "                    region,\n",
+    "                    scale=scale.value,\n",
+    "                    height=350,\n",
+    "                    width=550,\n",
+    "                    x_label=\"Water Occurrence (%)\",\n",
+    "                    y_label=\"Pixel Count\",\n",
+    "                    layout_args={\n",
+    "                        \"title\": dict(x=0.5),\n",
+    "                        \"margin\": dict(l=0, r=0, t=10, b=0),\n",
+    "                    },\n",
+    "                    return_df=False,\n",
+    "                )\n",
+    "\n",
+    "                with output:\n",
+    "                    output.clear_output()\n",
+    "                    display(hist)\n",
+    "                self.default_style = {\"cursor\": \"default\"}\n",
+    "            else:\n",
+    "                output.clear_output()\n",
+    "                with output:\n",
+    "                    output.append_stdout(\"Please draw a region of interest first.\")\n",
+    "\n",
+    "        hist_btn.on_click(hist_btn_click)\n",
+    "\n",
+    "        def bar_btn_click(b):\n",
+    "            region = self.user_roi\n",
+    "            if region is not None:\n",
+    "                self.default_style = {\"cursor\": \"wait\"}\n",
+    "                output.clear_output()\n",
+    "                output.append_stdout(\"Computing monthly history...\")\n",
+    "                bar = geemap.jrc_hist_monthly_history(\n",
+    "                    region=region,\n",
+    "                    scale=scale.value,\n",
+    "                    height=350,\n",
+    "                    width=550,\n",
+    "                    layout_args={\n",
+    "                        \"title\": dict(x=0.5),\n",
+    "                        \"margin\": dict(l=0, r=0, t=10, b=0),\n",
+    "                    },\n",
+    "                    frequency=\"month\",\n",
+    "                    start_month=month_slider.value[0],\n",
+    "                    end_month=month_slider.value[1],\n",
+    "                    denominator=1e4,\n",
+    "                    y_label=\"Area (ha)\",\n",
+    "                )\n",
+    "\n",
+    "                with output:\n",
+    "                    output.clear_output()\n",
+    "                    display(bar)\n",
+    "                self.default_style = {\"cursor\": \"default\"}\n",
+    "            else:\n",
+    "                output.clear_output()\n",
+    "                with output:\n",
+    "                    output.append_stdout(\"Please draw a region of interest first.\")\n",
+    "\n",
+    "        bar_btn.on_click(bar_btn_click)\n",
+    "\n",
+    "        def reset_btn_click(b):\n",
+    "            self._draw_control.clear()\n",
+    "            output.clear_output()\n",
+    "\n",
+    "        reset_btn.on_click(reset_btn_click)\n",
+    "\n",
+    "\n",
+    "@solara.component\n",
+    "def Page():\n",
+    "    with solara.Column(style={\"min-width\": \"500px\"}):\n",
+    "        Map.element(\n",
+    "            center=[20, -0],\n",
+    "            zoom=2,\n",
+    "            height=\"750px\",\n",
+    "            zoom_ctrl=False,\n",
+    "            measure_ctrl=False,\n",
+    "        )"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Page()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "geo",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

notebooks/08_compare.ipynb

@@ -0,0 +1,328 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# %pip install -U geemap solara"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ee\n",
+    "import geemap\n",
+    "import ipywidgets as widgets\n",
+    "import solara\n",
+    "from datetime import date\n",
+    "\n",
+    "\n",
+    "class Map(geemap.Map):\n",
+    "    def __init__(self, **kwargs):\n",
+    "        super().__init__(**kwargs)\n",
+    "        self.add_basemap(\"Esri.WorldImagery\")\n",
+    "        self.add_gui_widget(add_header=True)\n",
+    "\n",
+    "    def clean_up(self):\n",
+    "\n",
+    "        layers = [\n",
+    "            \"Pre-event Image\",\n",
+    "            \"Post-event Image\",\n",
+    "            \"Pre-event NDWI\",\n",
+    "            \"Post-event NDWI\",\n",
+    "            \"Pre-event Water\",\n",
+    "            \"Post-event Water\",\n",
+    "            \"Disappeared Water\",\n",
+    "            \"New Water\",\n",
+    "        ]\n",
+    "        for layer_name in layers:\n",
+    "            layer = self.find_layer(layer_name)\n",
+    "            if layer is not None:\n",
+    "                self.remove(layer)\n",
+    "\n",
+    "    def add_gui_widget(self, position=\"topright\", **kwargs):\n",
+    "\n",
+    "        widget = widgets.VBox(layout=widgets.Layout(padding=\"0px 5px 0px 5px\"))\n",
+    "        pre_widget = widgets.HBox()\n",
+    "        post_widget = widgets.HBox()\n",
+    "        layout = widgets.Layout(width=\"auto\")\n",
+    "        style = {\"description_width\": \"initial\"}\n",
+    "        padding = \"0px 5px 0px 5px\"\n",
+    "        pre_start_date = widgets.DatePicker(\n",
+    "            description=\"Start\",\n",
+    "            value=date(2014, 1, 1),\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"160px\"),\n",
+    "        )\n",
+    "        pre_end_date = widgets.DatePicker(\n",
+    "            description=\"End\",\n",
+    "            value=date(2014, 12, 31),\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"160px\"),\n",
+    "        )\n",
+    "        pre_cloud_cover = widgets.IntSlider(\n",
+    "            description=\"Cloud\",\n",
+    "            min=0,\n",
+    "            max=100,\n",
+    "            value=25,\n",
+    "            step=1,\n",
+    "            readout=False,\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"130px\"),\n",
+    "        )\n",
+    "        pre_cloud_label = widgets.Label(value=str(pre_cloud_cover.value))\n",
+    "        geemap.jslink_slider_label(pre_cloud_cover, pre_cloud_label)\n",
+    "        pre_widget.children = [\n",
+    "            pre_start_date,\n",
+    "            pre_end_date,\n",
+    "            pre_cloud_cover,\n",
+    "            pre_cloud_label,\n",
+    "        ]\n",
+    "        post_start_date = widgets.DatePicker(\n",
+    "            description=\"Start\",\n",
+    "            value=date(2024, 1, 1),\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"160px\"),\n",
+    "        )\n",
+    "        post_end_date = widgets.DatePicker(\n",
+    "            description=\"End\",\n",
+    "            value=date(2024, 12, 31),\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"160px\"),\n",
+    "        )\n",
+    "        post_cloud_cover = widgets.IntSlider(\n",
+    "            description=\"Cloud\",\n",
+    "            min=0,\n",
+    "            max=100,\n",
+    "            value=30,\n",
+    "            step=1,\n",
+    "            readout=False,\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"130px\"),\n",
+    "        )\n",
+    "        post_cloud_label = widgets.Label(value=str(post_cloud_cover.value))\n",
+    "        geemap.jslink_slider_label(post_cloud_cover, post_cloud_label)\n",
+    "        post_widget.children = [\n",
+    "            post_start_date,\n",
+    "            post_end_date,\n",
+    "            post_cloud_cover,\n",
+    "            post_cloud_label,\n",
+    "        ]\n",
+    "\n",
+    "        apply_btn = widgets.Button(description=\"Apply\", layout=layout)\n",
+    "        reset_btn = widgets.Button(description=\"Reset\", layout=layout)\n",
+    "        buttons = widgets.HBox([apply_btn, reset_btn])\n",
+    "        output = widgets.Output()\n",
+    "\n",
+    "        use_split = widgets.Checkbox(\n",
+    "            value=False,\n",
+    "            description=\"Split map\",\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"100px\"),\n",
+    "        )\n",
+    "\n",
+    "        use_ndwi = widgets.Checkbox(\n",
+    "            value=False,\n",
+    "            description=\"Compute NDWI\",\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"160px\"),\n",
+    "        )\n",
+    "\n",
+    "        ndwi_threhold = widgets.FloatSlider(\n",
+    "            description=\"Threshold\",\n",
+    "            min=-1,\n",
+    "            max=1,\n",
+    "            value=0,\n",
+    "            step=0.05,\n",
+    "            readout=True,\n",
+    "            style=style,\n",
+    "            layout=widgets.Layout(padding=padding, width=\"230px\"),\n",
+    "        )\n",
+    "\n",
+    "        options = widgets.HBox(\n",
+    "            [\n",
+    "                use_split,\n",
+    "                use_ndwi,\n",
+    "                ndwi_threhold,\n",
+    "            ]\n",
+    "        )\n",
+    "\n",
+    "        widget.children = [pre_widget, post_widget, options, buttons, output]\n",
+    "        self.add_widget(widget, position=position, **kwargs)\n",
+    "\n",
+    "        def apply_btn_click(b):\n",
+    "\n",
+    "            marker_layer = self.find_layer(\"Search location\")\n",
+    "            if marker_layer is not None:\n",
+    "                self.remove(marker_layer)\n",
+    "            self.clean_up()\n",
+    "\n",
+    "            if self.user_roi is None:\n",
+    "                output.clear_output()\n",
+    "                output.append_stdout(\"Please draw a ROI first.\")\n",
+    "            elif (\n",
+    "                pre_start_date.value is None\n",
+    "                or pre_end_date.value is None\n",
+    "                or post_start_date.value is None\n",
+    "                or post_end_date.value is None\n",
+    "            ):\n",
+    "                output.clear_output()\n",
+    "                output.append_stdout(\"Please select start and end dates.\")\n",
+    "\n",
+    "            elif self.user_roi is not None:\n",
+    "                output.clear_output()\n",
+    "                output.append_stdout(\"Computing... Please wait.\")\n",
+    "                roi = ee.FeatureCollection(self.user_roi)\n",
+    "                vis_params = {\"bands\": [\"B6\", \"B5\", \"B4\"], \"min\": 0, \"max\": 0.4}\n",
+    "                if pre_start_date.value.strftime(\"%Y-%m-%d\") < \"2013-04-11\":\n",
+    "                    pre_col = geemap.landsat_timeseries(\n",
+    "                        roi,\n",
+    "                        start_year=pre_start_date.value.year,\n",
+    "                        end_year=pre_end_date.value.year,\n",
+    "                    ).select([\"SWIR1\", \"NIR\", \"Red\", \"Green\"], [\"B6\", \"B5\", \"B4\", \"B3\"])\n",
+    "                else:\n",
+    "                    pre_col = (\n",
+    "                        ee.ImageCollection(\"NASA/HLS/HLSL30/v002\")\n",
+    "                        .filterBounds(roi)\n",
+    "                        .filterDate(\n",
+    "                            pre_start_date.value.strftime(\"%Y-%m-%d\"),\n",
+    "                            pre_end_date.value.strftime(\"%Y-%m-%d\"),\n",
+    "                        )\n",
+    "                        .filter(ee.Filter.lt(\"CLOUD_COVERAGE\", pre_cloud_cover.value))\n",
+    "                    )\n",
+    "\n",
+    "                if post_start_date.value.strftime(\"%Y-%m-%d\") < \"2013-04-11\":\n",
+    "                    post_col = geemap.landsat_timeseries(\n",
+    "                        roi,\n",
+    "                        start_year=post_start_date.value.year,\n",
+    "                        end_year=post_end_date.value.year,\n",
+    "                    ).select([\"SWIR1\", \"NIR\", \"Red\", \"Green\"], [\"B6\", \"B5\", \"B4\", \"B3\"])\n",
+    "                else:\n",
+    "                    post_col = (\n",
+    "                        ee.ImageCollection(\"NASA/HLS/HLSL30/v002\")\n",
+    "                        .filterBounds(roi)\n",
+    "                        .filterDate(\n",
+    "                            post_start_date.value.strftime(\"%Y-%m-%d\"),\n",
+    "                            post_end_date.value.strftime(\"%Y-%m-%d\"),\n",
+    "                        )\n",
+    "                        .filter(ee.Filter.lt(\"CLOUD_COVERAGE\", post_cloud_cover.value))\n",
+    "                    )\n",
+    "\n",
+    "                pre_img = pre_col.median().clip(roi)\n",
+    "                post_img = post_col.median().clip(roi)\n",
+    "\n",
+    "                if use_split.value:\n",
+    "                    left_layer = geemap.ee_tile_layer(\n",
+    "                        pre_img, vis_params, \"Pre-event Image\"\n",
+    "                    )\n",
+    "                    right_layer = geemap.ee_tile_layer(\n",
+    "                        post_img, vis_params, \"Post-event Image\"\n",
+    "                    )\n",
+    "                    self.split_map(\n",
+    "                        left_layer,\n",
+    "                        right_layer,\n",
+    "                        add_close_button=True,\n",
+    "                        left_label=\"Pre-event\",\n",
+    "                        right_label=\"Post-event\",\n",
+    "                    )\n",
+    "                else:\n",
+    "                    pre_img = pre_col.median().clip(roi)\n",
+    "                    post_img = post_col.median().clip(roi)\n",
+    "                    self.add_layer(pre_img, vis_params, \"Pre-event Image\")\n",
+    "                    self.add_layer(post_img, vis_params, \"Post-event Image\")\n",
+    "\n",
+    "                if use_ndwi.value and (not use_split.value):\n",
+    "                    pre_ndwi = pre_img.normalizedDifference([\"B3\", \"B6\"]).rename(\"NDWI\")\n",
+    "                    post_ndwi = post_img.normalizedDifference([\"B3\", \"B6\"]).rename(\n",
+    "                        \"NDWI\"\n",
+    "                    )\n",
+    "                    ndwi_vis = {\"min\": -1, \"max\": 1, \"palette\": \"ndwi\"}\n",
+    "                    self.add_layer(pre_ndwi, ndwi_vis, \"Pre-event NDWI\", False)\n",
+    "                    self.add_layer(post_ndwi, ndwi_vis, \"Post-event NDWI\", False)\n",
+    "\n",
+    "                    pre_water = pre_ndwi.gt(ndwi_threhold.value)\n",
+    "                    post_water = post_ndwi.gt(ndwi_threhold.value)\n",
+    "                    self.add_layer(\n",
+    "                        pre_water.selfMask(), {\"palette\": \"blue\"}, \"Pre-event Water\"\n",
+    "                    )\n",
+    "                    self.add_layer(\n",
+    "                        post_water.selfMask(), {\"palette\": \"red\"}, \"Post-event Water\"\n",
+    "                    )\n",
+    "                    new_water = post_water.subtract(pre_water).gt(0)\n",
+    "                    disappear_water = pre_water.subtract(post_water).gt(0)\n",
+    "                    self.add_layer(\n",
+    "                        disappear_water.selfMask(),\n",
+    "                        {\"palette\": \"brown\"},\n",
+    "                        \"Disappeared Water\",\n",
+    "                    )\n",
+    "                    self.add_layer(\n",
+    "                        new_water.selfMask(), {\"palette\": \"cyan\"}, \"New Water\"\n",
+    "                    )\n",
+    "\n",
+    "                    with output:\n",
+    "                        output.clear_output()\n",
+    "\n",
+    "                output.clear_output()\n",
+    "\n",
+    "        apply_btn.on_click(apply_btn_click)\n",
+    "\n",
+    "        def reset_btn_click(b):\n",
+    "            self.clean_up()\n",
+    "            self._draw_control.clear()\n",
+    "            draw_layer = self.find_layer(\"Drawn Features\")\n",
+    "            if draw_layer is not None:\n",
+    "                self.remove(draw_layer)\n",
+    "            output.clear_output()\n",
+    "\n",
+    "        reset_btn.on_click(reset_btn_click)\n",
+    "\n",
+    "\n",
+    "@solara.component\n",
+    "def Page():\n",
+    "    with solara.Column(style={\"min-width\": \"500px\"}):\n",
+    "        Map.element(\n",
+    "            center=[20, -0],\n",
+    "            zoom=2,\n",
+    "            height=\"750px\",\n",
+    "            zoom_ctrl=False,\n",
+    "            measure_ctrl=False,\n",
+    "        )"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Page()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "geo",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

pages/05_timelapse.py

@@ -0,0 +1,21 @@
+import geemap
+import solara
+
+
+class Map(geemap.Map):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.add_basemap("Esri.WorldImagery")
+        self.add_gui("timelapse", basemap=None)
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px", "isolation": "isolate"}):
+        Map.element(
+            center=[20, -0],
+            zoom=2,
+            height="750px",
+            zoom_ctrl=False,
+            measure_ctrl=False,
+        )

pages/06_timeseries.py

@@ -0,0 +1,283 @@
+import geemap
+import ipywidgets as widgets
+import solara
+from geemap import get_current_year, jslink_slider_label
+
+
+class Map(geemap.Map):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.add_basemap("Esri.WorldImagery")
+        self.add_ts_gui(position="topright")
+
+    def clean_up(self):
+        if hasattr(self, "slider_ctrl") and self.slider_ctrl is not None:
+            self.remove(self.slider_ctrl)
+            delattr(self, "slider_ctrl")
+
+        layer = self.find_layer("Time series")
+        if layer is not None:
+            self.remove(layer)
+        layer = self.find_layer("Image X")
+        if layer is not None:
+            self.remove(layer)
+
+        draw_layer = self.find_layer("Drawn Features")
+        if draw_layer is not None:
+            self.remove(draw_layer)
+
+    def add_ts_gui(self, position="topright", **kwargs):
+
+        widget_width = "350px"
+        padding = "0px 0px 0px 5px"  # upper, right, bottom, left
+        style = {"description_width": "initial"}
+        current_year = get_current_year()
+
+        collection = widgets.Dropdown(
+            options=[
+                "Landsat TM-ETM-OLI Surface Reflectance",
+            ],
+            value="Landsat TM-ETM-OLI Surface Reflectance",
+            description="Collection:",
+            layout=widgets.Layout(width=widget_width, padding=padding),
+            style=style,
+        )
+        bands = widgets.Dropdown(
+            description="Bands:",
+            options=[
+                "Red/Green/Blue",
+                "NIR/Red/Green",
+                "SWIR2/SWIR1/NIR",
+                "NIR/SWIR1/Red",
+                "SWIR2/NIR/Red",
+                "SWIR2/SWIR1/Red",
+                "SWIR1/NIR/Blue",
+                "NIR/SWIR1/Blue",
+                "SWIR2/NIR/Green",
+                "SWIR1/NIR/Red",
+            ],
+            value="SWIR1/NIR/Red",
+            style=style,
+            layout=widgets.Layout(width="195px", padding=padding),
+        )
+
+        frequency = widgets.Dropdown(
+            description="Frequency:",
+            options=["year", "quarter", "month"],
+            value="year",
+            style=style,
+            layout=widgets.Layout(width="150px", padding=padding),
+        )
+
+        start_year = widgets.IntSlider(
+            description="Start Year:",
+            value=1984,
+            min=1984,
+            max=current_year,
+            readout=False,
+            style=style,
+            layout=widgets.Layout(width="138px", padding=padding),
+        )
+
+        start_year_label = widgets.Label("1984")
+        jslink_slider_label(start_year, start_year_label)
+
+        end_year = widgets.IntSlider(
+            description="End Year:",
+            value=current_year,
+            min=1984,
+            max=current_year,
+            readout=False,
+            style=style,
+            layout=widgets.Layout(width="138px", padding=padding),
+        )
+        end_year_label = widgets.Label(str(current_year))
+        jslink_slider_label(end_year, end_year_label)
+
+        start_month = widgets.IntSlider(
+            description="Start Month:",
+            value=5,
+            min=1,
+            max=12,
+            readout=False,
+            style=style,
+            layout=widgets.Layout(width="145px", padding=padding),
+        )
+
+        start_month_label = widgets.Label(
+            "5",
+            layout=widgets.Layout(width="20px", padding=padding),
+        )
+        jslink_slider_label(start_month, start_month_label)
+
+        end_month = widgets.IntSlider(
+            description="End Month:",
+            value=10,
+            min=1,
+            max=12,
+            readout=False,
+            style=style,
+            layout=widgets.Layout(width="155px", padding=padding),
+        )
+
+        end_month_label = widgets.Label("10")
+        jslink_slider_label(end_month, end_month_label)
+
+        output = widgets.Output()
+
+        button_width = "113px"
+        apply_btn = widgets.Button(
+            description="Time slider",
+            button_style="primary",
+            tooltip="Click to create timeseries",
+            style=style,
+            layout=widgets.Layout(padding="0px", width=button_width),
+        )
+
+        split_btn = widgets.Button(
+            description="Split map",
+            button_style="primary",
+            tooltip="Click to create timeseries",
+            style=style,
+            layout=widgets.Layout(padding="0px", width=button_width),
+        )
+
+        reset_btn = widgets.Button(
+            description="Reset",
+            button_style="primary",
+            style=style,
+            layout=widgets.Layout(padding="0px", width=button_width),
+        )
+
+        vbox = widgets.VBox(
+            [
+                collection,
+                widgets.HBox([bands, frequency]),
+                widgets.HBox([start_year, start_year_label, end_year, end_year_label]),
+                widgets.HBox(
+                    [start_month, start_month_label, end_month, end_month_label]
+                ),
+                widgets.HBox([apply_btn, split_btn, reset_btn]),
+                output,
+            ]
+        )
+        self.add_widget(vbox, position=position, add_header=True)
+
+        def apply_btn_click(change):
+
+            if hasattr(self, "slider_ctrl") and self.slider_ctrl is not None:
+                self.remove(self.slider_ctrl)
+                delattr(self, "slider_ctrl")
+
+            with output:
+                output.clear_output()
+                if self.user_roi is None:
+                    output.append_stdout("Please draw a ROI first.")
+                else:
+                    output.append_stdout("Creating time series...")
+                    collection = geemap.landsat_timeseries(
+                        roi=self.user_roi,
+                        start_year=start_year.value,
+                        end_year=end_year.value,
+                        start_date=str(start_month.value).zfill(2) + "-01",
+                        end_date=str(end_month.value).zfill(2) + "-01",
+                        frequency=frequency.value,
+                    )
+                    vis_params = {
+                        "bands": bands.value.split("/"),
+                        "min": 0,
+                        "max": 0.4,
+                    }
+
+                    if frequency.value == "year":
+                        date_format = "YYYY"
+                    elif frequency.value == "quarter":
+                        date_format = "YYYY-MM"
+                    elif frequency.value == "month":
+                        date_format = "YYYY-MM"
+
+                    self.add_time_slider(
+                        collection,
+                        region=self.user_roi,
+                        vis_params=vis_params,
+                        date_format=date_format,
+                    )
+                    self._draw_control.clear()
+                    draw_layer = self.find_layer("Drawn Features")
+                    if draw_layer is not None:
+                        self.remove(draw_layer)
+                    output.clear_output()
+
+        apply_btn.on_click(apply_btn_click)
+
+        def split_btn_click(change):
+
+            if hasattr(self, "slider_ctrl") and self.slider_ctrl is not None:
+                self.remove(self.slider_ctrl)
+                delattr(self, "slider_ctrl")
+
+            with output:
+                output.clear_output()
+                if self.user_roi is None:
+                    output.append_stdout("Please draw a ROI first.")
+                else:
+                    output.append_stdout("Creating time series...")
+                    collection = geemap.landsat_timeseries(
+                        roi=self.user_roi,
+                        start_year=start_year.value,
+                        end_year=end_year.value,
+                        start_date=str(start_month.value).zfill(2) + "-01",
+                        end_date=str(end_month.value).zfill(2) + "-01",
+                        frequency=frequency.value,
+                    )
+                    vis_params = {
+                        "bands": bands.value.split("/"),
+                        "min": 0,
+                        "max": 0.4,
+                    }
+
+                    if frequency.value == "year":
+                        date_format = "YYYY"
+                        dates = geemap.image_dates(collection, date_format).getInfo()
+                    elif frequency.value == "quarter":
+                        date_format = "YYYY-MM"
+                        dates = geemap.image_dates(collection, date_format).getInfo()
+                    elif frequency.value == "month":
+                        date_format = "YYYY-MM"
+                        dates = geemap.image_dates(collection, date_format).getInfo()
+
+                    self.ts_inspector(
+                        collection,
+                        left_names=dates,
+                        left_vis=vis_params,
+                        add_close_button=True,
+                    )
+                    output.clear_output()
+
+                    try:
+                        self._draw_control.clear()
+                        draw_layer = self.find_layer("Drawn Features")
+                        if draw_layer is not None:
+                            self.remove(draw_layer)
+                    except Exception as e:
+                        print(e)
+
+        split_btn.on_click(split_btn_click)
+
+        def reset_btn_click(change):
+            output.clear_output()
+            self.clean_up()
+
+        reset_btn.on_click(reset_btn_click)
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px"}):
+        Map.element(
+            center=[20, -0],
+            zoom=2,
+            height="750px",
+            zoom_ctrl=False,
+            measure_ctrl=False,
+        )

pages/07_jrc.py

@@ -0,0 +1,140 @@
+import ee
+import geemap
+import ipywidgets as widgets
+from IPython.display import display
+import solara
+
+
+class Map(geemap.Map):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.add_basemap("Esri.WorldImagery")
+        self.add_ee_data()
+        self.add_buttons(add_header=True)
+
+    def add_ee_data(self):
+
+        dataset = ee.Image("JRC/GSW1_4/GlobalSurfaceWater")
+        image = dataset.select(["occurrence"])
+        vis_params = {
+            "min": 0.0,
+            "max": 100.0,
+            "palette": ["ffffff", "ffbbbb", "0000ff"],
+        }
+        self.addLayer(image, vis_params, "Occurrence")
+        self.add_colorbar(
+            vis_params, label="Water occurrence (%)", layer_name="Occurrence"
+        )
+
+    def add_buttons(self, position="topright", **kwargs):
+        padding = "0px 5px 0px 5px"
+        widget = widgets.VBox(layout=widgets.Layout(padding=padding))
+        layout = widgets.Layout(width="auto")
+        style = {"description_width": "initial"}
+        hist_btn = widgets.Button(description="Occurrence", layout=layout)
+        bar_btn = widgets.Button(description="Monthly history", layout=layout)
+        reset_btn = widgets.Button(description="Reset", layout=layout)
+        scale = widgets.IntSlider(
+            min=30, max=1000, value=90, description="Scale", layout=layout, style=style
+        )
+        month_slider = widgets.IntRangeSlider(
+            description="Months",
+            value=[5, 10],
+            min=1,
+            max=12,
+            step=1,
+            layout=layout,
+            style=style,
+        )
+        widget.children = [
+            widgets.HBox([hist_btn, bar_btn, reset_btn]),
+            month_slider,
+            scale,
+        ]
+        self.add_widget(widget, position=position, **kwargs)
+        output = widgets.Output()
+        self.add_widget(output, position="bottomleft", add_header=False)
+
+        def hist_btn_click(b):
+            region = self.user_roi
+            if region is not None:
+                output.clear_output()
+                output.append_stdout("Computing histogram...")
+                image = ee.Image("JRC/GSW1_4/GlobalSurfaceWater").select(["occurrence"])
+                self.default_style = {"cursor": "wait"}
+                hist = geemap.image_histogram(
+                    image,
+                    region,
+                    scale=scale.value,
+                    height=350,
+                    width=550,
+                    x_label="Water Occurrence (%)",
+                    y_label="Pixel Count",
+                    layout_args={
+                        "title": dict(x=0.5),
+                        "margin": dict(l=0, r=0, t=10, b=0),
+                    },
+                    return_df=False,
+                )
+
+                with output:
+                    output.clear_output()
+                    display(hist)
+                self.default_style = {"cursor": "default"}
+            else:
+                output.clear_output()
+                with output:
+                    output.append_stdout("Please draw a region of interest first.")
+
+        hist_btn.on_click(hist_btn_click)
+
+        def bar_btn_click(b):
+            region = self.user_roi
+            if region is not None:
+                self.default_style = {"cursor": "wait"}
+                output.clear_output()
+                output.append_stdout("Computing monthly history...")
+                bar = geemap.jrc_hist_monthly_history(
+                    region=region,
+                    scale=scale.value,
+                    height=350,
+                    width=550,
+                    layout_args={
+                        "title": dict(x=0.5),
+                        "margin": dict(l=0, r=0, t=10, b=0),
+                    },
+                    frequency="month",
+                    start_month=month_slider.value[0],
+                    end_month=month_slider.value[1],
+                    denominator=1e4,
+                    y_label="Area (ha)",
+                )
+
+                with output:
+                    output.clear_output()
+                    display(bar)
+                self.default_style = {"cursor": "default"}
+            else:
+                output.clear_output()
+                with output:
+                    output.append_stdout("Please draw a region of interest first.")
+
+        bar_btn.on_click(bar_btn_click)
+
+        def reset_btn_click(b):
+            self._draw_control.clear()
+            output.clear_output()
+
+        reset_btn.on_click(reset_btn_click)
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px"}):
+        Map.element(
+            center=[20, -0],
+            zoom=2,
+            height="750px",
+            zoom_ctrl=False,
+            measure_ctrl=False,
+        )

pages/08_compare.py

@@ -0,0 +1,277 @@
+import ee
+import geemap
+import ipywidgets as widgets
+import solara
+from datetime import date
+
+
+class Map(geemap.Map):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.add_basemap("Esri.WorldImagery")
+        self.add_gui_widget(add_header=True)
+
+    def clean_up(self):
+
+        layers = [
+            "Pre-event Image",
+            "Post-event Image",
+            "Pre-event NDWI",
+            "Post-event NDWI",
+            "Pre-event Water",
+            "Post-event Water",
+            "Disappeared Water",
+            "New Water",
+        ]
+        for layer_name in layers:
+            layer = self.find_layer(layer_name)
+            if layer is not None:
+                self.remove(layer)
+
+    def add_gui_widget(self, position="topright", **kwargs):
+
+        widget = widgets.VBox(layout=widgets.Layout(padding="0px 5px 0px 5px"))
+        pre_widget = widgets.HBox()
+        post_widget = widgets.HBox()
+        layout = widgets.Layout(width="auto")
+        style = {"description_width": "initial"}
+        padding = "0px 5px 0px 5px"
+        pre_start_date = widgets.DatePicker(
+            description="Start",
+            value=date(2014, 1, 1),
+            style=style,
+            layout=widgets.Layout(padding=padding, width="160px"),
+        )
+        pre_end_date = widgets.DatePicker(
+            description="End",
+            value=date(2014, 12, 31),
+            style=style,
+            layout=widgets.Layout(padding=padding, width="160px"),
+        )
+        pre_cloud_cover = widgets.IntSlider(
+            description="Cloud",
+            min=0,
+            max=100,
+            value=25,
+            step=1,
+            readout=False,
+            style=style,
+            layout=widgets.Layout(padding=padding, width="130px"),
+        )
+        pre_cloud_label = widgets.Label(value=str(pre_cloud_cover.value))
+        geemap.jslink_slider_label(pre_cloud_cover, pre_cloud_label)
+        pre_widget.children = [
+            pre_start_date,
+            pre_end_date,
+            pre_cloud_cover,
+            pre_cloud_label,
+        ]
+        post_start_date = widgets.DatePicker(
+            description="Start",
+            value=date(2024, 1, 1),
+            style=style,
+            layout=widgets.Layout(padding=padding, width="160px"),
+        )
+        post_end_date = widgets.DatePicker(
+            description="End",
+            value=date(2024, 12, 31),
+            style=style,
+            layout=widgets.Layout(padding=padding, width="160px"),
+        )
+        post_cloud_cover = widgets.IntSlider(
+            description="Cloud",
+            min=0,
+            max=100,
+            value=30,
+            step=1,
+            readout=False,
+            style=style,
+            layout=widgets.Layout(padding=padding, width="130px"),
+        )
+        post_cloud_label = widgets.Label(value=str(post_cloud_cover.value))
+        geemap.jslink_slider_label(post_cloud_cover, post_cloud_label)
+        post_widget.children = [
+            post_start_date,
+            post_end_date,
+            post_cloud_cover,
+            post_cloud_label,
+        ]
+
+        apply_btn = widgets.Button(description="Apply", layout=layout)
+        reset_btn = widgets.Button(description="Reset", layout=layout)
+        buttons = widgets.HBox([apply_btn, reset_btn])
+        output = widgets.Output()
+
+        use_split = widgets.Checkbox(
+            value=False,
+            description="Split map",
+            style=style,
+            layout=widgets.Layout(padding=padding, width="100px"),
+        )
+
+        use_ndwi = widgets.Checkbox(
+            value=False,
+            description="Compute NDWI",
+            style=style,
+            layout=widgets.Layout(padding=padding, width="160px"),
+        )
+
+        ndwi_threhold = widgets.FloatSlider(
+            description="Threshold",
+            min=-1,
+            max=1,
+            value=0,
+            step=0.05,
+            readout=True,
+            style=style,
+            layout=widgets.Layout(padding=padding, width="230px"),
+        )
+
+        options = widgets.HBox(
+            [
+                use_split,
+                use_ndwi,
+                ndwi_threhold,
+            ]
+        )
+
+        widget.children = [pre_widget, post_widget, options, buttons, output]
+        self.add_widget(widget, position=position, **kwargs)
+
+        def apply_btn_click(b):
+
+            marker_layer = self.find_layer("Search location")
+            if marker_layer is not None:
+                self.remove(marker_layer)
+            self.clean_up()
+
+            if self.user_roi is None:
+                output.clear_output()
+                output.append_stdout("Please draw a ROI first.")
+            elif (
+                pre_start_date.value is None
+                or pre_end_date.value is None
+                or post_start_date.value is None
+                or post_end_date.value is None
+            ):
+                output.clear_output()
+                output.append_stdout("Please select start and end dates.")
+
+            elif self.user_roi is not None:
+                output.clear_output()
+                output.append_stdout("Computing... Please wait.")
+                roi = ee.FeatureCollection(self.user_roi)
+                vis_params = {"bands": ["B6", "B5", "B4"], "min": 0, "max": 0.4}
+                if pre_start_date.value.strftime("%Y-%m-%d") < "2013-04-11":
+                    pre_col = geemap.landsat_timeseries(
+                        roi,
+                        start_year=pre_start_date.value.year,
+                        end_year=pre_end_date.value.year,
+                    ).select(["SWIR1", "NIR", "Red", "Green"], ["B6", "B5", "B4", "B3"])
+                else:
+                    pre_col = (
+                        ee.ImageCollection("NASA/HLS/HLSL30/v002")
+                        .filterBounds(roi)
+                        .filterDate(
+                            pre_start_date.value.strftime("%Y-%m-%d"),
+                            pre_end_date.value.strftime("%Y-%m-%d"),
+                        )
+                        .filter(ee.Filter.lt("CLOUD_COVERAGE", pre_cloud_cover.value))
+                    )
+
+                if post_start_date.value.strftime("%Y-%m-%d") < "2013-04-11":
+                    post_col = geemap.landsat_timeseries(
+                        roi,
+                        start_year=post_start_date.value.year,
+                        end_year=post_end_date.value.year,
+                    ).select(["SWIR1", "NIR", "Red", "Green"], ["B6", "B5", "B4", "B3"])
+                else:
+                    post_col = (
+                        ee.ImageCollection("NASA/HLS/HLSL30/v002")
+                        .filterBounds(roi)
+                        .filterDate(
+                            post_start_date.value.strftime("%Y-%m-%d"),
+                            post_end_date.value.strftime("%Y-%m-%d"),
+                        )
+                        .filter(ee.Filter.lt("CLOUD_COVERAGE", post_cloud_cover.value))
+                    )
+
+                pre_img = pre_col.median().clip(roi)
+                post_img = post_col.median().clip(roi)
+
+                if use_split.value:
+                    left_layer = geemap.ee_tile_layer(
+                        pre_img, vis_params, "Pre-event Image"
+                    )
+                    right_layer = geemap.ee_tile_layer(
+                        post_img, vis_params, "Post-event Image"
+                    )
+                    self.split_map(
+                        left_layer,
+                        right_layer,
+                        add_close_button=True,
+                        left_label="Pre-event",
+                        right_label="Post-event",
+                    )
+                else:
+                    pre_img = pre_col.median().clip(roi)
+                    post_img = post_col.median().clip(roi)
+                    self.add_layer(pre_img, vis_params, "Pre-event Image")
+                    self.add_layer(post_img, vis_params, "Post-event Image")
+
+                if use_ndwi.value and (not use_split.value):
+                    pre_ndwi = pre_img.normalizedDifference(["B3", "B6"]).rename("NDWI")
+                    post_ndwi = post_img.normalizedDifference(["B3", "B6"]).rename(
+                        "NDWI"
+                    )
+                    ndwi_vis = {"min": -1, "max": 1, "palette": "ndwi"}
+                    self.add_layer(pre_ndwi, ndwi_vis, "Pre-event NDWI", False)
+                    self.add_layer(post_ndwi, ndwi_vis, "Post-event NDWI", False)
+
+                    pre_water = pre_ndwi.gt(ndwi_threhold.value)
+                    post_water = post_ndwi.gt(ndwi_threhold.value)
+                    self.add_layer(
+                        pre_water.selfMask(), {"palette": "blue"}, "Pre-event Water"
+                    )
+                    self.add_layer(
+                        post_water.selfMask(), {"palette": "red"}, "Post-event Water"
+                    )
+                    new_water = post_water.subtract(pre_water).gt(0)
+                    disappear_water = pre_water.subtract(post_water).gt(0)
+                    self.add_layer(
+                        disappear_water.selfMask(),
+                        {"palette": "brown"},
+                        "Disappeared Water",
+                    )
+                    self.add_layer(
+                        new_water.selfMask(), {"palette": "cyan"}, "New Water"
+                    )
+
+                    with output:
+                        output.clear_output()
+
+                output.clear_output()
+
+        apply_btn.on_click(apply_btn_click)
+
+        def reset_btn_click(b):
+            self.clean_up()
+            self._draw_control.clear()
+            draw_layer = self.find_layer("Drawn Features")
+            if draw_layer is not None:
+                self.remove(draw_layer)
+            output.clear_output()
+
+        reset_btn.on_click(reset_btn_click)
+
+
+@solara.component
+def Page():
+    with solara.Column(style={"min-width": "500px"}):
+        Map.element(
+            center=[20, -0],
+            zoom=2,
+            height="750px",
+            zoom_ctrl=False,
+            measure_ctrl=False,
+        )