UI Template

app.py

@@ -1,78 +1,202 @@
-from pathlib import Path
-from typing import List, Dict, Tuple
-import matplotlib.colors as mpl_colors
-
-import pandas as pd
-import seaborn as sns
-import shinyswatch
-
-from shiny import App, Inputs, Outputs, Session, reactive, render, req, ui
-
-sns.set_theme()
-
-www_dir = Path(__file__).parent.resolve() / "www"
-
-df = pd.read_csv(Path(__file__).parent / "penguins.csv", na_values="NA")
-numeric_cols: List[str] = df.select_dtypes(include=["float64"]).columns.tolist()
-species: List[str] = df["Species"].unique().tolist()
-species.sort()
-
-app_ui = ui.page_fillable(
-    shinyswatch.theme.minty(),
-    ui.layout_sidebar(
-        ui.sidebar(
-            # Artwork by @allison_horst
-            ui.input_selectize(
-                "xvar",
-                "X variable",
-                numeric_cols,
-                selected="Bill Length (mm)",
-            ),
-            ui.input_selectize(
-                "yvar",
-                "Y variable",
-                numeric_cols,
-                selected="Bill Depth (mm)",
-            ),
-            
-        ),
-        ui.output_ui("value_boxes"),
-        ui.output_plot("scatter", fill=True),
-        ui.help_text(
-            "Artwork by ",
-            ui.a("@allison_horst", href="https://twitter.com/allison_horst"),
-            class_="text-end",
-        ),
-    ),
-)
-
-
-def server(input: Inputs, output: Outputs, session: Session):
-    # @reactive.ui
-
-        return 
-
-
-# "darkorange", "purple", "cyan4"
-colors = [[255, 140, 0], [160, 32, 240], [0, 139, 139]]
-colors = [(r / 255.0, g / 255.0, b / 255.0) for r, g, b in colors]
-
-palette: Dict[str, Tuple[float, float, float]] = {
-    "Adelie": colors[0],
-    "Chinstrap": colors[1],
-    "Gentoo": colors[2],
-    "default": sns.color_palette()[0],  # type: ignore
-}
-
-bg_palette = {}
-# Use `sns.set_style("whitegrid")` to help find approx alpha value
-for name, col in palette.items():
-    # Adjusted n_colors until `axe` accessibility did not complain about color contrast
-    bg_palette[name] = mpl_colors.to_hex(sns.light_palette(col, n_colors=7)[1])  # type: ignore
-
-
-app = App(
-    app_ui,
-    server,
-    static_assets=str(www_dir),
-)
+import ipyleaflet as L
+from faicons import icon_svg
+from geopy.distance import geodesic, great_circle
+from shared import BASEMAPS, CITIES
+from shiny import reactive
+from shiny.express import input, render, ui
+from shinywidgets import render_widget
+
+city_names = sorted(list(CITIES.keys()))
+
+ui.page_opts(title="Location Distance Calculator", fillable=True)
+{"class": "bslib-page-dashboard"}
+
+with ui.sidebar():
+    ui.input_selectize("loc1", "Location 1", choices=city_names, selected="New York")
+    ui.input_selectize("loc2", "Location 2", choices=city_names, selected="London")
+    ui.input_selectize(
+        "basemap",
+        "Choose a basemap",
+        choices=list(BASEMAPS.keys()),
+        selected="WorldImagery",
+    )
+    ui.input_dark_mode(mode="dark")
+
+with ui.layout_column_wrap(fill=False):
+    with ui.value_box(showcase=icon_svg("globe"), theme="gradient-blue-indigo"):
+        "Great Circle Distance"
+
+        @render.text
+        def great_circle_dist():
+            circle = great_circle(loc1xy(), loc2xy())
+            return f"{circle.kilometers.__round__(1)} km"
+
+    with ui.value_box(showcase=icon_svg("ruler"), theme="gradient-blue-indigo"):
+        "Geodisic Distance"
+
+        @render.text
+        def geo_dist():
+            dist = geodesic(loc1xy(), loc2xy())
+            return f"{dist.kilometers.__round__(1)} km"
+
+    with ui.value_box(showcase=icon_svg("mountain"), theme="gradient-blue-indigo"):
+        "Altitude Difference"
+
+        @render.text
+        def altitude():
+            try:
+                return f'{loc1()["altitude"] - loc2()["altitude"]} m'
+            except TypeError:
+                return "N/A (altitude lookup failed)"
+
+
+with ui.card():
+    ui.card_header("Map (drag the markers to change locations)")
+
+    @render_widget
+    def map():
+        return L.Map(zoom=4, center=(0, 0))
+
+
+# Reactive values to store location information
+loc1 = reactive.value()
+loc2 = reactive.value()
+
+
+# Update the reactive values when the selectize inputs change
+@reactive.effect
+def _():
+    loc1.set(CITIES.get(input.loc1(), loc_str_to_coords(input.loc1())))
+    loc2.set(CITIES.get(input.loc2(), loc_str_to_coords(input.loc2())))
+
+
+# When a marker is moved, the input value gets updated to "lat, lon",
+# so we decode that into a dict (and also look up the altitude)
+def loc_str_to_coords(x: str) -> dict:
+    latlon = x.split(", ")
+    if len(latlon) != 2:
+        return {}
+
+    lat = float(latlon[0])
+    lon = float(latlon[1])
+
+    try:
+        import requests
+
+        query = f"https://api.open-elevation.com/api/v1/lookup?locations={lat},{lon}"
+        r = requests.get(query).json()
+        altitude = r["results"][0]["elevation"]
+    except Exception:
+        altitude = None
+
+    return {"latitude": lat, "longitude": lon, "altitude": altitude}
+
+
+# Convenient way to get the lat/lons as a tuple
+@reactive.calc
+def loc1xy():
+    return loc1()["latitude"], loc1()["longitude"]
+
+
+@reactive.calc
+def loc2xy():
+    return loc2()["latitude"], loc2()["longitude"]
+
+
+# Add marker for first location
+@reactive.effect
+def _():
+    update_marker(map.widget, loc1xy(), on_move1, "loc1")
+
+
+# Add marker for second location
+@reactive.effect
+def _():
+    update_marker(map.widget, loc2xy(), on_move2, "loc2")
+
+
+# Add line and fit bounds when either marker is moved
+@reactive.effect
+def _():
+    update_line(map.widget, loc1xy(), loc2xy())
+
+
+# If new bounds fall outside of the current view, fit the bounds
+@reactive.effect
+def _():
+    l1 = loc1xy()
+    l2 = loc2xy()
+
+    lat_rng = [min(l1[0], l2[0]), max(l1[0], l2[0])]
+    lon_rng = [min(l1[1], l2[1]), max(l1[1], l2[1])]
+    new_bounds = [
+        [lat_rng[0], lon_rng[0]],
+        [lat_rng[1], lon_rng[1]],
+    ]
+
+    b = map.widget.bounds
+    if len(b) == 0:
+        map.widget.fit_bounds(new_bounds)
+    elif (
+        lat_rng[0] < b[0][0]
+        or lat_rng[1] > b[1][0]
+        or lon_rng[0] < b[0][1]
+        or lon_rng[1] > b[1][1]
+    ):
+        map.widget.fit_bounds(new_bounds)
+
+
+# Update the basemap
+@reactive.effect
+def _():
+    update_basemap(map.widget, input.basemap())
+
+
+# ---------------------------------------------------------------
+# Helper functions
+# ---------------------------------------------------------------
+
+
+def update_marker(map: L.Map, loc: tuple, on_move: object, name: str):
+    remove_layer(map, name)
+    m = L.Marker(location=loc, draggable=True, name=name)
+    m.on_move(on_move)
+    map.add_layer(m)
+
+
+def update_line(map: L.Map, loc1: tuple, loc2: tuple):
+    remove_layer(map, "line")
+    map.add_layer(
+        L.Polyline(locations=[loc1, loc2], color="blue", weight=2, name="line")
+    )
+
+
+def update_basemap(map: L.Map, basemap: str):
+    for layer in map.layers:
+        if isinstance(layer, L.TileLayer):
+            map.remove_layer(layer)
+    map.add_layer(L.basemap_to_tiles(BASEMAPS[input.basemap()]))
+
+
+def remove_layer(map: L.Map, name: str):
+    for layer in map.layers:
+        if layer.name == name:
+            map.remove_layer(layer)
+
+
+def on_move1(**kwargs):
+    return on_move("loc1", **kwargs)
+
+
+def on_move2(**kwargs):
+    return on_move("loc2", **kwargs)
+
+
+# When the markers are moved, update the selectize inputs to include the new
+# location (which results in the locations() reactive value getting updated,
+# which invalidates any downstream reactivity that depends on it)
+def on_move(id, **kwargs):
+    loc = kwargs["location"]
+    loc_str = f"{loc[0]}, {loc[1]}"
+    choices = city_names + [loc_str]
+    ui.update_selectize(id, selected=loc_str, choices=choices)

shared.py

@@ -0,0 +1,38 @@
+from ipyleaflet import basemaps
+
+BASEMAPS = {
+    "WorldImagery": basemaps.Esri.WorldImagery,
+    "Mapnik": basemaps.OpenStreetMap.Mapnik,
+    "Positron": basemaps.CartoDB.Positron,
+    "DarkMatter": basemaps.CartoDB.DarkMatter,
+    "NatGeoWorldMap": basemaps.Esri.NatGeoWorldMap,
+    "France": basemaps.OpenStreetMap.France,
+    "DE": basemaps.OpenStreetMap.DE,
+}
+
+
+CITIES = {
+    "New York": {"latitude": 40.7128, "longitude": -74.0060, "altitude": 33},
+    "London": {"latitude": 51.5074, "longitude": -0.1278, "altitude": 36},
+    "Paris": {"latitude": 48.8566, "longitude": 2.3522, "altitude": 35},
+    "Tokyo": {"latitude": 35.6895, "longitude": 139.6917, "altitude": 44},
+    "Sydney": {"latitude": -33.8688, "longitude": 151.2093, "altitude": 39},
+    "Los Angeles": {"latitude": 34.0522, "longitude": -118.2437, "altitude": 71},
+    "Berlin": {"latitude": 52.5200, "longitude": 13.4050, "altitude": 34},
+    "Rome": {"latitude": 41.9028, "longitude": 12.4964, "altitude": 21},
+    "Beijing": {"latitude": 39.9042, "longitude": 116.4074, "altitude": 44},
+    "Moscow": {"latitude": 55.7558, "longitude": 37.6176, "altitude": 156},
+    "Cairo": {"latitude": 30.0444, "longitude": 31.2357, "altitude": 23},
+    "Rio de Janeiro": {"latitude": -22.9068, "longitude": -43.1729, "altitude": 8},
+    "Toronto": {"latitude": 43.6511, "longitude": -79.3832, "altitude": 76},
+    "Dubai": {"latitude": 25.2769, "longitude": 55.2963, "altitude": 52},
+    "Mumbai": {"latitude": 19.0760, "longitude": 72.8777, "altitude": 14},
+    "Seoul": {"latitude": 37.5665, "longitude": 126.9780, "altitude": 38},
+    "Madrid": {"latitude": 40.4168, "longitude": -3.7038, "altitude": 667},
+    "Amsterdam": {"latitude": 52.3676, "longitude": 4.9041, "altitude": -2},
+    "Buenos Aires": {"latitude": -34.6037, "longitude": -58.3816, "altitude": 25},
+    "Stockholm": {"latitude": 59.3293, "longitude": 18.0686, "altitude": 14},
+    "Boulder": {"latitude": 40.0150, "longitude": -105.2705, "altitude": 1634},
+    "Lhasa": {"latitude": 29.6500, "longitude": 91.1000, "altitude": 3650},
+    "Khatmandu": {"latitude": 27.7172, "longitude": 85.3240, "altitude": 1400},
+}