Is there a way to embed the map object in a streamlit app and display it there?

[sugatoray]

I tried using the map object (leafmap.Map) in a streamlit app. But it did not produce any visualization. I know that leafmap is meant for using with jupyter notebook/lab, but if there was a way to display it with Streamlit or PyWebIO, that will be really nice.

Streamlit: https://streamlit.io/

Sample Streamlit App

# a sample streamlit app: app.py
# to run this: streamlit run app.py

import streamlit as st
import leafmap

st.title('Leafmap Streamlit App')

filepath = "https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/us_cities.csv"
m = leafmap.Map(tiles='stamentoner', google_map=None)
m.add_heatmap(filepath, latitude="latitude", longitude='longitude',
              value="pop_max", name="Heat map", radius=20)

st.write(m)

Output 🔥

click to expand the output

Map(center=[40, -100], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_text', 'zoom_out_title']), FullScreenControl(options=['position']), DrawControl(circle={'shapeOptions': {'color': '#3388ff'}}, marker={'shapeOptions': {'color': '#3388ff'}}, options=['position'], polygon={'shapeOptions': {}}, polyline={'shapeOptions': {}}, rectangle={'shapeOptions': {'color': '#3388ff'}}), MeasureControl(options=['active_color', 'capture_z_index', 'completed_color', 'popup_options', 'position', 'primary_area_unit', 'primary_length_unit', 'secondary_area_unit', 'secondary_length_unit'], popup_options={'className': 'leaflet-measure-resultpopup', 'autoPanPadding': [10, 10]}), ScaleControl(options=['imperial', 'max_width', 'metric', 'position', 'update_when_idle'], position='bottomleft'), WidgetControl(options=['position', 'transparent_bg'], position='topright', widget=VBox(children=(ToggleButton(value=False, icon='wrench', layout=Layout(height='28px', padding='0px 0px 0px 4px', width='28px'), tooltip='Toolbar'),)))), crs={'name': 'EPSG3857', 'custom': False}, default_style=MapStyle(), dragging_style=MapStyle(cursor='move'), layers=(TileLayer(base=True, max_zoom=19, min_zoom=1, options=['attribution', 'detect_retina', 'max_native_zoom', 'max_zoom', 'min_native_zoom', 'min_zoom', 'no_wrap', 'tile_size', 'tms']), Heatmap(gradient={0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red'}, locations=[[13.47002, 144.75002, 122411.0], [34.12038, -117.30003, 1745000.0], [41.17998, -73.19996, 1018000.0], [43.17043, -77.61995, 755000.0], [48.60113, -93.41085, 15240.0], [44.94399, -93.08497, 734854.0], [45.7883, -108.54, 104552.0], [47.50029, -111.29999, 66558.0], [46.87224, -113.99305, 72856.0], [48.23249, -101.29582, 39439.0], [46.87723, -96.78943, 162842.0], [19.7, -155.09003, 52391.0], [47.03804, -122.89943, 156984.0], [47.67, -117.41995, 347705.0], [45.6303, -122.63999, 525802.0], [35.1981, -111.65051, 63993.0], [32.205, -110.88999, 823000.0], [34.43499, -119.71999, 181632.0], [36.74772, -119.77298, 616353.0], [40.80222, -124.1475, 42398.0], [38.86296, -104.79199, 493654.0], [39.52998, -119.82001, 328585.0], [40.83251, -115.76199, 19252.0], [35.10497, -106.64133, 898642.0], [44.92807, -123.0239, 229010.0], [42.86662, -106.31249, 60791.0], [39.05001, -95.66998, 132091.0], [39.10709, -94.60409, 1469000.0], [36.12, -95.93002, 946962.0], [43.54999, -96.73, 155724.0], [32.50002, -93.77002, 248053.0], [30.45795, -91.14016, 422072.0], [32.73998, -97.34004, 1440454.0], [27.74281, -97.40189, 277454.0], [30.26695, -97.74278, 1161000.0], [35.22998, -101.83, 181766.0], [31.77998, -106.51, 753000.0], [27.50614, -99.50722, 434768.0], [44.4758, -73.21247, 93807.0], [32.3616, -86.27919, 198325.0], [30.44999, -84.28003, 221222.0], [28.50998, -81.38003, 1350000.0], [30.33002, -81.66999, 988000.0], [32.02111, -81.11, 180187.0], [34.03998, -80.89998, 398093.0], [39.74999, -86.17005, 1436000.0], [34.22552, -77.94502, 161560.0], [35.97001, -83.92003, 655400.0], [37.55002, -77.44999, 912000.0], [38.34974, -81.63273, 123799.0], [39.29999, -76.61998, 2255000.0], [43.04999, -76.15001, 662577.0], [44.31056, -69.77999, 24042.0], [46.49526, -84.34528, 83805.0], [57.0604, -135.32755, 8931.0], [-14.27661, -170.70665, 12576.0], [46.59275, -112.03529, 38725.0], [46.80832, -100.78332, 63871.0], [43.60859, -116.22749, 338071.0], [37.29998, -121.84999, 1668000.0], [38.57502, -121.47004, 1604000.0], [36.21, -115.22001, 1823000.0], [35.68693, -105.93724, 92681.0], [45.52002, -122.67999, 1875000.0], [40.77502, -111.93005, 966000.0], [41.14001, -104.81971, 72927.0], [41.57998, -93.61998, 380655.0], [41.24, -96.00999, 877110.0], [35.47004, -97.51868, 788000.0], [44.36834, -100.35055, 13879.0], [29.48733, -98.50731, 1473000.0], [32.29882, -90.185, 250902.0], [35.81878, -78.64469, 1163515.0], [41.46999, -81.695, 1890000.0], [39.16188, -84.45692, 1636000.0], [36.16997, -86.77998, 877000.0], [35.11999, -90.0, 1081000.0], [36.84996, -76.28001, 1047869.0], [43.05266, -87.91997, 1388000.0], [42.87998, -78.88, 1016000.0], [40.43, -79.99999, 1838000.0], [57.79, -152.40699, 9461.0], [55.2, -162.71509, 200.0], [60.7933, -161.7558, 6228.0], [68.34773, -166.80802, 461.0], [71.29057, -156.78858, 4336.0], [64.5061, -165.40637, 3485.0], [61.136, -146.34829, 4036.0], [58.31413, -134.42, 30711.0], [64.83698, -147.71066, 56993.0], [70.29218, -148.66936, 2500.0], [18.44002, -66.12998, 2478905.0], [44.97998, -93.25179, 2616000.0], [21.30688, -157.858, 786000.0], [47.57, -122.33998, 3074000.0], [33.53998, -112.06999, 3551000.0], [32.82002, -117.17999, 2916000.0], [38.63502, -90.23998, 2199000.0], [29.995, -90.03997, 785000.0], [32.82002, -96.84002, 4798000.0], [42.32996, -71.07001, 4467000.0], [27.94699, -82.45862, 2314000.0], [39.99997, -75.17, 5492000.0], [42.32996, -83.08006, 4101000.0], [61.21997, -149.90021, 260283.0], [37.74001, -122.45998, 3450000.0], [39.73919, -104.98402, 2313000.0], [29.81997, -95.33998, 4459000.0], [25.78761, -80.22411, 5585000.0], [33.83001, -84.39995, 4506000.0], [41.82999, -87.75005, 8990000.0], [33.98998, -118.17998, 12500000.0], [38.89955, -77.00942, 4338000.0], [40.74998, -73.98002, 19040000.0]], name='Heat map', options=['blur', 'gradient', 'max', 'max_zoom', 'min_opacity', 'radius'], radius=20.0)), layout=Layout(height='600px'), options=['bounce_at_zoom_limits', 'box_zoom', 'center', 'close_popup_on_click', 'double_click_zoom', 'dragging', 'fullscreen', 'inertia', 'inertia_deceleration', 'inertia_max_speed', 'interpolation', 'keyboard', 'keyboard_pan_offset', 'keyboard_zoom_offset', 'max_zoom', 'min_zoom', 'scroll_wheel_zoom', 'tap', 'tap_tolerance', 'touch_zoom', 'world_copy_jump', 'zoom', 'zoom_animation_threshold', 'zoom_delta', 'zoom_snap', 'zoom_start'], scroll_wheel_zoom=True, style=MapStyle(), zoom=4.0)

[sugatoray]

@giswqs Any ideas on this?

[deeplook]

AFAIK Streamlit doesn't support ipywidgets (and hence ipyleaflet), but something more limited, based on folium, might work. I'm sure @giswqs knows more.

[giswqs]

Yes, it is possible to deploy leafmap using streamlit. Check out this streamlit geemap demo: https://gishub.org/streamlit-geemap. Simply replace geemap with leafmap, and geemap.eefolium with leafmap.foliumap.
Source code: https://github.com/giswqs/geemap-streamlit/blob/main/geemap_app.py

@deeplook is correct. Streamlit only supports folium at the moment. If you want the full interactive functionality of leafmap with the ipyleaflet plotting backend, you can try Voila and heroku. See this tutorial: https://youtu.be/nsIjfD83ggA

[sugatoray]

I found a workaround. See here

What I ended up doing was to feed the html of the map object to streamlit.

• Link to the app's code: https://github.com/sugatoray/leafmap_streamlit_apps

Sample Code

import leafmap
import streamlit as st
import streamlit.components.v1 as components

m = leafmap.Map(height='450px', width='700px', zoom=4)
# Show map by loading html
components.html(
        m.to_html(),
        width=700 * 2,
        height=450 * 1.5,
        scrolling=False)

💡 Video Demo of an App: https://www.youtube.com/watch?v=sBGZXEEQcTw

A note to the reader

However, this does have some problem: the html is no longer connected to the backend as, so the app will not have any way of accessing the user-fed information from the map. But, the user can still interact with the app using the widgets (to some extent).

[giswqs]

I am aware of this map.to_html() workaround. As you already pointed out, the HTML is no longer connected to the JavaScript backend. A lot of interactive components (e.g., toolbar, time slider) won't work after the map is converted to HTML. Without these interactive components, the ipyleaflet plotting backend is not much different from the folium plotting backend. Here is an interesting discussion on streamlit and ipywidgets @martinRenou
https://discuss.streamlit.io/t/ipywidgets-wip/3870/3

[juancotrino]

Simply use m.to_streamlit(). It wil automatically scale the map depending on your st.set_page_config layout argument.