Map Component

[ay1man4]

In other frameworks like streamlit, there is support for map component. Streamlit Map

Also, comunity contribute with map compnents like Folium: Streamlit 3rd party Maps

• Folium
• Keplergl
• Mapbox
• Raster
• Leaflet
• Plotly
• Globe

Could you add map component with event handlers to give more interactivity.

[wwwillchen]

Thanks for the feature request @ay1man4. We're working on #95 which should support these libraries and open up these use cases.

I'm not super familiar with the map ecosystem - is there 1 or 2 libraries that are most used in the community?

[ay1man4]

Thank you @wwwillchen for feedback. The most used js libraries for mapping in my opinion are Leaflet and plotly.

The prefect implementation that provide below main features which already supported in js library:

• Input data like Points, GeoJson, GeoPandas, vector, image layer
• Map styling
• Add markers, vector layers (polygon, polyline, circle, etc.)
• Drawing on the map
• Callback handlers to map events (click, hover, etc. on map layers)

[wwwillchen]

Mesop now supports web components so you should be able to wrap these JS libraries in Mesop now. Please let me know if you run into any issues - thanks.

[lianggecm]

I'm working to wrap the Markmap library into a custom web component but experienced 'TypeError'. Got error message as: TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment

The corresponding code: e.innerHTML = t[r].__html; How can this be addressed? Thanks a lot.

[wwwillchen]

Looks like you'll need to turn off trusted types to use the Markmap library:

@me.page(
  path="/",
  security_policy=me.SecurityPolicy(dangerously_disable_trusted_types=True),
)

See example: https://github.com/google/mesop/blob/c7aefdc62eb040d6d2f0a93ba253d0e46d2f6ce6/mesop/examples/web_component/plotly/plotly_app.py#L14

[lianggecm]

That works.

[wwwillchen]

@lianggecm awesome! Also, if you've a working example, feel free to contribute it to our repo web components examples or you can share your repo and we can provide a link to your repo somewhere on our docs page (e.g. a web components gallery). Thanks!

[lianggecm]

For the time being I'll put what I have here. I've also created a colab demo. Will contribute to the repo later.

[wwwillchen]

Neat, thanks for sharing!