map.py

def layout(place=None):
    if place:
        global G, G2
        G, _, edges = load_map(place)
        G2 = nx.Graph(G)

        polyline = dl.Polyline(id="route-line", positions=[], color="red", weight=10, fillColor="red", fillOpacity=1.0)
        patterns = [dict(repeat='100',
                         arrowHead=dict(pixelSize=15, polygon=False, pathOptions=dict(color="red", stroke=True)),
                         line=dict(pixelSize=10, pathOptions=dict(color='#f00', weight=20)))]
        route_decorator = dl.PolylineDecorator(id="route-arrows", positions=[], patterns=patterns)

        url = "https://api.mapbox.com/styles/v1/mapbox/outdoors-v9/tiles/{z}/{x}/{y}?access_token=" + open(".mapbox_token").read()
        attribution = '&copy; <a href="https://openstreetmap.org/">OpenStreetMap</a> | &copy; <a href="https://mapbox.com/">Mapbox</a> '

        res = html.Div([
            html.Div([
                dbc.Label("Choose Mode"),
                dbc.RadioItems(
                    options=[
                        {"label": "Auto", "value": 1},
                        {"label": "Custom", "value": 2}
                    ],
                    value=1,
                    id="mode-select"
                )
            ]),
            dbc.Label("Distance Target (mi)", html_for="distance-target"),
            dbc.Input(id="distance-target", value=10, required=True, type="number", min=0),
            dbc.Label("Elevation Minimum (ft)", html_for="elevation-min"),
            dbc.Input(id="elevation-min", value=0, required=True, type="number", min=0),
            dl.Map([dl.TileLayer(url=url, attribution=attribution),
                    polyline,
                    dl.GeoJSON(data=edges, zoomToBounds=True, id="trail", hoverStyle=arrow_function(dict(weight=5, color='#666', dashArray=''))),
                    # polyline,
                    route_decorator
                    ],
                   id="map",
                   style={'width': '100%',
                          'height': '40vh',
                          'margin': "auto",
                          "display": "block",
                          "padding-top": "10px"}),
            dbc.Button(id="reset-btn", children="Reset", className="btn btn-danger"),
            dbc.Button(id="download-btn", children="Export Route"),
            dcc.Download(id="download-route"),
            # dbc.Button(id="undo-btn", children="Undo"),
            html.Br(),
            html.P(id="total-distance"),
            html.P(id="elevation-gain"),
            dcc.Graph(id="profile"),
            dcc.Store(id="route-path", data=[]),
            dcc.Store(id="map-data", data={"edges": edges})
        ],
        style={"padding-top": "10px"})
        return res
    else:
        return html.Div("issue")