API
Callback properties
Nodes, edges, and markers are interactive in a SylvereyeRoadNetwork
component. When you click any of these elements, SylvereyeRoadNetwork
updates the value of a callback property.
The SylvereyeRoadNetwork
component provides support for three callback properties: clicked_node
, clicked_edge
, and clicked_marker
.
You can listen to changes to any of these callback properties in order to trigger a callback function that, for instance, updates the properties of a SylvereyeRoadNetwork
component or any other Dash component at runtime.
Callback properties
clicked_node
Kind: SylvereyeRoadNetwork
component callback property.
Type: dict
Listen to clicked_node
to trigger a callback that defines the behavior when the user clicks on a node.
clicked_node
will contain a deep copy of the clicked node's data under the data
key. The following is an example of the content of clicked_node
:
{'data': {'_i': 9560,
'alpha': 1,
'color': 10551296,
'data': {'highway': None,
'osmid': 3015359332,
'x': -100.4082449,
'y': 20.5537155},
'lat': 20.5537155,
'lon': -100.4082449,
'size': 0.005,
'visible': True},
'index': 9560}
Note
The data available in
clicked_node['data']['data']
will depend on the data available in the source Dash Sylvereyenodes_data
list.If you used the
load_from_osmnx_graph
or theload_from_osmnx_graphml
functions to load the road network, please refer to this page to see the possible data keys inclicked_node['data']['data']
.
The following example from this example application will print the coordinates of the clicked node:
@app.callback(
Output('h3-clicked-node-coords', 'children'),
[Input('sylvereye-roadnet', 'clicked_node')])
def update_node_data(clicked_node):
if clicked_node:
return f'Clicked node coords: {clicked_node["data"]["lat"]}, \
{clicked_node["data"]["lon"]}'
clicked_edge
Kind: SylvereyeRoadNetwork
component callback property.
Type: dict
Listen to clicked_edge
to trigger a callback that defines the behavior when the user clicks on an edge.
clicked_edge
will contain a deep copy of the clicked edge's data under the data
key. The following is an example of the content of clicked_edge
:
{'data': {'alpha': 1,
'color': 26262,
'coords': [[20.5491204, -100.3705049], [20.5504062, -100.3692541]],
'data': {'access': None,
'bridge': None,
'geometry': None,
'highway': 'residential',
'id': None,
'junction': None,
'lanes': None,
'length': '193.397',
'maxspeed': None,
'name': 'Calle Bosques de Chapultepec',
'oneway': 'False',
'osmid': 372268480,
'ref': None,
'service': None,
'source_osmid': '3758222160',
'target_osmid': '3758222180'},
'visible': True,
'width': 0.25},
'index': 41472}
Note
The data available in
clicked_edge['data']['data']
will depend on the data available in the source Dash Sylvereyeedges_data
list.If you used the
load_from_osmnx_graph
or theload_from_osmnx_graphml
functions to load the road network, please refer to this page to see the possible data keys inclicked_edge['data']['data']
.
The following example from this example application will print the coordinate pairs that integrate the clicked edge:
@app.callback(
Output('h3-clicked-edge-coords', 'children'),
[Input('sylvereye-roadnet', 'clicked_edge')])
def update_edge_data(clicked_edge):
if clicked_edge:
return f'Clicked edge coords: {clicked_edge["data"]["coords"]}'
clicked_marker
Kind: SylvereyeRoadNetwork
component callback property.
Type: dict
Listen to clicked_marker
to trigger a callback that defines the behavior when the user clicks on a marker.
clicked_marker
will contain a deep copy of the clicked marker's data under the marker
field. The following is an example of the content of clicked_marker
:
{'index': 96,
'marker': {'_i': 96,
'alpha': 1,
'color': 26316,
'data': {},
'icon_id': 'custom_marker',
'icon_image': '',
'lat': 20.556441,
'lon': -100.4080412,
'size': 0.25,
'size_scale_max': 0.25,
'size_scale_min': 0.25,
'tooltip': '',
'visible': True}}
The following example from this example application will print the coordinates of the clicked marker:
@app.callback(
Output('h3-clicked-marker-coords', 'children'),
[Input('sylvereye-roadnet', 'clicked_marker')])
def update_marker_data(clicked_marker):
if clicked_marker:
return f'Clicked marker coords: {[ clicked_marker["marker"]["lat"], clicked_marker["marker"]["lon"] ]}'
Note
The data available in
clicked_edge['marker']['data']
will depend on the data available in the source Dash Sylvereyemarkers_data
list.
Updating the road network at runtime
Thanks to Dash’s architecture, any of the SylvereyeRoadNetwork
component properties, including the road network’s node, edge, and marker lists, can be updated to change the visualized road network at runtime.
For example, if you want to replace the road network with a new one, you only need to create a callback having as outputs the nodes_data
and edges_data
component properties:
@app.callback(
[Output('sylvereye-roadnet', 'nodes_data'), Output('sylvereye-roadnet', 'edges_data')],
[Input( ... )])
def update_roadnet_data(input):
if input:
# code to update 'nodes_data' and 'edges_data' by using 'input' goes here
# return the updated 'nodes_data' and 'edges_data'
return nodes_data, edges_data