Get help from the marimo community

Updated last month

Rendering a Leafmap map with height, width=100%

At a glance

The community member is using Leafmap to create maps and wants to display the map in the full extent of the webpage viewport. The community members discuss different approaches, including using the full-screen button in Leafmap and embedding the map in an HTML div with a border. One community member provides a solution using mo.Html to embed the map in a div with a 4-pixel solid border.

CChris Diehl

My first use case for Marimo is for publishing maps created with Leafmap and I'm so close to what I need. I set the notebook width to full which gets me close, but I'd like to use the full extent of the webpage viewport. How might I accomplish this?

5 comments

AAkshay

I'm not too familiar with Leafmap. But I noticed it basic Map plot has a full-screen button. Is that not enough?

CChris Diehl

@Akshay I will definitely leverage that but in terms of the initial viz layout, I either want it to use the entire viewport or have a clear delineation of the extent of the map area. Neither of which I know how to do 😉

CChris Diehl

The latter said more plainly - I'd want to be able to put a thin black border around the extent of the map area.

AAkshay

You can use mo.Html and embed the map in it:

Plain Text

mo.Html(
    f"""
    <div style='border: 4px solid'>
    {mo.as_html(m)}
    </div>
    """
)

Attachment

CChris Diehl

Beautiful @Akshay - thank you for this! I'll give this a go

Add a reply