Added positioning feature #2

app.py

@@ -4,6 +4,7 @@ from apps import (
     basemaps,
     census,
     deck,
+    device_loc,
     gee,
     gee_datasets,
     heatmap,
@@ -32,6 +33,7 @@ apps.add_app("Heatmaps", heatmap.app)
 apps.add_app("Add Web Map Service (WMS)", wms.app)
 apps.add_app("Google Earth Engine (GEE)", gee.app)
 apps.add_app("Awesome GEE Community Datasets", gee_datasets.app)
+apps.add_app("Get Device Location", device_loc.app)
 
 # The main app
 apps.run()

apps/device_loc.py

@@ -0,0 +1,43 @@
+import streamlit as st
+from bokeh.models.widgets import Button
+from bokeh.models import CustomJS
+from streamlit_bokeh_events import streamlit_bokeh_events
+import leafmap.foliumap as leafmap
+
+
+def app():
+
+    loc_button = Button(label="Get Device Location", max_width=150)
+    loc_button.js_on_event(
+        "button_click",
+        CustomJS(
+            code="""
+        navigator.geolocation.getCurrentPosition(
+            (loc) => {
+                document.dispatchEvent(new CustomEvent("GET_LOCATION", {detail: {lat: loc.coords.latitude, lon: loc.coords.longitude}}))
+            }
+        )
+        """
+        ),
+    )
+    result = streamlit_bokeh_events(
+        loc_button,
+        events="GET_LOCATION",
+        key="get_location",
+        refresh_on_update=False,
+        override_height=75,
+        debounce_time=0,
+    )
+
+    if result:
+        if "GET_LOCATION" in result:
+            loc = result.get("GET_LOCATION")
+            lat = loc.get("lat")
+            lon = loc.get("lon")
+            st.write(f"Lat, Lon: {lat}, {lon}")
+
+            m = leafmap.Map(center=(lat, lon), zoom=16)
+            m.add_basemap("ROADMAP")
+            popup = f"lat, lon: {lat}, {lon}"
+            m.add_marker(location=(lat, lon), popup=popup)
+            m.to_streamlit()

apps/timelapse.py

@@ -4,6 +4,9 @@ import datetime
 import geopandas as gpd
 import folium
 import streamlit as st
+from bokeh.models.widgets import Button
+from bokeh.models import CustomJS
+from streamlit_bokeh_events import streamlit_bokeh_events
 import geemap.colormaps as cm
 import geemap.foliumap as geemap
 from datetime import date
@@ -61,6 +64,37 @@ def app():
 
     with row1_col2:
 
+        loc_button = Button(label="Get Device Location", max_width=150)
+        loc_button.js_on_event(
+            "button_click",
+            CustomJS(
+                code="""
+            navigator.geolocation.getCurrentPosition(
+                (loc) => {
+                    document.dispatchEvent(new CustomEvent("GET_LOCATION", {detail: {lat: loc.coords.latitude, lon: loc.coords.longitude}}))
+                }
+            )
+            """
+            ),
+        )
+        result = streamlit_bokeh_events(
+            loc_button,
+            events="GET_LOCATION",
+            key="get_location",
+            refresh_on_update=False,
+            override_height=75,
+            debounce_time=0,
+        )
+
+        if result:
+            if "GET_LOCATION" in result:
+                loc = result.get("GET_LOCATION")
+                lat = loc.get("lat")
+                lon = loc.get("lon")
+                popup = f"lat, lon: {lat}, {lon}"
+                m.add_marker(location=(lat, lon), popup=popup)
+                m.set_center(lon, lat, 16)
+
         keyword = st.text_input("Search for a location:", "")
         if keyword:
             locations = geemap.geocode(keyword)

requirements.txt

@@ -3,5 +3,6 @@ keplergl
 streamlit
 streamlit-folium
 streamlit-keplergl
+streamlit-bokeh-events
 git+git://github.com/giswqs/leafmap
 git+git://github.com/giswqs/geemap