Leaflet map preventing browser scroll

Question

Whenever the mouse pointer is hovering over a leaflet map, the browser does not scroll up or down. This happens even when I affix minZoom and maxZoom to an equal value. Is there a solution to this?

php.poverty.map.2009 <-
leaflet(options = leafletOptions(minZoom = 12, maxZoom = 12)) %>%
addProviderTiles("CartoDB.Positron") %>%
addPolygons(data = php.df.polygon.2009, 
          fillColor = ~php.pal.2009(percent), 
          color = "#b2aeae", # must use hex colors
          fillOpacity = 0.7, 
          weight = 0.3, 
          smoothFactor = 0.2,
          popup = php.popup.2009) %>%
addLegend(pal = php.pal.2009, 
        values = php.df.polygon.2009$percent, 
        position = "bottomright", 
        title = "Percent of Households <br> Living below Poverty <br> (Census, 2009)",
        labFormat = labelFormat(suffix = "%"))
php.poverty.map.2009

score 4 · Accepted Answer · answered Jun 02 '17 at 08:39

4

In my second attempt at answering this question I came across the leaflet.extras package which implements a selection of leaflet plugins in R. One of these is the Leaflet.Sleep plugin which can be implemented by adding the suspendScroll() function to your leaflet map in R.

Basic Example

First, install leaflet.extras using devtools::install_github('bhaskarvk/leaflet.extras').

library(leaflet)
library(leaflet.extras)

leaflet() %>%
    addProviderTiles("CartoDB.Positron") %>%
    suspendScroll()

See this page for an example.

answered Jun 02 '17 at 08:39

conrad-mac

843
10
15

Thank you. May I ask two more questions? (1) On a smartphone, swiping over the map prevents scroll. However, the phone's browser still does not scroll down. Is there a workaround this? (2) Is there a function that I can apply latency on leaflet response to hovering? I am making this is for my [blog](http://americanpolicy.me/SNAP_Arlington.html) – Jim O. Jun 03 '17 at 00:26
The suspendScroll() no longer works and the author has abandoned the project unfortunately and recommends people not to use it as the javascript is outdated and contains security risks (from the readme). – Rich - enzedonline Apr 09 '22 at 09:25

score 2 · Answer 2 · answered Jun 01 '17 at 17:39

A Leaflet map has a documented scrollWheelZoom option that allows you to disable scrollwheel interactions (but still allows other ways to zoom the map, such as the zoom buttons).

In plain Javascript, this is used like var map = L.map({ scrollWheelZoom: false }). I'm not well versed in R, but you should try leaflet(options = leafletOptions(scrollWheelZoom = false)) or variations thereof.

score 1 · Answer 3 · answered May 31 '17 at 19:18

1

I think your zoom options might need to go in the providerTiles function. I.e. addProviderTiles("CartoDB.Positron", options = providerTileOptions(minZoom=12, maxZoom=12))

answered May 31 '17 at 19:18

conrad-mac

843
10
15

It works for me. It works better with a smaller zoom number (like 2 or 3). I can't recreate your example entirely because I don't have your dataset but this is the code I'm using - `leaflet() %>% addProviderTiles("CartoDB.Positron", options = providerTileOptions(minZoom = 3, maxZoom = 3))` – conrad-mac May 31 '17 at 21:05
I presume the reason it does not work on mine because I have combined multiple tiles in a single map. Strangely, I added the script you shared with me in every addProviderTiles, and still does not work. I will fiddle with it a bit more :) – Jim O. Jun 01 '17 at 00:07

Leaflet map preventing browser scroll

3 Answers3

Basic Example