how to make a wind quiver plot on the geospatial map using plotly?

Question

I have a series of the wind dataset with u/v component and try to make it as the quiver (wind vector) plot using plot.ly on the geospatial map. However, I still get troubles to make it happen. Could someone please help me to figure this out?

Following is my code

###- This is operating on Jupyter lab with dash extension
###- lon/lat/u/v are 2-D numpy array 

fig = ff.create_quiver(lon,lat,u,v,
                       scale=.25,
                       arrow_scale=.4,
                       name='quiver',
                       line=dict(width=1))

fig['layout'].update(title='Quiver Plot')
fig['layout'].update(geo=dict(
        resolution=50,
        scope='usa',
        showframe=False,
        showcoastlines=True,
        showland=True,
        landcolor="lightgray",
        countrycolor="white" ,
        coastlinecolor="white",
        projection=dict(type='equirectangular'),
        domain = dict(x=[0, 1], y=[ 0, 1])
))

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),
    dcc.Graph(
        id='example-graph-0',
        figure=fig),
])

viewer.show(app)

Answer 1

You will not be able to use annotations on a scattermapbox while retaining the geo position of the arrows. See my solution on how to find the arrow points and add them to the map as traces. If you have several traces, even 40-50 traces or arrows, performances will plummet. This is a known issue with plotly unfortunately which, I think, makes it basically useless.

You can look into other map APIs like google maps and apple maps. I tested google maps in a angular app and performance are great.