Update app.py

app.py

@@ -180,8 +180,11 @@ app_ui = ui.page_fluid(
         ui.panel_sidebar(
             ui.div(
                 ui.input_slider("zoom", "Map zoom level", value=12, min=1, max=18),
-                ui.output_ui("map_bounds"),
-                style=css(display="flex", justify_content="center", align_items="center", gap="2rem"),
+                ui.div(
+                    ui.input_numeric("lat", "Latitude", value=38.53667742),
+                    ui.input_numeric("long", "Longitude", value=-121.75387309),
+                ),
+                style=css(display="flex", justify_content="center", align_items="center", gap="1rem"),
             ),
         ),
         ui.panel_main(
@@ -292,6 +295,19 @@ def server(input, output, session):
         
         # Initialize and display when the session starts (1)
         map = L.Map(center=(current_gps['location']['lat'],  current_gps['location']['lng']), zoom=12, scroll_wheel_zoom=True)
+
+        @reactive.isolate()
+        def update_text_inputs(lat: Optional[float], long: Optional[float]) -> None:
+            req(lat is not None, long is not None)
+            lat = round(lat, 8)
+            long = round(long, 8)
+            if lat != input.lat():
+                input.lat.freeze()
+                ui.update_text("lat", value=lat)
+            if long != input.long():
+                input.long.freeze()
+                ui.update_text("long", value=long)
+        
         map.add_layer(L.TileLayer(url='https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', name='Natural Map'))
         
         # Add a distance scale
@@ -339,20 +355,43 @@ def server(input, output, session):
     def _():
         ui.update_slider("zoom", value=reactive_read(map, "zoom"))
 
+    @reactive.Effect
+    def location():
+        """Returns tuple of (lat,long) floats--or throws silent error if no lat/long is
+        selected"""
+        # Require lat/long to be populated before we can proceed
+        req(input.lat() is not None, input.long() is not None)
+
+        try:
+            long = input.long()
+            # Wrap longitudes so they're within [-180, 180]
+            long = (long + 180) % 360 - 180
+            if round(map.center[0], 8) == input.lat() and round(map.center[1], 8) == long:
+                return
+            map.center = (input.lat(), long)
+
+        except ValueError as e:
+            error_modal = ui.modal(
+                str(e),
+                title="Invalid latitude/longitude specification. Please refresh",
+                easy_close=True,
+                size="xl",
+                footer=None,
+                fade=True
+            )
+            # print_with_line_number("Show error modal")
+            ui.modal_show(error_modal)
+            traceback.print_exc()
+
     # Everytime the map's bounds change, update the output message (3)
     # rerun when a user do some reactive changes.
-    @output
-    @render.ui
-    async def map_bounds():
+    @reactive.Effect
+    def map_bounds():
         center = reactive_read(map, "center")
         if len(center) == 0:
-            return
-
-        lat = round(center[0], 4)
+            return        
         lon = (center[1] + 180) % 360 - 180
-        lon = round(lon, 4)
-
-        return ui.p(f"Longitude: {lon}", ui.br(), f"Latitude: {lat}")
+        update_text_inputs(center[0], lon)
     
     def update_or_create_heatmaps(output_datasets, scale):
         """