Skip to content

Instantly share code, notes, and snippets.

@araichev
Last active March 14, 2018 02:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save araichev/c4a823f6c69425495d322bb40ababdd4 to your computer and use it in GitHub Desktop.
Plotly Dash Scattermapbox bug?
import dash
from dash import dependencies as dd
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as pg
# Config
app = dash.Dash()
app.scripts.config.serve_locally = True
# Create geodata
geoj = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
174.74475860595703,
-36.86533886128865
],
[
174.77737426757812,
-36.86533886128865
],
[
174.77737426757812,
-36.84913134182603
],
[
174.74475860595703,
-36.84913134182603
],
[
174.74475860595703,
-36.86533886128865
]
]
]
}
}
]
}
lat = -36.8576
lon = 174.7604
def create_map(color, with_layers=False):
data = pg.Data([
pg.Scattermapbox(
lon=[lon],
lat=[lat],
mode='markers',
marker=pg.Marker(
size=20,
color=color
),
text='This polygon should be colored ' + color,
hoverinfo='text',
)
])
mapbox_key = "pk.eyJ1IjoiY2hlbHNlYXBsb3RseSIsImEiOiJjamI1aWx5OG0zOWF3Mndta3lnNjE3OW1yIn0.cLk9q87t4xbaeq-bLBYmBA"
layout = pg.Layout(
hovermode='closest',
showlegend=False,
margin=dict(t=40),
mapbox=dict(
accesstoken=mapbox_key,
bearing=0,
zoom=12,
center={'lon': lon, 'lat': lat},
style='light',
layers=[dict(
sourcetype='geojson',
source=geoj['features'][0],
type='fill',
color=color,
opacity=0.5,
)],
),
)
if not with_layers:
del layout['mapbox']['layers']
return {'data': data, 'layout': layout}
app.layout = html.Div([
html.H1(children="Scattermapbox test with layers"),
html.Label('Choose a color'),
dcc.Dropdown(
options=[
{'label': 'orange', 'value': 'orange'},
{'label': 'blue', 'value': 'blue'},
],
value='orange',
id='color-choice',
),
html.Div([
dcc.Graph(id='map1', className='six columns'),
dcc.Graph(id='map2', className='six columns'),
])
])
@app.callback(
dd.Output('map1', 'figure'),
[dd.Input('color-choice', 'value')])
def update_map1(color):
return create_map(color)
@app.callback(
dd.Output('map2', 'figure'),
[dd.Input('color-choice', 'value')])
def update_map2(color):
return create_map(color, with_layers=True)
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
if __name__ == '__main__':
app.run_server(debug=True)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment