Echo realtime example code

randyzwitch · May 7, 2024 · ce82c39 · ce82c39
1 parent a0d76a0
commit ce82c39
Showing 1 changed file with 69 additions and 68 deletions.
diff --git a/examples/pages/realtime.py b/examples/pages/realtime.py
@@ -20,76 +20,77 @@
 which allows you to set a return value for your Streamlit app.
 """
 
-m = folium.Map()
-source = folium.JsCode(
-    """
-    function(responseHandler, errorHandler) {
-        var url = 'https://api.wheretheiss.at/v1/satellites/25544';
-
-        fetch(url)
-        .then((response) => {
-            return response.json().then((data) => {
-                var { id, timestamp, longitude, latitude } = data;
-
-                return {
-                    'type': 'FeatureCollection',
-                    'features': [{
-                        'type': 'Feature',
-                        'geometry': {
-                            'type': 'Point',
-                            'coordinates': [longitude, latitude]
-                        },
-                        'properties': {
-                            'id': id,
-                            'timestamp': timestamp
-                        }
-                    }]
-                };
+with st.echo():
+    m = folium.Map()
+    source = folium.JsCode(
+        """
+        function(responseHandler, errorHandler) {
+            var url = 'https://api.wheretheiss.at/v1/satellites/25544';
+    
+            fetch(url)
+            .then((response) => {
+                return response.json().then((data) => {
+                    var { id, timestamp, longitude, latitude } = data;
+    
+                    return {
+                        'type': 'FeatureCollection',
+                        'features': [{
+                            'type': 'Feature',
+                            'geometry': {
+                                'type': 'Point',
+                                'coordinates': [longitude, latitude]
+                            },
+                            'properties': {
+                                'id': id,
+                                'timestamp': timestamp
+                            }
+                        }]
+                    };
+                })
             })
-        })
-        .then(responseHandler)
-        .catch(errorHandler);
-    }
-"""
-)
-
-on_each_feature = folium.JsCode(
+            .then(responseHandler)
+            .catch(errorHandler);
+        }
     """
-    (feature, layer) => {
-        layer.bindTooltip(`${feature.properties.timestamp}`);
-        layer.on("click", (event) => {
-            Streamlit.setComponentValue({
-                id: feature.properties.id,
-                // Be careful, on_each_feature binds only once.
-                // You need to extract the current location from
-                // the event.
-                location: event.sourceTarget.feature.geometry
+    )
+
+    on_each_feature = folium.JsCode(
+        """
+        (feature, layer) => {
+            layer.bindTooltip(`${feature.properties.timestamp}`);
+            layer.on("click", (event) => {
+                Streamlit.setComponentValue({
+                    id: feature.properties.id,
+                    // Be careful, on_each_feature binds only once.
+                    // You need to extract the current location from
+                    // the event.
+                    location: event.sourceTarget.feature.geometry
+                });
             });
-        });
-
-    }
-"""
-)
-
-update_feature = folium.JsCode(
+    
+        }
     """
-    (feature, layer) => {
-        L.Realtime.prototype.options.updateFeature(feature, layer);
-        if(layer) {
-            layer.unbindTooltip();
-            layer.bindTooltip(`${feature.properties.timestamp}`);
+    )
+
+    update_feature = folium.JsCode(
+        """
+        (feature, layer) => {
+            L.Realtime.prototype.options.updateFeature(feature, layer);
+            if(layer) {
+                layer.unbindTooltip();
+                layer.bindTooltip(`${feature.properties.timestamp}`);
+            }
         }
-    }
-"""
-)
-
-Realtime(
-    source,
-    on_each_feature=on_each_feature,
-    update_feature=update_feature,
-    interval=10000,
-).add_to(m)
-
-data = st_folium(m, returned_objects=[], debug=False)
-
-st.write(data)
+    """
+    )
+
+    Realtime(
+        source,
+        on_each_feature=on_each_feature,
+        update_feature=update_feature,
+        interval=10000,
+    ).add_to(m)
+
+    data = st_folium(m, returned_objects=[], debug=False)
+
+    st.write(data)