Add web app

Dockerfile

@@ -0,0 +1,21 @@
+FROM jupyter/base-notebook:latest
+
+RUN mamba install -c conda-forge leafmap geopandas localtileserver -y && \
+    fix-permissions "${CONDA_DIR}" && \
+    fix-permissions "/home/${NB_USER}"
+
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+
+RUN mkdir ./pages
+COPY /pages ./pages
+
+ENV PROJ_LIB='/opt/conda/share/proj'
+
+USER root
+RUN chown -R ${NB_UID} ${HOME}
+USER ${NB_USER}
+
+EXPOSE 8765
+
+CMD ["solara", "run", "./pages", "--host=0.0.0.0"]

README.md

@@ -11,8 +11,19 @@ app_port: 8765
 
 ## TN-historical-imagery
 
-An interactive web app for visualizing Tennessee historical imagery.
+A Interactive Web App for Visualizing Tennessee Historical Imagery
+
+### Introduction
+
+This web app allows users to visualize historical imagery for Tennessee. The historical imagery is provided by the Tennessee Department of Transportation (TDOT) and includes aerial 2-ft resolution photos taken between 1997 and 2006.
+The original imagery in MrSID format was download from the [TNGIC Google Drive](https://drive.google.com/drive/folders/1qYlPFBLkcOpO4xjvBvHwMH9RDtbsSNkv). The imagery was then converted to Cloud Optimized GeoTIFF format
+and hosted on Source Cooperative.
 
 - Web App: <https://giswqs-tn-historical-imagery.hf.space>
 - GitHub: <https://github.com/giswqs/tn-historical-imagery>
 - Hugging Face: <https://huggingface.co/spaces/giswqs/tn-historical-imagery>
+- Dataset: <https://source.coop/repositories/giswqs/tn-imagery>
+
+### Acknowledgements
+
+This work is supported by the U.S. Geological Survey through Grant/Cooperative Agreement No. G23AP00683 (GY23-GY27) in collaboration with [AmericaView](https://americaview.org).

pages/00_home.py

@@ -0,0 +1,27 @@
+import solara
+
+
+@solara.component
+def Page():
+    with solara.Column(align="center"):
+        markdown = """
+        ## A Interactive Web App for Visualizing Tennessee Historical Imagery
+
+        ### Introduction
+
+        This web app allows users to visualize historical imagery for Tennessee. The historical imagery is provided by the Tennessee Department of Transportation (TDOT) and includes aerial 2-ft resolution photos taken between 1997 and 2006.
+        The original imagery in MrSID format was download from the [TNGIC Google Drive](https://drive.google.com/drive/folders/1qYlPFBLkcOpO4xjvBvHwMH9RDtbsSNkv). The imagery was then converted to Cloud Optimized GeoTIFF format 
+        and hosted on Source Cooperative.
+
+        - Web App: <https://giswqs-tn-historical-imagery.hf.space>
+        - GitHub: <https://github.com/giswqs/tn-historical-imagery>
+        - Hugging Face: <https://huggingface.co/spaces/giswqs/tn-historical-imagery>
+        - Dataset: <https://source.coop/repositories/giswqs/tn-imagery>
+
+        ### Acknowledgements
+
+        This work is supported by the U.S. Geological Survey through Grant/Cooperative Agreement No. G23AP00683 (GY23-GY27) in collaboration with [AmericaView](https://americaview.org).
+
+        """
+
+        solara.Markdown(markdown)

pages/01_imagery.py

@@ -0,0 +1,128 @@
+import os
+import leafmap
+import solara
+import ipywidgets as widgets
+import pandas as pd
+import geopandas as gpd
+import tempfile
+from shapely.geometry import Point
+
+
+def add_widgets(m):
+    style = {"description_width": "initial"}
+    padding = "0px 0px 0px 5px"
+
+    checkbox = widgets.Checkbox(
+        value=True,
+        description="Footprints",
+        style=style,
+        layout=widgets.Layout(width="90px", padding="0px"),
+    )
+
+    split = widgets.Checkbox(
+        value=False,
+        description="Split map",
+        style=style,
+        layout=widgets.Layout(width="92px", padding=padding),
+    )
+
+    reset = widgets.Checkbox(
+        value=False,
+        description="Reset",
+        style=style,
+        layout=widgets.Layout(width="75px", padding="0px"),
+    )
+
+    output = widgets.Output()
+
+    def reset_map(change):
+        if change.new:
+            pass
+
+    reset.observe(reset_map, names="value")
+
+    def handle_click(**kwargs):
+        if kwargs.get("type") == "click":
+            latlon = kwargs.get("coordinates")
+            geometry = Point(latlon[::-1])
+            selected = m.gdf[m.gdf.intersects(geometry)]
+            setattr(m, "zoom_to_layer", False)
+            if len(selected) > 0:
+                filename = selected.iloc[0]["Filename"]
+                county = selected.iloc[0]["County"]
+                year = filename.split("_")[-1][:4]
+                with output:
+                    output.clear_output()
+                    output.append_stdout(f"County: {county} | Year: {year}")
+                url = f"https://data.source.coop/giswqs/tn-imagery/imagery/{filename}"
+                layer = m.find_layer("Selected Image")
+                if layer is not None:
+                    m.remove(layer)
+                m.default_style = {"cursor": "wait"}
+                m.add_cog_layer(url, name="Selected Image", zoom_to_layer=False)
+                m.default_style = {"cursor": "default"}
+            else:
+                with output:
+                    output.clear_output()
+                    output.append_stdout("No image found.")
+
+    m.on_interaction(handle_click)
+
+    box = widgets.VBox([widgets.HBox([checkbox, split, reset]), output])
+    m.add_widget(box, position="topright", add_header=False)
+
+
+zoom = solara.reactive(8)
+center = solara.reactive((35.64836915737426, -86.21246337890626))
+
+
+class Map(leafmap.Map):
+    def __init__(self, **kwargs):
+        kwargs["toolbar_control"] = False
+        kwargs["draw_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",
+        }
+        self.add_tile_layer(**basemap, shown=False)
+
+        wms_url = "https://tnmap.tn.gov/arcgis/services/BASEMAPS/IMAGERY_WEB_MERCATOR/MapServer/WMSServer"
+        self.add_wms_layer(wms_url, layers="0", name="TDOT Imagery", shown=True)
+
+        self.add_layer_manager(opened=False)
+        # add_widgets(self)
+        geojson = "https://github.com/opengeos/datasets/releases/download/vector/TN_Counties.geojson"
+        style = {"color": "#3388ff", "opacity": 1, "weight": 2, "fillOpacity": 0}
+        self.add_geojson(
+            geojson,
+            layer_name="TN Counties",
+            style=style,
+            zoom_to_layer=False,
+            info_mode=None,
+        )
+        gdf = gpd.read_file(geojson)
+        setattr(self, "gdf", gdf)
+        add_widgets(self)
+
+
+@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"Center: {center.value}")
+        # solara.Text(f"Zoom: {zoom.value}")

requirements.txt

@@ -0,0 +1,6 @@
+geopandas
+leafmap
+pydantic< 2.0
+setuptools<71
+solara
+