Dynamic bounding box update for mapbox_scatter based on second scatterplot

📊 Plotly Python
1

Hi all,

I’ve been struggling for a few days with doing something that seems possible but is leading me into a dark hole…

I have two dcc.Graph objects: a scatter mapbox and a scatterplot. I want to be able to pipe the relayoutData from the scatterplot and have the mapbox dynamically update its bounds to fit the selected data. I’ve tried a lot of things… Here is my code this far

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash.dependencies import Input, Output# Load Data
app = JupyterDash(__name__)
minx, miny, maxx, maxy = df.geometry.total_bounds
fig = px.scatter_mapbox(df, lat=df.geometry.y, lon=df.geometry.x, hover_name="heights", hover_data=['heights'], color="heights").update_layout(
    mapbox_style="white-bg",
    mapbox_layers=[
        {"name": "myplot","below": 'traces',
            "sourcetype": "raster",
         "coordinates":[(minx, maxy), (maxx, maxy), (maxx, miny), (minx, miny)],
            "sourceattribution": "United States Geological Survey",
            "source": [
                "https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}"]}])
graph = px.scatter(x=df.geometry.y, y=df.heights).update_traces(marker={'size': 4}).update_yaxes(title_text='Elevation above WGS84 Ellipsoid').update_xaxes(title_text='Latitude')
# Create and add slider

app.layout = html.Div([
    html.H1("Visualization"),
    dcc.Graph(figure=fig, id='map'),
    dcc.Graph(figure=graph, id='plot')])

@app.callback(
    Output('map', 'myplot'),
    Input('plot', 'relayoutData'),
    prevent_initial_call=True)
def update_figure(relayoutData):
    if relayoutData:
        print(relayoutData)
        if list(relayoutData.keys())[0] == 'autosize':
            pass
        else:
            a = float(list(relayoutData.values())[0])
            b = float(list(relayoutData.values())[1])
            df_clip = df[df.geometry.y > a]
            df_clip = df_clip[df_clip.geometry.y < b]
#             df_clip = pd.concat([df_clip1, df_clip2])
            minx, miny, maxx, maxy = df_clip.geometry.total_bounds
            #fig.update_traces(lat=df_clip.geometry.y, lon=df_clip.geometry.x, selector=dict(type='scattermapbox'))
            return px.scatter_mapbox(df_clip, lat=df_clip.geometry.y, lon=df_clip.geometry.x, hover_name="heights", hover_data=['heights'], color="heights").update_layout(
                mapbox_style="white-bg",
                mapbox_layers=[
                    {"name": "myplot","below": 'traces',
                        "sourcetype": "raster",
                     "coordinates":[(minx, maxy), (maxx, maxy), (maxx, miny), (minx, miny)],
                        "sourceattribution": "United States Geological Survey",
                        "source": [
                            "https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}"]}])

    else:
        return JupyterDash.no_update



app.run_server(mode='inline')
1 Like
2

hi, can you please share your data for plotting?