I am encountering some difficulties with dash-leaflet, particularly regarding its width when the parent container is resized. I am utilizing dash-resizable-panels to resize certain divs.
Allow me to present a Minimal Reproducible Example (MRE) below:
# pip install dash dash-leaflet dash-resizable-panels
import dash
import dash_leaflet as dl
from dash import html
from dash_resizable_panels import PanelGroup, Panel, PanelResizeHandle
handle = {"height": "100%", "width": "3px", "backgroundColor": "#51ada6"}
layout = html.Div([
PanelGroup(id="panel-group",
children=[
Panel(id="panel-1",children=[html.Div([html.P("Dummy component")])]),
PanelResizeHandle(html.Div(style=handle)),
Panel(id="panel-2",
children=[
dl.Map(center=[45.81, 15.98], zoom=12, children=[
dl.TileLayer(),
dl.FeatureGroup([dl.EditControl()]),
], style={'height': '100%', 'width': '100%'})]
)], direction="horizontal",),
], style={"height": "100vh"})
app = dash.Dash(__name__)
app.layout = layout
if __name__ == "__main__":
app.run_server()
The initial layout appears to be satisfactory:
https://i.sstatic.net/efZGfkvIl.jpg
However, upon resizing the map container, an unrendered portion of the map becomes visible (gray area on the right). Here is a visual representation:
https://i.sstatic.net/f5iq9jK6l.jpg
Is there a method, whether through Python or JS, to resize or rerender the leaflet map when the container is resized so that the map completely fills the width of its container?
SOLUTION:
app.clientside_callback(
"""
function set_event(map_id) {
// On resize event
var callback = function() {
window.dispatchEvent(new Event('resize'));
}
new ResizeObserver(callback).observe(document.getElementById(map_id))
return dash_clientside.no_update;
}
""",
Output("map", "id"),
Input("map", "id")
)