Last active
March 14, 2018 02:23
-
-
Save araichev/c4a823f6c69425495d322bb40ababdd4 to your computer and use it in GitHub Desktop.
Plotly Dash Scattermapbox bug?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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