@Emil thanks for highlighting the dash-leaflet option. It seems also interesting. However, I really would like to use dash-deck. Here seems to be the solution, which, for the moment, I can not figure out how to make it work. But I’m still trying…
Hi all,
Curious to know if anyone is also experiencing issues with the Contour demo, both on the Dash Gallery and when attempting to run as a standalone copy of the source? It’s only loading the basemap in Chrome 103.0.5060.114 - the contour layer isn’t rendering.
Expected result is shown in the working demo from Pydeck: ContourLayer — pydeck 0.7.1 documentation
Thoughts?
1 Like
Thank you for reporting @jbeardsley .
I informed my Plotly colleague. I’ll keep this post updated with any new information I get.
…update…
We will try to work on this, but in the meantime, it should work on Chrome Version 102.0.5005.61 (Official Build) (x86_64) and Firefox v102.0.1
1 Like
Hi @lorenzo and @mgendia did any of you find a useful workaround to this problem?.
Could really use this functionality. If anyone is working on creating a pull request to the dash-deck library regarding this then I would love to help out (although I’m not the best javascript/react developer).
hello, i am trying to replicate the dash app but it returns a blank canvas or error. Any idea?
My mapbox token looks correct (i request some stuff)
Please @adamschroeder , could be possible verify that keeps working?, this extension would be extremely useful for working with digital twins adding 3d data into the dashboard panels
Dash
Error:
TypeError Traceback (most recent call last)
Cell In[28], line 39
31 bitmap_layer = pdk.Layer(
32 “BitmapLayer”, data=None, image=IMG_URL, bounds=BOUNDS, opacity=0.7
33 )
35 view_state = pdk.ViewState(
36 latitude=37.7576171, longitude=-122.5776844, zoom=10, bearing=-45, pitch=60,
37 )
—> 39 r = pdk.Deck(
40 bitmap_layer,
41 initial_view_state=view_state,
42 map_style=pdk.map_styles.SATELLITE,
43 mapbox_key=mapbox_api_token,
44 )
47 app.layout = html.Div(
48 dash_deck.DeckGL(r.to_json(), id=“deck-gl”, mapboxKey=r.mapbox_key)
49 )
52 if name == “main”:
TypeError: init() got an unexpected keyword argument ‘mapbox_key’
hi @casasvil
Thank you for your question. I’m not really sure about this. Let me ask someone that knows Dash Deck better.
I’ll get back to you as soon as I hear back from them.
1 Like
hi @casasvil ,
It seems that pydeck (pdk) changed their API and the mapbox token is either no longer supported via this arg, or it has been removed from their API. This is because mapbox changed their API a while back that made open source projects non compatible, so they switched to open alternative.
Given our focus on more prominent and more commonly used Dash components, Dash deck has not been updated, and any updates are unlikely to happen unless there is high demand.
sorry to hear about that,
ok thank you for inform us
great work! 
maybe trying to include Mapalibre could be a great combination instead 
Examples | MapLibre GL JS Docs | MapLibre
Is there any possibility to include the “on_resize”-event in dash_deck.DeckGL-Component?
Or any other way to get the zoom state?
Or is it possible to change the default units of an icon layer to meters so that the icons change size on zooming automatically instead of manually adapting them when zooming?
Thanks for your help!
Is there a way to apply the satellite or terrain maps from mapbox to the globe view? I am wanting to plot data at locations in the ocean, and the empty globe view is a little empty.
Absolutely love this though! Incredible work getting it implemented in Dash! Makes it so incredibly easy to implement! Thanks for the hard work!
I am using Dash Deck to create interactive maps, but I have a question about the geojson data I upload. I want to know if the geojson data is stored on the Mapbox server or if it is only used for rendering the map. I don’t want my data to be reused by anyone else without my permission.
Mapbox only has connection to your applications map stlying from their api key. But nothings 100% on the internet, Practicality, utility or privacy.
Hello guys, I successfully managed to run the UK accident example. Now i want to change the Map to use my custom mapbox style, but changing the “map_style=” to my mapbox:// url does not seem to work, any ideas what I did wrong?
Here is the code:
"""
This demo shows how to interact with event callbacks
like clickInfo, hoverInfo, dragStartInfo, etc.
"""
import os
import json
import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import dash_deck
import pydeck as pdk
mapbox_api_token = "mykey..."
# 2014 locations of car accidents in the UK
UK_ACCIDENTS_DATA = (
"https://raw.githubusercontent.com/uber-common/"
"deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv"
)
def get_deck(scale):
# Define a layer to display on a map
layer = pdk.Layer(
"HexagonLayer",
UK_ACCIDENTS_DATA,
get_position=["lng", "lat"],
auto_highlight=True,
elevation_scale=scale,
pickable=True,
elevation_range=[0, 3000],
extruded=True,
coverage=1,
)
# Set the viewport location
view_state = pdk.ViewState(
longitude=-1.415,
latitude=52.2323,
zoom=6,
min_zoom=5,
max_zoom=15,
pitch=40.5,
bearing=-27.36,
)
map_view = pdk.View("MapView", controller=True)
# Render
r = pdk.Deck(
layers=[layer],
initial_view_state=view_state,
views=[map_view],
map_style="mapbox://styles/a-bnk/clz44tk5c00my01qnh6pcftfx",
api_keys={"mapbox": mapbox_api_token},
)
return r
# Start building the layout here
styles = {
"json-output": {
"overflowY": "scroll",
"height": "calc(50% - 25px)",
"border": "thin lightgrey solid",
},
"tab": {"height": "calc(98vh - 115px)"},
}
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div(
[
html.H1("My Test Title", style={"text-align": "center"}),
html.Div(
id='map-container',
style={
"width": "100%",
"height": "80vh",
"display": "inline-block",
"position": "relative",
"padding-bottom": "40px"
},
children=[
],
),
dcc.Slider(0, 20, 5,
value=10,
id='my-slider'
),
],
)
@app.callback(
Output('map-container','children'),[Input('my-slider', 'value')]
)
def update_graph(scale):
return dash_deck.DeckGL(
get_deck(scale).to_json(),
id="deck",
mapboxKey=mapbox_api_token,
tooltip=True,
)
if __name__ == "__main__":
app.run_server(debug=True)