Search code examples
rshinyleafletr-leaflet

How to make granulatity greater (smoother zooming) on leaflet map?


I try to add greater granulatity to leaflet map. I googled it and read some posts here on SO but it doesn't help me. I added zoomSnap (according to leaflet documentation) as a custom option in leafletOptions but it doesn't work. I also tried to add custom js code in onRender section but it also doesn't work. Any ideas how to make it possible? I would like zooming work as in Mapbox, it works really smoothly (e.g. https://docs.mapbox.com/mapbox-gl-js/example/simple-map/)

Here is my reproducible code. Commented part is raw JS, I tried with this one too but it doesn't work:

library(shiny)
library(leaflet)
library(dplyr)
library(sf)
library(htmlwidgets)

ui <- fluidPage(
   leafletOutput("map")
)

server <- function(input, output, session) {
   
   coords <- quakes %>%
      sf::st_as_sf(coords = c("long","lat"), crs = 4326)

     output$map <- leaflet::renderLeaflet({
     leaflet::leaflet(
        options = leaflet::leafletOptions(
           zoomSnap = 0.1)
        ) %>%         
       leaflet::addTiles() %>%
       leaflet::setView(172.972965,-35.377261, zoom = 4) %>%
       leaflet::addCircleMarkers(
         data = coords,
         stroke = FALSE,
         radius = 6) #%>% 
        # htmlwidgets::onRender(
        #       "function(el, x) {
        #     var map = this;
        #     map.options({zoomSnap: 0.1});}" 
        #    )
   })
}

shinyApp(ui, server)

Solution

  • Try leafletOptions(zoomSnap = 0.1, zoomDelta = 0.1)

    zoomSnap = x is to force zoom levels to be multiples of x

    zoomDelta = y is to change the zoom level by units of y