diehl•3w ago

Rendering a Leafmap map with height, width=100%

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?

4 Replies

Akshay•3w ago

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

diehlOP•3w ago

@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 😉 The latter said more plainly - I'd want to be able to put a thin black border around the extent of the map area.

Akshay•2w ago

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

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

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

diehlOP•2w ago

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