0

I am trying to create a simple Dash application that includes Dash-Leaflet so that it plots some points as markers. It is apparently working as expected when no styles are applied. But I would like to create a layout with bootstrap with tabs as in this example: https://hellodash.pythonanywhere.com/

When I place the map element within a tab container, it does not render properly. If I move it away it works fine.

This is the code I have so far:

from dash import Dash, dcc, html, dash_table, Input, Output, callback
import plotly.express as px
import dash_bootstrap_components as dbc
import dash_leaflet as dl
import dash_leaflet.express as dlx
from dash_extensions.javascript import assign
import pandas as pd

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

header = html.H4(
    "Sample map", className="bg-primary text-white p-2 mb-2 text-center"
)

data = pd.DataFrame([{'name': 'Point 1', 'lat': 39.535, 'lon': 0.0563, 'cluster': 1, 'val_x': 0, 'val_y': 1},
                     {'name': 'Point 2', 'lat': 40.155, 'lon': -0.0453, 'cluster': 1, 'val_x': 1, 'val_y': 4},
                     {'name': 'Point 1', 'lat': 38.875, 'lon': 0.0187, 'cluster': 2, 'val_x': 2, 'val_y': 2}])

dropdown = html.Div(
    [
        dbc.Label("Select Cluster"),
        dcc.Dropdown(
            data.cluster.unique().tolist(),
            id="cluster_selector",
            clearable=False,
        ),
    ],
    className="mb-4",
)

controls = dbc.Card(
    [dropdown],
    body=True,
)

tab1 = dbc.Tab([dl.Map([dl.TileLayer()], style={'width': '100%',
                                                'height': '50vh',
                                                'margin': "auto",
                                                "display": "block"}, id="map")], label="Map")
tab2 = dbc.Tab([dcc.Graph(id="scatter-chart")], label="Scatter Chart")
tabs = dbc.Card(dbc.Tabs([tab1, tab2]))

app.layout = dbc.Container(
    [
        header,
        dbc.Row(
            [
                dbc.Col(
                    [
                        controls,
                    ],
                    width=3,
                ),
                dbc.Col([tabs], width=9),
            ]
        ),
    ],
    fluid=True,
    className="dbc",
)

if __name__ == "__main__":
    app.run_server(debug=True, port=8052)

This is what it looks like.

This is how it looks like

I have tried the proposed solutions on this post but they do not seem to work (or I am applying the wrong)

Do you have any suggestions on where to look for the problem?

Thank you very much.

juancar
  • 187
  • 2
  • 16

1 Answers1

0

You can try making the tabs without bootstrap, the following worked for me:

tabs = dbc.Card(dcc.Tabs([tab1, tab2]))

It's not bootstrap style but you can modify it using:

tabs = dbc.Card(dcc.Tabs([tab1, tab2],
                         style = {'width': '40%',
                                  'height': '8px',
                                  'line-height': '0px' ,
                                  'line-width': '0px',
                                  'margin-bottom': '40px'}))
Duvan Nieves
  • 1