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()