Comments (5)
Any updates on this? This package looks awesome, but I am currently blocked by the same issue.
from dash-deck.
Hi wtglad,
I did not have a full understanding of Dash when I asked this question. The Dash documentation is also quite extensive and can be difficult to navigate.
Here's how I solved it:
- Make a div say 'map-container' and the component property to be updated would be its 'children' instead of 'figure'
- No change in the update_graph method
app.layout = html.Div(
.
.
.
html.Div(
id='map-container',
className="row div-for-charts bg-grey",
children=[
],
),
.
.
.
)
@app.callback(
Output("map-container",'children'),
[
Input("date-picker", "date"),
Input("trip-slider", "value")
],
)
def update_graph(datePicked, sliderValue):
<return map object here>
from dash-deck.
Cool, got it working - thanks!
from dash-deck.
It is possible to have a minimal viable example to achieve this? Ideally with a layout divided into a left layout (4 columns width) where are the controls and a right layout showing the deck map?
Many thanks for your help
from dash-deck.
@lperozzi
Below is a modified version of the events demo. It adds a slider to change the elevation scale of the map:
"""
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
# 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],
)
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(
[dcc.Slider(0, 20, 5,
value=10,
id='my-slider'
),
html.Div(
id='map-container',
style={
"width": "64%",
"height": "95vh",
"display": "inline-block",
"position": "relative",
},
children=[
],
),
]
)
@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",
tooltip=True,
)
if __name__ == "__main__":
app.run_server(debug=True)
from dash-deck.
Related Issues (11)
- Demo: ArcLayer
- Is it possible to get the zoom level of map? HOT 1
- Render a Scenegraph Layer
- DeckGL compatibility is affecting mobile rendering
- Map not displaying when using columnLayer
- Cannot execute example code HOT 1
- Please Upgrade to the latest DeckGl.js HOT 2
- Dash Deck Data Allocation: GeoJSON Handling HOT 1
- Line-layer demo shows far less data than equivalent deck.gl demo yet both use same data source. HOT 2
- Mirrored into conda-forge? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dash-deck.