Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

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

I am creating a density mapbox in dash and would like to keep the heatmap radius constant to ensure an intuitive and accurate display. There are probably two ways to go about this, one easier than the other.

First, scrollZoom = False works like a charm to disable the zoom feature–this is a perfect solution, but does not work for mobile. Is there a similar config setting for mobile? If not, is there a way to achieve this for mobile?

If there is no way to set scrollZoom = False or something similar for mobile, is there an easy and non resource-heavy way to keep the heatmap from changing map radius as I zoom in/out? I have fiddled around with changing radius on zoom with layers, but it is way too taxing to be a feasible solution.

Thanks in advance.

Hi Joe @jkiefn1 ,
Welcome to the Community,

I’m not sure. There might be a way, but can you please share a minimal working example so we can run your code locally and try it out ourselves.

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

Let me know if there is anything else I can add that might help out. Thanks Plotly/Dash Team!

Any update here plotly team?

Hi Joe @jkiefn1 ,
Let me tasks a stab at this. I’ve never tried to control the zoom on a mobile specifically, but I’ll try to find out.
Have you deployed this app and when you tried to load this on a mobile, the zoom in/out still works despite having disabled it? Did I understand that correctly?

@adamschroeder , you understand correctly! For apps deployed to the web, I use Heroku, scrollZoom = False only works on desktop, it does not work for mobile.

A prior poster has similar issues, can be found here

hi @jkiefn1
You’re right. This seems like a bug. I couldn’t get it to work either on mobile. Let me run it by my team and see if I can get more insight on the matter. I should know by the end of the week. Thank you for catching this.

Adam

That sounds great @adamschroeder, thank you for looking into it!

Btw, your YouTube videos on Dash / Plotly are fantastic. Huge fan and incredibly helpful.

2 Likes

I have the same issue: I disabled zooming by setting scrollZoom = False + fixing the range to avoid seeing the “zoom/pan rectangle”.

However, scrolling does not work reliably on mobile: I can’t use the area of the graph to scroll down the page.

Interestingly, scrolling seems to work a couple of times and then stops until i touch outside of the graph area, then the graph area temporarily works for scrolling again. Same for you @jkiefn1?

1 Like

@janbun I am not having the same issues–I have no issues scrolling on mobile. The issue is I don’t want to scroll at all and scrollZoom = False does not seem to work in disabling zoom.

Got it. My bad. For anyone with “my” problem: Check Plotly on Mobile - page scrolling · Issue #2844 · plotly/plotly.js · GitHub

No you’re good! Just wanted to make sure to not confuse our separate issues! Thanks @janbun

Hi @jkiefn1
This indeed seems like a bug.
One good way to move forward is to create a minimal codepen (like this example) and then open a new plotly.js issue.

Would you be able to do that?

@adamschroeder, I believe I submitted the issue as requested. If something needs adjusted just let me know.

Otherwise, happy de-bugging!

1 Like

thank you Joe.