The code below attempts to react to the clicking the marker and invoking the specified Href in the dcc.link to move to another page. Unfortunately, I am unsure how to get the dcc.link to work through the callback function. The app is trying to move to the app1 page. I have tried passing through the href property directly into the dcc.link within the callback too but it doesnt work either.
import numpy as np
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.plotly as py
import plotly.graph_objs as go
from app import app
mapbox_access_token = "pk.eyJ1IjoiamFja3AiLCJhIjoidGpzN0lXVSJ9.7YK6eRwUNFwd3ODZff6JvA"
df = pd.read_csv('lat_lon_counties.csv',encoding='cp1252')
#df_lat_lon['FIPS'] = df_lat_lon['FIPS'].apply(lambda x: str(x).zfill(5))
#app = dash.Dash()
# example measurement stations
lats = [41.434760, 38.436662]
lons = [-105.925030, -88.962141]
text = ['APAC', 'ME']
clickme = html.Div([
html.Div(id='change_page'),
dcc.Link(href='/apps/app1')
])
layout = html.Div([
# map centered to USA
html.Div([
dcc.Graph(
id = "mapbox",
figure={
"data": [
dict(
type = "scattermapbox",
lat = lats,
lon = lons,
mode = "markers",
marker = {'size':'8','color':'rgb(255, 0, 0)','opacity':'0.7'},
text = text
),
dict(
type = "scattermapbox",
lat = lats,
lon = lons,
mode = "markers",
marker = {'size':'200','color':'rgb(242, 177, 172)','opacity':'0.3'},
text = text
)
],
"layout": dict(
autosize = True,
hovermode = "closest",
margin = dict(l = 0, r = 0, t = 0, b = 0),
mapbox = dict(
accesstoken = mapbox_access_token,
bearing =0,
center = dict(lat = 38.30, lon = -90.68),
style = "light",
pitch = 0,
zoom = 1.5,
layers = []
)
)
},
style = {"height": "100%"}
)
], style = {"border-style": "solid", "height": "90vh"}),
])
app.callback(
Output('change_page','children'),
[Input('mapbox', 'clickData')])
def plot_basin(clickData):
if clickData is None:
return {}
else:
return app3.clickme #app3 is the name of the current file
if __name__ == "__main__":
app.run_server(debug=True)
The plot with markers is as below.
hovering over the marker shows the text as well as coordinates but doesnt react to clicking as is expected.