Draw polygon in mapbox with dash/python

Dash Python
2

Hi @anjulia! It’s on the roadmap of plotly graphing libraries to add some drawing tools but it’s not implemented yet. In the meantime, what you could do for your project is to add a rectangle or another polygon to the figure (maybe with an annotation “move and rescale the rectangle”) and let the user place the polygon exactly where they want to. In order to make the polygon/rectangle shape editable you have to create the figure with editable:True in its config (something which you can do as in the code below, or inside a Dash app you pass the config object directly to the dcc.Graph)

import pandas as pd
us_cities = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv")

import plotly.express as px

fig = px.scatter_mapbox(us_cities, lat="lat", lon="lon", hover_name="City", hover_data=["State", "Population"],
                        color_discrete_sequence=["fuchsia"], zoom=3, height=300)
fig.update_layout(mapbox_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.add_shape(
        # unfilled Rectangle
            type="rect",
            x0=0.2,
            x1=0.8,
            y0=0.2,
            y1=0.8,
            xref='paper',
            yref='paper',
            line=dict(
                color="RoyalBlue",
            ),
        )
fig.show(config=dict(editable=True))