1

I've dug into a few older stack exchanges on this topic, but am at a standstill.

I am attempting to let leaflet dynamically resize in a large shiny app when the application is resized. I'm doing that through an event listener tied to the leaflet's bounds, which are handily stretched when the ui is resized.

It's doing some resizing, but waits for certainly cut points, then the map resizes in a large choppy jump. With chrome developer console on and watching, the svg gets a new translate3d with a scale parameter that only catches and runs at 0.5 and 2, e.g. the translate 3d works pixel by pixel, then the scale pops in at some threshold at runs either 0.5 or 2, then disappears again.

<svg class="leaflet-zoom-animated" width="768" height="313" viewBox="-22 -6 768 313" style="transform: translate3d(-22px, -6px, 0px);">....</svg>

I've tried working the leaflet options as best I can (see code below, see here: http://leafletjs.com/reference-1.2.0.html#map-option), but can't seem to get around this large jump in zoom.

Below is the code excerpt I have so far. Anyone have experience in this?

output$leaflet_test <- renderLeaflet({
bb = bbox(NC_counties); c(bb)
#bb = bb+c(+1,+1,-1,-1)*.8; c(bb)
#bb = c(-84, 34, -77, 36.0)
# E W
# S N
leaflet(NC_counties
        , 
        options=leafletOptions(attributionControl=F, zoomControl=F, # turn off controls
                               zoomSnap=0.01, #zoomDelta=0.01, 
                               trackResize=F, #doesn't seem to work
                               boxZoom = F, doubleClickZoom = F, dragging=F, 
                               transform3DLimit = 2^5, 
                               keyboard=F, scrollWheelZoom=F,
                               zoomAnimation = F  #?

                              # zoom to limits? https://rdrr.io/cran/leaflet/man/mapOptions.html
                                )
        ) %>% 
  #setView(-80.793457, 35.782169, 6.5) %>%
  fitBounds(lat1 = bb[2], lng1 = bb[1], lat2 = bb[4], lng2 = bb[3]) %>% 
  addPolygons(fillColor = ~pal(ALAND), 
              weight=1, opacity = 1, color = "white", fillOpacity = 0.9,
              highlight = highlightOptions(weight = 5, color = "#666", dashArray = "", 
                                           fillOpacity = 0.7, bringToFront = TRUE),
              label = ~lapply(labels, HTML)#,
              #labelOptions = labelOptions(style = list("font-weight" = "normal", padding = "3px 8px"), textsize = "15px", direction = "auto")
  )
})

# https://github.com/rstudio/leaflet/issues/448 or https://groups.google.com/forum/#!topic/shiny-discuss/P80waHG_hhU 
# See observers? observe() or leafletProxy() 
# or here https://stackoverflow.com/questions/34082452/shiny-send-an-resize-event-when-ui-element-gets-resized 
# or the leaflet documentation on proxy: https://rstudio.github.io/leaflet/shiny.html 
#observe({leafletProxy("leaflet_test") %>% fitBounds(lat1 = box[2], lng1 =     box[1], lat2 = box[4], lng2 = box[3])})

observeEvent(input$leaflet_test_bounds, {
  bb = bbox(NC_counties) # consistent for all leaflets. Resize them all here.
  #bb = bb+c(+1,+1,-1,-1)*.8; c(bb) #bb = c(-84, 34, -77, 36.0)
  leafletProxy("leaflet_test") %>% fitBounds(lat1 = bb[2], lng1 = bb[1], lat2 = bb[4], lng2 = bb[3])
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.