scrollZoom = False for mobile or non-changing heatmap radius on zoom?

Dash Python
3

Sure thing! Below is the code. The line in question in the line for the dcc.Graph where scrollZoom = False. It works perfectly for desktop, but does not work as intended for mobile. I’d like to lock the user’s ability to zoom in / out but keep the ability to pan around. On mobile users can still zoom in/out.

import pandas as pd
import plotly.graph_objs as go
import plotly.express as px
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

rgba = 'rgba(248, 246, 243, 1)'

date = [1,1,2,2]
lat = [30, 31, 30, 31]
longs = [-90, -93, -90, -93]
loc = ['Point A', 'Point B', 'Point A', 'Point B']
count = [300, 450, 310, 600]
lwr = 0
upr = 600

df = pd.DataFrame(zip(date, lat,longs,loc,count), columns=['Date','lat','long','Location','count'])

# Initialize the app server, starting info, and rgba of background
app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags = [{'name': 'viewport',
                             'content': 'width=device-width, initial-scale=1'
                            }]
                   )

# ------------------------------------------------------------------------------
# App layout (REMEMBER, BOOTSTRAP LAYOUT HAS 12 COLUMNS)
app.layout = dbc.Container([
    
        # Row 1
        dbc.Row([
        
        # Row 1, Column 1 -- The Date Select Slider
        dbc.Col([
            dcc.Slider(id='select_date',
                       min=1, 
                       max=2, 
                       value=1,
                           marks={
                               1: 'Date 1',
                               2: 'Date 2'
                           },
                       included=False
                      )
        ],
            width={'size': 12, 'offset': 0},
            style={'height': '10vh', 'backgroundColor': rgba},
            align='center'
        ),
            
    ], no_gutters=True, align='center', justify='center'),
    
        # Row 2
        dbc.Row([
        
        # Row 2, Column 1 -- The Migration Map
        dbc.Col([       
            dcc.Graph(id='migration_map',
                      figure={},
                      config={'displayModeBar': False
                              ,'scrollZoom': False # This gets rid of the ability to zoom, BUT ONLY ON DESKTOP
                             }, 
                      responsive=True,
                      style={'height': '80vh', 'top': '50%', 'left': '50%', 'backgroundColor': rgba}
                     ),
        ],
            width={'size': 12, 'offset': 0},
            style={'height': '90vh', 'backgroundColor': rgba}
        ),
        
    ], no_gutters=True, align='center', justify='center'),
    
], fluid=True, style={'backgroundColor': rgba})

# ------------------------------------------------------------------------------
# Connect the Plotly graphs with Dash Components
@app.callback(
    Output(component_id='migration_map', component_property='figure'),
    Input(component_id='select_date', component_property='value')
)

def update_graph(selected_date):
    
    ###############################################
    ##### Start forming the desired DataFrame #####
    ###############################################
    
    dff = df.copy()
    
    dff = dff[(dff['Date'] == selected_date)]

    # Create the figure
    fig = px.density_mapbox(dff
                            ,lat='lat'
                            ,lon='long'
                            ,z='count'
                            ,hover_name='Location'
                            ,center=dict(lat=39, lon=-91)
                            ,zoom=3.475
                            ,mapbox_style='carto-positron'
                            ,opacity = 0.4
                            ,radius = 25
                            ,range_color = [lwr, upr]
                            ,color_continuous_scale=['rgb(0,0,0)',
                                                     'rgb(19,48,239)',
                                                     'rgb(115,249,253)',
                                                     'rgb(114,245,77)',
                                                     'rgb(254,251,84)',
                                                     'rgb(235,70,38)']
    #                             ,color_continuous_scale='inferno'
                           )


    return fig


# ------------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server()