Search code examples
rshinyr-leaflet

Move zoom controls in Leaflet


I have a Shiny application with multiple leaflet maps. I'd like to move the zoom in/out controls from the top left side of the map to the top right, and I'm not sure how to do this - I'm pretty sure it's by calling options = leafletOptions() inside leaflet()/leafletProxy(), but I'm unsure of the exact syntax.

Minimum reproducible example:

library(shiny)
library(leaflet)

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

server <- function(input, output) {
  output$output1 <- renderLeaflet({
    leaflet() %>%
      addProviderTiles(providers$Esri.WorldImagery)
  })
  

}

# Run the application 
shinyApp(ui = ui, server = server)

Solution

  • See this example:

    library(shiny)
    library(leaflet)
    library(htmlwidgets)
    
    ui <- fluidPage(   
      leafletOutput("output1")
    )
    
    server <- function(input, output) {
      output$output1 <- renderLeaflet({
        leaflet(options = leafletOptions(zoomControl = FALSE)) %>%
          addProviderTiles(providers$Esri.WorldImagery) %>%
          onRender(
            "function(el, x) {
              L.control.zoom({position:'topright'}).addTo(this);
            }")
      }) 
    }
     
    shinyApp(ui = ui, server = server)
    

    The code references this: https://markusdumke.github.io/articles/2017/11/customize-leaflet-map-in-r-with-html-css-and-javascript/