dash
dash copied to clipboard
plotly
Scattermapbox cluster says “The layer does not exist in the map’s style…”
Describe your context
dash 2.14.1
dash-auth 2.0.0
dash-bootstrap-components 1.4.1
dash-core-components 2.0.0
dash-extensions 1.0.1
dash-html-components 2.0.0
dash-leaflet 0.1.23
dash-table 5.0.0
plotly 5.18.0
Describe the bug
Hi,
I’m trying to create a webapp which uses the cluster function within scattermapbox. However, every so often, when loading the webapp, I’m presented with the following console error (which prevents any further interaction with the map):
Uncaught (in promise) Error: Mapbox error.
followed by multiple errors of the type:
Error: The layer 'plotly-trace-layer-4f7f6d-circle' does not exist in the map's style and cannot be queried for features.
I’ve created the following minimal example which throws up the same errors (they occur once every ~10 times I reload the webapp making the issue hard to track down). The example creates a list of random points around the world and plots them on a map. The example includes a simple callback to print the location of a point when clicking on it. I’ve tracked the issue down to the use of the cluster option in the “map_data” list (i.e. if I disable the cluster option, the errors no longer appear). From other posts/the documentation, I’m aware that the cluster option is not expected to work with OpenStreetMaps tiles hence the example requires a Mapbox access token.
from dash import Dash, dcc, html
from dash import Input, Output
from random import randint, seed
# -- Fix the randomness
seed(10)
# -- Generate random data
npoints = 100
latitudes = [randint(-90, 90) for i in range(npoints)]
longitudes = [randint(-180, 180) for i in range(npoints)]
colors = ["green" for i in range(npoints)]
# -- Mapbox styles
mapbox_style = "streets"
mapbox_accesstoken = open(".mapbox_token").read().strip()
# -- Set map data
map_data = [
{
"type": "scattermapbox",
"lat": latitudes,
"lon": longitudes,
"mode": "markers",
"marker": {
"size": 15,
"color": colors,
},
"cluster": {
"enabled": True,
"color": "green",
"type": "circle",
"maxzoom": 10,
"size": 25,
"opacity": 0.7,
},
},
]
# -- Set map layout
map_layout = {
"mapbox": {
"style": mapbox_style,
"accesstoken": mapbox_accesstoken,
},
"clickmode": "event",
"margin": {"t": 0, "r": 0, "b": 0, "l": 0},
}
# -- Create div with map and a dummy div for the callback
layout = html.Div(
children=[
dcc.Graph(
id="world-map",
figure={"data": map_data, "layout": map_layout},
config={"displayModeBar": False, "scrollZoom": True},
style={"height": "100vh"},
),
html.Div(id="dummy"),
],
)
# -- Create app
app = Dash(
__name__,
)
app.layout = layout
# -- Simple callback to print click data
@app.callback(
Output("dummy", "children"),
Input("world-map", "clickData"),
prevent_initial_call=True,
)
def print_click(
clickData,
):
lat = clickData["points"][0]["lat"]
lon = clickData["points"][0]["lon"]
print("Clicked on point at lat/lon {}/{}".format(lat, lon))
return None
if __name__ == "__main__":
app.run_server(debug=True, use_reloader=False, host="0.0.0.0", port=8081)
I have tested the code on multiple computers with different browsers and they all present the same issue. The full console logs for the errors are:
Uncaught (in promise) Error: Mapbox error.
r plotly.min.js:8
fire plotly.min.js:8
fire plotly.min.js:8
queryRenderedFeatures plotly.min.js:8
queryRenderedFeatures plotly.min.js:8
hoverPoints plotly.min.js:8
ht plotly.min.js:8
hover plotly.min.js:8
hover plotly.min.js:8
l plotly.min.js:8
throttle plotly.min.js:8
hover plotly.min.js:8
initFx plotly.min.js:8
fire plotly.min.js:8
mousemove plotly.min.js:8
handleEvent plotly.min.js:8
addEventListener plotly.min.js:8
ki plotly.min.js:8
i plotly.min.js:8
createMap plotly.min.js:8
n plotly.min.js:8
plot plotly.min.js:8
plot plotly.min.js:8
drawData plotly.min.js:8
syncOrAsync plotly.min.js:8
_doPlot plotly.min.js:8
newPlot plotly.min.js:8
react plotly.min.js:8
React 3
commitLifeCycles [email protected]_14_1m1699425702.14.0.js:19949
commitLayoutEffects [email protected]_14_1m1699425702.14.0.js:22938
callCallback [email protected]_14_1m1699425702.14.0.js:182
invokeGuardedCallbackDev [email protected]_14_1m1699425702.14.0.js:231
invokeGuardedCallback [email protected]_14_1m1699425702.14.0.js:286
commitRootImpl [email protected]_14_1m1699425702.14.0.js:22676
unstable_runWithPriority [email protected]_14_1m1699425702.14.0.js:2685
runWithPriority$1 [email protected]_14_1m1699425702.14.0.js:11174
commitRoot [email protected]_14_1m1699425702.14.0.js:22516
finishSyncRender [email protected]_14_1m1699425702.14.0.js:21942
performSyncWorkOnRoot [email protected]_14_1m1699425702.14.0.js:21928
flushSyncCallbackQueueImpl [email protected]_14_1m1699425702.14.0.js:11224
unstable_runWithPriority [email protected]_14_1m1699425702.14.0.js:2685
runWithPriority$1 [email protected]_14_1m1699425702.14.0.js:11174
flushSyncCallbackQueueImpl [email protected]_14_1m1699425702.14.0.js:11219
workLoop [email protected]_14_1m1699425702.14.0.js:2629
flushWork [email protected]_14_1m1699425702.14.0.js:2584
performWorkUntilDeadline [email protected]_14_1m1699425702.14.0.js:2196
EventHandlerNonNull* [email protected]_14_1m1699425702.14.0.js:2219
<anonymous> [email protected]_14_1m1699425702.14.0.js:15
<anonymous> [email protected]_14_1m1699425702.14.0.js:16
and
Error: The layer 'plotly-trace-layer-4f7f6d-circle' does not exist in the map's style and cannot be queried for features.
queryRenderedFeatures plotly.min.js:8
queryRenderedFeatures plotly.min.js:8
hoverPoints plotly.min.js:8
ht plotly.min.js:8
hover plotly.min.js:8
hover plotly.min.js:8
l plotly.min.js:8
throttle plotly.min.js:8
hover plotly.min.js:8
initFx plotly.min.js:8
fire plotly.min.js:8
mousemove plotly.min.js:8
handleEvent plotly.min.js:8
addEventListener plotly.min.js:8
ki plotly.min.js:8
i plotly.min.js:8
createMap plotly.min.js:8
n plotly.min.js:8
plot plotly.min.js:8
plot plotly.min.js:8
drawData plotly.min.js:8
syncOrAsync plotly.min.js:8
_doPlot plotly.min.js:8
newPlot plotly.min.js:8
react plotly.min.js:8
React 3
commitLifeCycles [email protected]_14_1m1699425702.14.0.js:19949
commitLayoutEffects [email protected]_14_1m1699425702.14.0.js:22938
callCallback [email protected]_14_1m1699425702.14.0.js:182
invokeGuardedCallbackDev [email protected]_14_1m1699425702.14.0.js:231
invokeGuardedCallback [email protected]_14_1m1699425702.14.0.js:286
commitRootImpl [email protected]_14_1m1699425702.14.0.js:22676
unstable_runWithPriority [email protected]_14_1m1699425702.14.0.js:2685
runWithPriority$1 [email protected]_14_1m1699425702.14.0.js:11174
commitRoot [email protected]_14_1m1699425702.14.0.js:22516
finishSyncRender [email protected]_14_1m1699425702.14.0.js:21942
performSyncWorkOnRoot [email protected]_14_1m1699425702.14.0.js:21928
flushSyncCallbackQueueImpl [email protected]_14_1m1699425702.14.0.js:11224
unstable_runWithPriority [email protected]_14_1m1699425702.14.0.js:2685
runWithPriority$1 [email protected]_14_1m1699425702.14.0.js:11174
flushSyncCallbackQueueImpl [email protected]_14_1m1699425702.14.0.js:11219
workLoop [email protected]_14_1m1699425702.14.0.js:2629
flushWork [email protected]_14_1m1699425702.14.0.js:2584
performWorkUntilDeadline [email protected]_14_1m1699425702.14.0.js:2196
EventHandlerNonNull* [email protected]_14_1m1699425702.14.0.js:2219
<anonymous> [email protected]_14_1m1699425702.14.0.js:15
<anonymous> [email protected]_14_1m1699425702.14.0.js:16
plotly.min.js:8:2494743
fire plotly.min.js:8
queryRenderedFeatures plotly.min.js:8
queryRenderedFeatures plotly.min.js:8
hoverPoints plotly.min.js:8
ht plotly.min.js:8
hover plotly.min.js:8
hover plotly.min.js:8
l plotly.min.js:8
throttle plotly.min.js:8
hover plotly.min.js:8
initFx plotly.min.js:8
fire plotly.min.js:8
mousemove plotly.min.js:8
handleEvent plotly.min.js:8
(Async: EventListener.handleEvent)
addEventListener plotly.min.js:8
ki plotly.min.js:8
i plotly.min.js:8
createMap plotly.min.js:8
n plotly.min.js:8
plot plotly.min.js:8
plot plotly.min.js:8
drawData plotly.min.js:8
syncOrAsync plotly.min.js:8
_doPlot plotly.min.js:8
newPlot plotly.min.js:8
react plotly.min.js:8
React 3
commitLifeCycles [email protected]_14_1m1699425702.14.0.js:19949
commitLayoutEffects [email protected]_14_1m1699425702.14.0.js:22938
callCallback [email protected]_14_1m1699425702.14.0.js:182
invokeGuardedCallbackDev [email protected]_14_1m1699425702.14.0.js:231
invokeGuardedCallback [email protected]_14_1m1699425702.14.0.js:286
commitRootImpl [email protected]_14_1m1699425702.14.0.js:22676
unstable_runWithPriority [email protected]_14_1m1699425702.14.0.js:2685
runWithPriority$1 [email protected]_14_1m1699425702.14.0.js:11174
commitRoot [email protected]_14_1m1699425702.14.0.js:22516
finishSyncRender [email protected]_14_1m1699425702.14.0.js:21942
performSyncWorkOnRoot [email protected]_14_1m1699425702.14.0.js:21928
flushSyncCallbackQueueImpl [email protected]_14_1m1699425702.14.0.js:11224
unstable_runWithPriority [email protected]_14_1m1699425702.14.0.js:2685
runWithPriority$1 [email protected]_14_1m1699425702.14.0.js:11174
flushSyncCallbackQueueImpl [email protected]_14_1m1699425702.14.0.js:11219
workLoop [email protected]_14_1m1699425702.14.0.js:2629
flushWork [email protected]_14_1m1699425702.14.0.js:2584
performWorkUntilDeadline [email protected]_14_1m1699425702.14.0.js:2196
(Async: EventHandlerNonNull)
<anonymous> [email protected]_14_1m1699425702.14.0.js:2219
<anonymous> [email protected]_14_1m1699425702.14.0.js:15
<anonymous> [email protected]_14_1m1699425702.14.0.js:16
Any help on understanding the source of the issue and a way to remedy it would be greatly appreciated!
[This is a duplicate of this post on the Plotly forum]
hi @stephenwinn16 You mention that the cluster option is not expected to work with OpenStreetMaps tiles. But I tried using the "open-street-map" mapbox style and I was able to click the markers and get them to print to the location into my terminal. Did open-street-map not work for you?
Hi @Coding-with-Adam, Does it work reliably though? The issue I'm having here is that the code works some of the time. If you refresh the page a few times, do the errors I observe above eventually appear in your console log? The issue with the "open-street-map" style is that you cannot use all the styling options (e.g. showing the number of points in the cluster).
hi @stephenwinn16 For my example, the code worked consistently, even after I refreshed the page.
Hi @Coding-with-Adam, Thanks for checking. That complicates pinpointing the source of the issue... Can I ask what browser/version you were using?
I was having a similar issue, so I played around with it a bit. I believe it has something to do with the hover functionality. If you don't hover the map before it finishes loading, it works. If you hover over the map before it's completely loaded, you will get this error. That explains the inconsistent error and probably why @Coding-with-Adam couldn't get it to error.
https://github.com/plotly/dash/assets/49296311/12403381-d6eb-4909-b8e0-c0a96808b5a9
