diff --git a/examples/pages/draw_support.py b/examples/pages/draw_support.py index f0c9b92..5e9526c 100644 --- a/examples/pages/draw_support.py +++ b/examples/pages/draw_support.py @@ -29,11 +29,16 @@ from streamlit_folium import st_folium m = folium.Map(location=[39.949610, -75.150282], zoom_start=5) - Draw(export=True).add_to(m) + Draw(export=False).add_to(m) c1, c2 = st.columns(2) with c1: - output = st_folium(m, width=700, height=500) + output = st_folium( + m, + width=700, + height=500, + max_drawn_objects=2, + ) with c2: st.write(output) diff --git a/leaflet-draw-rectangles.html b/leaflet-draw-rectangles.html new file mode 100644 index 0000000..b98190c --- /dev/null +++ b/leaflet-draw-rectangles.html @@ -0,0 +1,127 @@ + + + + + + + Leaflet Draw Rectangle from Coordinates + + + + + + +
+
+ + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/streamlit_folium/__init__.py b/streamlit_folium/__init__.py index c2eca9d..45f8410 100644 --- a/streamlit_folium/__init__.py +++ b/streamlit_folium/__init__.py @@ -214,6 +214,7 @@ def st_folium( pixelated: bool = False, debug: bool = False, render: bool = True, + max_drawn_objects: int = 0, ): """Display a Folium object in Streamlit, returning data as user interacts with app. @@ -416,6 +417,7 @@ def walk(fig): pixelated=pixelated, css_links=css_links, js_links=js_links, + max_drawn_objects=max_drawn_objects, ) return component_value diff --git a/streamlit_folium/frontend/package.json b/streamlit_folium/frontend/package.json index 1d5783d..06fb1fa 100644 --- a/streamlit_folium/frontend/package.json +++ b/streamlit_folium/frontend/package.json @@ -8,12 +8,11 @@ "@testing-library/user-event": "^7.1.2", "@types/hoist-non-react-statics": "^3.3.1", "@types/jest": "^24.0.0", - "@types/leaflet": "^1.7.9", "@types/node": "^12.0.0", "bootstrap": "^4.4.1", "event-target-shim": "^5.0.1", "hoist-non-react-statics": "^3.3.2", - "leaflet": "^1.7.1", + "leaflet": "^1.9.4", "leaflet-draw": "^1.0.2", "leaflet.sync": "^0.2.4", "react-scripts": "^5.0.1", @@ -45,7 +44,8 @@ "homepage": ".", "devDependencies": { "@babel/plugin-transform-private-property-in-object": "^7.21.11", - "@types/leaflet-draw": "^1.0.5", + "@types/leaflet": "^1.9.12", + "@types/leaflet-draw": "^1.0.11", "@types/underscore": "^1.11.4" } } diff --git a/streamlit_folium/frontend/src/index.tsx b/streamlit_folium/frontend/src/index.tsx index bcf54b4..fbba068 100644 --- a/streamlit_folium/frontend/src/index.tsx +++ b/streamlit_folium/frontend/src/index.tsx @@ -19,6 +19,7 @@ type GlobalData = { last_center: any last_feature_group: any last_layer_control: any + max_drawn_objects: number } declare global { @@ -90,7 +91,6 @@ function extractContent(s: string) { function onDraw(e: any) { const global_data = window.__GLOBAL_DATA__ - var type = e.layerType, layer = e.layer @@ -108,6 +108,13 @@ function onDraw(e: any) { global_data.last_circle_radius = radius / 1000 // Convert to km to match what UI shows global_data.last_circle_polygon = polygon } + // Get the number of drawn objects + console.log('number of drawn items', window.drawnItems.getLayers().length) + // destroy the oldest drawn object if max drawn object is set to any positive value not 0 + if (window.drawnItems.getLayers().length > window.__GLOBAL_DATA__.max_drawn_objects && window.__GLOBAL_DATA__.max_drawn_objects !== 0) { + window.drawnItems.removeLayer(window.drawnItems.getLayers()[0]) + } + return onLayerClick(e) } @@ -207,6 +214,7 @@ async function onRender(event: Event) { const return_on_hover: boolean = data.args["return_on_hover"] const layer_control: string = data.args["layer_control"] const pixelated: boolean = data.args["pixelated"] + const max_drawn_objects: number = data.args['max_drawn_objects'] // load scripts const loadScripts = async () => { @@ -233,7 +241,6 @@ async function onRender(event: Event) { style.innerHTML = getPixelatedStyles(pixelated) window.document.head.appendChild(style) } - // finalize rendering const finalizeOnRender = () => { if ( @@ -254,6 +261,7 @@ async function onRender(event: Event) { // update feature group and layer control cache window.__GLOBAL_DATA__.last_feature_group = feature_group window.__GLOBAL_DATA__.last_layer_control = layer_control + window.__GLOBAL_DATA__.max_drawn_objects = max_drawn_objects if (feature_group) { // eslint-disable-next-line @@ -285,7 +293,7 @@ async function onRender(event: Event) { if ( center && JSON.stringify(center) !== - JSON.stringify(window.__GLOBAL_DATA__.last_center) + JSON.stringify(window.__GLOBAL_DATA__.last_center) ) { new_center = center window.__GLOBAL_DATA__.last_center = center @@ -339,6 +347,7 @@ async function onRender(event: Event) { last_center: null, last_feature_group: null, last_layer_control: null, + max_drawn_objects: max_drawn_objects, } if (script.indexOf("map_div2") !== -1) { parent_div?.classList.remove("single") diff --git a/testmap.ipynb b/testmap.ipynb new file mode 100644 index 0000000..f8a80c4 --- /dev/null +++ b/testmap.ipynb @@ -0,0 +1,29 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 2, + "metadata": {}, + "outputs": [], + "source": [ + "import folium\n", + "\n", + "m = folium.Map(location=(45.5236, -122.6750))\n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "language_info": { + "name": "python" + } + }, + "nbformat": 4, + "nbformat_minor": 2 +}