मैं इसके भीतर निहित एक पत्रक मानचित्र के साथ बूटस्ट्रैप पतन तत्व जोड़ने पर काम कर रहा हूं ताकि मैं मानचित्र दृश्य को खोलने/बंद करने के लिए टॉगल कर सकूं। हालाँकि, लीफलेट मैप को ऐप इनिशियलाइज़ेशन पर आकार दिया जा रहा है और जब संक्षिप्त आइटम खोला जाता है तो इसका आकार नहीं बदलता है। इसलिए, परिणामी प्रदर्शित नक्शा जब टॉगल किया जाता है तो ज्यादातर एक ग्रे बॉक्स होता है। कुछ शोध करने के बाद, ऐसा लगता है कि मुझे पतन तत्व खोलने के बाद मेरे मानचित्र पर अमान्य आकार फ़ंक्शन को कॉल करना होगा। हालांकि, मुझे यकीन नहीं है कि मेरे प्लॉटली-डैश एप्लिकेशन पर इस जावास्क्रिप्ट कमांड को कैसे चलाया जाए। मेरे पास वर्तमान में यही है।

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Input, Output, State

map_collapse = dbc.Collapse(
    html.Div(
        [
            dl.Map(
                [
                    dl.TileLayer(),
                    dl.LocateControl(options={'locateOptions': {'enableHighAccuracy': True}})
                ],
                id="map",
                style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}
            )
        ]
    ),
    id="map-collapse",
    is_open=False,
    style={
        'width': '800px', 'height': '400px'
    }
)

collapse_button = dbc.Button(
    "Open collapse",
    id="collapse-button",
    className="mb-3",
    color="primary",
    n_clicks=0,
)

app.layout = html.Div(
    [
        collapse_button ,
        map_collapse
    ]
)

@app.callback(
    Output("map-collapse", 'is_open'),
    [Input("collapse-button", "n_clicks")],
    [State("map-collapse", "is_open")]
)
def toggle_collapse(n, is_open):
    if n:
        return not is_open

    return True

if __name__ == '__main__':
    app.title = 'Dash App'
    app.run_server(debug=True)

किसी भी प्रकार की सहायता सराहनीय होगी!

0
Jasol 4 अक्टूबर 2021, 23:57

1 उत्तर

सबसे बढ़िया उत्तर

इस समस्या से बचने का एक संभावित तरीका है (प्रारंभिक) मैप रेंडरर में देरी करना जब तक कि पैरेंट कंटेनर दिखाई न दे। यहां एक उदाहरण दिया गया है कि आपके उदाहरण के लिए उस दृष्टिकोण को कैसे लागू किया जा सकता है,

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Input, Output, State


def render_map():
    return dl.Map([
        dl.TileLayer(),
        dl.LocateControl(options={'locateOptions': {'enableHighAccuracy': True}})
    ], id="map", style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP], prevent_initial_callbacks=True)
map_collapse = dbc.Collapse(id="map-collapse", is_open=False, style={'width': '800px', 'height': '400px'})
collapse_button = dbc.Button(
    "Open collapse",
    id="collapse-button",
    className="mb-3",
    color="primary",
    n_clicks=0,
)

app.layout = html.Div(
    [
        collapse_button,
        map_collapse
    ]
)


@app.callback(
    Output("map-collapse", 'is_open'),
    [Input("collapse-button", "n_clicks")],
    [State("map-collapse", "is_open")]
)
def toggle_collapse(_, is_open):
    return not is_open


@app.callback(
    Output("map-collapse", 'children'),
    [Input("map-collapse", "is_open")],
    [State("map-collapse", "children")]
)
def render_map_on_show(_, children):
    if children is not None:
        return dash.no_update
    return render_map()


if __name__ == '__main__':
    app.title = 'Dash App'
    app.run_server()
1
emher 5 अक्टूबर 2021, 07:56
1
यह मेरे लिए पूरी तरह से काम किया। शुक्रिया!
 – 
Jasol
5 अक्टूबर 2021, 17:28