javascript - examples - shiny templates

Cambie la posición predeterminada del control de zoom en el mapa de folletos de la aplicación Shiny

Question

Estoy usando la aplicación Shiny para crear un mapa de folleto, pero quiero cambiar la posición predeterminada del control de zoom de topleft a topright .

El paquete de leaflet R establece la posición predeterminada como topleft en los códigos fuente.

Después de esta pregunta: Personalizar el botón Acercar / Alejar en leaflet.js , podemos usar map.zoomControl.setPosition(''topright''); para cambiar la posición del control del zoom.

var map = L.map(''map'', {
  zoomControl: true
});
map.zoomControl.setPosition(''topright'');

¿Podría crear una función R para establecer una nueva posición de zoomControl ? Por ejemplo,

zoomControlPosition <- function(map, position = ''topleft'') {
    # New codes add here
}

Supongo que implica algunos js , pero no tengo experiencia con js . Gracias por cualquier sugerencia.

Answer 1

zoomControl cómo cambiar la posición de zoomControl . Puede encontrar esta característica en el paquete de mi folleto: https://github.com/byzheng/leaflet/commit/fdf9fb159adbc0e36cc2bd7d7b33c72c17c468f6

Este es un ejemplo mínimo para usarlo:

library(shiny)
library(leaflet)


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

server <- function(input, output, session) {
  output$mymap <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%

      zoomControlPosition(''topright'')
  })
}

shinyApp(ui, server)

Answer 2

Aunque no lo he probado, creo que Bangyou le dio una respuesta que responde exactamente a su pregunta.

Todavía me gustaría compartir mi enfoque sobre este tema por dos razones:

• Le da una flexibilidad fácil para modificar su zoomControl de muchas maneras (trabajando solo en R)
• No modifica el paquete del prospecto, por lo que probablemente sea bueno con todos los próximos lanzamientos de folletos.

El enfoque es personalizar el control de zoom con ActionButtons.

En el servidor

• Mantenga un registro de la vista del mapa actual en valores reactivos. (Uso esto para algo más que el control de zoom)
• Establezca la vista (setView) arriba o abajo cuando se presiona el botón de acción correspondiente.

Agregar al servidor.R

# Zoom control - zoom out
observeEvent(input$map_zoom_out ,{
  leafletProxy("map") %>% 
    setView(lat  = (input$map_bounds$north + input$map_bounds$south) / 2,
            lng  = (input$map_bounds$east + input$map_bounds$west) / 2,
            zoom = input$map_zoom - 1)
})
# Zoom control - zoom in
observeEvent(input$map_zoom_in ,{
  leafletProxy("map") %>% 
    setView(lat  = (input$map_bounds$north + input$map_bounds$south) / 2,
            lng  = (input$map_bounds$east + input$map_bounds$west) / 2,
            zoom = input$map_zoom + 1)
})

Me gusta agregar paneles absolutos en la interfaz de usuario con ActionButtons, pero coloque los botones donde desee.

En ui.R agrega:

absolutePanel(
  top = "auto", left = "auto", right = 20, bottom = 20,
  width = "auto", height = "auto",
  actionButton("map_zoom_in", "+"),
  actionButton("map_zoom_out", "-")
)

Esto le permite cambiar la posición predeterminada y elegir cualquier posición. No olvide deshabilitar el control de zoom estándar en el servidor con

leaflet(options = leafletOptions(zoomControl = FALSE))

Espero que sea valioso

Mejor, Jiddu Alexander