Select and zoom

Question

I'm working on a tool with shiny and leaflet: I want that when a customer click on the vars (see UI code for example NE), the map go to another view for example like this in pure leaflet:

  L.easyButton( '<strong>NE</strong>', function(){
  //zoomTo.setView([55, -2], 4);
  map.setView([46.95, 6.85], 12);
  }).addTo(map);

Here is my R code:

---

 #UI:
 library(leaflet)

Choices for drop-downs
vars <- c(
"NE" = "NE",
"VD" = "VD",
"VS" = "VS",
"JU" = "JU",
"BE" = "BE",
"GE" = "GE")


navbarPage("Près de chez toi ciao.ch", id="nav",

tabPanel("Interactive map",
div(class="outer",

  tags$head(
    # Include our custom CSS
    includeCSS("styles.css"),
    includeScript("gomap.js")
  ),

  leafletOutput("map", width="100%", height="100%"),

  # Shiny versions prior to 0.11 should use class="modal" instead.
  absolutePanel(id = "controls", class = "panel panel-default", fixed =             TRUE,
    draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
    width = 330, height = "auto",

    h2("Rechercher "),

    selectInput("canton", "Canton", data$canton,selected = "" )


  ),

  tags$div(id="cite",
    "sddssd"
  )
  )
 ),

tabPanel("Adresses",
                  dataTableOutput('mytable')    
)
)

---

   #SERVER:
         data <- read_csv("~/Desktop/superzip r/Sans titre 2.csv")
    function(input, output, session) {

 ## Interactive Map ###########################################

 # Create the map
 output$map <- renderLeaflet({
 leaflet() %>%
  addTiles(
 urlTemplate = "//{s}.tiles.mapbox.com/v3/jcheng.map-        5ebohr46/{z}/{x}/{y}.png",
    attribution = 'Maps by <a href="http://www.mapbox.com/">Mapbox</a>'
  ) %>%
  setView(lng =  6.6328200, lat = 46.5160000, zoom = 12)%>%
  addMarkers(data,lng=data$Longitude,lat=data$Latitude,label =    data$nom)
      
 })


 ###observation
observe({
canton<-input$canton
 })
output$mytable = renderDataTable({
       data
      },options = list(
        autoWidth = TRUE,
        columnDefs = list(list(width = '200px', targets = "_all"))))}
  

---

 #data
 1           Genève     GE 022 329 11 69                                                          www.fegpa.ch  6.164722 46.19853
 2 Chavannes-près-Renens     VD 021 633 44 32                                                        croix-bleue.ch  6.575761 46.53280
 3              Lausanne     VD 021 623 84 84                                                            www.fva.ch  6.611342 46.52284
 4             Neuchâtel     NE 032 889 62 10                                                  http://www.cenea.ch/  6.909872 46.98825
 5              Delémont     JU 032 421 80 80 http://www.addiction-jura.ch  6.411595 46.94195
 6              Lausanne     VD 021 321 29 11                                                www.addictionsuisse.ch  6.626040 46.51873

Answer 1

To update a leafletMap you should use leafletProxy, you can read about that here.

The idea is that you need to have a reactive value that is updated when you change the selection, that reactive value is observed by the leafletProxy and its values used to perform the update.

It should look like this:

output$map <- renderLeaflet({
        leaflet(data) %>%
            addTiles(urlTemplate = "//{s}.tiles.mapbox.com/v3/jcheng.map-5ebohr46/{z}/{x}/{y}.png",
                     attribution = 'Maps by <a href="http://www.mapbox.com/">Mapbox</a>'
            ) %>% 
            setView(lng = 6.6328200, lat = 46.5160000, zoom = 12) %>% 
            addMarkers(data$long, data$lat, label = data$nom)            
    })

    center <- reactive({
        subset(data, nom == input$canton) 
        # or whatever operation is needed to transform the selection 
        # to an object that contains lat and long
    })

    observe({
        leafletProxy('map') %>% 
            setView(lng =  center()$long, lat = center()$lat, zoom = 12)
    })