Black Lives Matter. Please consider donating to Black Girls Code today.

Add a Map to a Tab - How do I do this in Dash

Hello,

 I am having trouble adding a map or even a simple "hello" to my application tab. I am using python3 Dash and have all the necessary libraries loaded - no error messages, just having trouble trying to figure out how to put information onto each tab. Below I have copied and pasted my app.py code and my example Tab_1.py. How do I do this so that it works? Would appreciate any help - I'm sure it's something super easy, but I can't see it. Please see below for the code ~QuirkyDataScientist1

app.py file here

# Import Dash Libraries
# _*_ coding: utf-8 _*_

import plotly.graph_objects as go # or plotly.express as px
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import datetime
import time
import dateutil
import pandas as pd
from components import Tab_1
from components import Tab_2
#from flask_caching import Cache

# External JavaScript Files Placeholder
# external_scripts = []

# External CSS stylesheets
#external_stylesheets = []

#start = datetime.datetime.today() - relativedelta(years=20)
#end = datetime.datetime.today()

# Placeholder for importing dictionaries for country lists, etc.

# Read in .csv file(s)
#data_file = 'globalterrorismdb_0919dist8.csv'
#df = pd.read_csv('./input_data/' + data_file)

# Select Data
#df[['iyear', 'imonth', 'iday']]= df[['iyear', 'imonth', 'iday']].apply(pd.to_datetime, format= '%Y-%m-%d')
#df = (df[['eventid', 'related', 'iyear', 'imonth', 'iday', 'nkill', 'country', 'country_txt', 'city', 'location',  'latitude', 'longitude', 'weaptype1', 'weaptype1_txt', 'weapsubtype1', 'weapsubtype1_txt', 'attacktype1', 'attacktype1_txt', 'targtype1', 'targtype1_txt', 'corp1', 'motive', 'summary', 'addnotes' ]])
#df = df[df.imonth != 0]
#df = df[df.iday != 0]
#df = df.fillna('')
#df = df[(df['attacktype1_txt'] == "Assassination") | (df['attacktype1_txt'] == "Armed Assault") | (df['attacktype1_txt'] == "Bombing/Explosion") | (df['attacktype1_txt'] == "Hijacking") | (df['attacktype1_txt'] == "Hostage Taking (Barricade Incident)") | (df['attacktype1_txt'] == "Hostage Taking (Kidnapping)") | (df['attacktype1_txt'] == "Facility/Infrastructure Attack") | (df['attacktype1_txt'] == "Unarmed Assault") | (df['attacktype1_txt'] == "Unknown")]

# Mapbox token for access to Mapbox
mapbox_access_token = 'Add your access token here'

# Create an object for Dash Core Components Options

# Different colors for gname groups if warranted - Placeholder

body = html.Div([
    html.Div(
        className="app-header",
        children=[
            html.H1('World Terrorism Attacks', className="app-header--title")
        ]
    ),
    html.Div(
        children=html.Div([
            html.H5('Overview', className="app-header--overview"),
            html.Div('''
                This is an example of a simple Dash app with
                local, customized CSS.''', className="app-header--explanation"
                )
        ])
    )
])
#

# HTML for navigation bar design - Not sure how to change the navlink color - need to research this, but not that important
navigationbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("START>>> Global Terrorism Database (GTD)", href="https://www.start.umd.edu/gtd/", className="navlink")) # Not sure how to change the color of the link - need to research this))
        ],
        brand="", # insert here for title for navbar
        className="navbar_top",
        brand_href="#", # This is where you would insert the logo for this dashboard
        sticky="top",
        color = "dark"
    )

map_card = dbc.Card(
    [
        dbc.CardHeader(
            dbc.Tabs(
                [
                    dbc.Tab(label="Tab 1", tab_id="Tab_1", labelClassName="text-success", loading_state="is_loading"),
                    dbc.Tab(label="Tab 2", tab_id="Tab_2", labelClassName="text-success", loading_state="is_loading"), # text-success sets tab labels to theme's color i.e. Darkly
                ],
                id="card_tabs",
                card=True,
                active_tab="Tab_1",
                loading_state="is_loading",
            )
        ),
        dbc.CardBody(html.P(id="card_content", className="card_text")),
    ]
)

#Tab

#df = get_historical_data("", start=start, end=end, output_format="pandas")
#print(df.head()) # use this to ensure dataframe works

# Stylesheets for dash app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])

# Local Cache Set-Up
#ache = Cache(app.server, config={
#    'CACHE_TYPE': 'filesystem',
#    'CACHE_DIR': 'cache_directory'
#})

# Cache time out
#TIMEOUT = 45

# Cache callback
#@cache.memoize(timeout=TIMEOUT)

# Merging all html elements into the app layout
app.layout = html.Div([navigationbar, body, map_card])

# Uncomment when add stylesheets and external_scripts
#app = dash.Dash(__name__,
#                external_scripts=external_scripts,
#                external_stylesheets=external_stylesheets)

# App callbacks
#card app callback - Tabs
@app.callback(
    Output("card_content", "children"),
    [Input("card_tabs", "active_tab")]
)
# Active Tab function with callback for tabs
def tab_content(active_tab):
    return "This is {}".format(active_tab)
# Recalculates content when switching between Tabs
def switch_tab(at):
    if at == "Tab_1":
        return tab1_cardcontent
    elif at == "Tab_2":
        return tab2_cardcontent
    return html.P("This should never ever be displayed...if it is something went wrong!")



if __name__== "__main__": # can change main to another tab or file to run multiple apps, can add external_scripts and external_stylesheets to this
    app.run_server(debug=True) #run in debug mode - set debug in production to false in production

Tab_1.py code here

# _*_ coding: utf-8 _*_
# Import Dash Libraries

import plotly.graph_objects as go # or plotly.express as px
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import datetime
import time
import dateutil
import pandas as pd


Tab_1 = html.Div([
            html.H1("Hello")
        ]
    )