How to map a Dash application without any input?

Dash Python
1

I want to show a map but my map never fires. Probably because I don’t send you any entries since I’ve embedded it in a callback feature:

import plotly.graph_objects as go
from dash.dependencies import Input, Output

import utils
from server import app
from settings import MAP_HEIGHT, MAP_WIDTH

@app.callback(
    Output('cinnamonmap', 'figure')
)
def update_map():
    print("in update_map")
    return go.Figure(
        go.Choroplethmapbox(
            geojson=[],
            locations=[],
            z=[],
            colorscale='Reds',
            marker_opacity=0.6
        ),
        layout=go.Layout(
            mapbox_style='carto-positron',
            mapbox_zoom=14.5,
            mapbox_center={'lat': 51.5180, 'lon': -0.1247},
            hovermode='closest',
            margin={'r': 0, 't': 0, 'l': 0, 'b': 0}
        )
    )

I call it from app.py:

import dash_daq as daq
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
import datetime as dt

import utils
from server import app, auth, server
from settings import MAP_HEIGHT, MAP_WIDTH, ENTITY_LIST
from callbacks import (cinnamonmap)

def cinnamon_map():
    return html.Div(
        [
            html.Div(
                [
                    dcc.Graph(
                        id='cinnamonmap',
                        style={
                            'width': MAP_WIDTH,
                            'height': MAP_HEIGHT,
                            'display': 'block',
                            'margin-left': 'auto',
                            'margin-right': 'auto',
                            'margin-top': '25px'
                        }
                    )
                ],
                style={'align-items': 'center'}
            )
        ],
        className='pretty_container twelve columns'
    )

app.layout = html.Div(
    [
        # empty Div to trigger javascript file for graph resizing
        html.Div(id="output-clientside"),
        # Header
        header(),
        dcc.Tabs(value='map', children =
            [
                dcc.Tab(
                    label='Electoral Map',
                    value='map',
                    children=cinnamon_map()
                )
            ]
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=False, port=8051)
2

All Callbacks need an input, that’s the model that Dash works on.

You could have the input by the id of a dummy element so it just loads once on page load, or you could have it be on n_intervals of dcc.Interval so it refreshes every n seconds. But it needs to be something.

3

Right, is there a way not to include it in a callback then?

I tried to include it in a static way in cinnamon_map() but it’s not showing up.

def cinnamon_map():
    return html.Div(
        [
            html.Div(
                [
                    go.Figure(
                            go.Choroplethmapbox(
                                geojson=[],
                                locations=[],
                                z=[],
                                colorscale='Reds',
                                marker_opacity=0.6
                            ),
                            layout=go.Layout(
                                mapbox_style='carto-positron',
                                mapbox_zoom=14.5,
                                mapbox_center={'lat': 51.5180, 'lon': -0.1247},
                                hovermode='closest',
                                margin={'r': 0, 't': 0, 'l': 0, 'b': 0}
                            )
                        )
                ],
                style={'align-items': 'center'}
            )
        ],
        className='pretty_container twelve columns'
    )