在Shiny app的传单地图中更改缩放控件的默认位置

Question

我使用Shiny app创建传单地图，但想要将缩放控制的默认位置从topleft更改为topright。

R leaflet包将源代码中的默认位置设置为topleft。

关注此问题：Customize Zoom in/out button in leaflet.js，我们可以使用map.zoomControl.setPosition('topright');更改缩放控件的位置。

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

我可以创建一个R函数来设置zoomControl的新位置吗？例如，

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

我猜它涉及一些js，但我没有js的经验。感谢您的任何建议。

Answer 1

我弄清楚如何改变zoomControl的位置。您可以从我的传单包中找到此功能：https://github.com/byzheng/leaflet/commit/fdf9fb159adbc0e36cc2bd7d7b33c72c17c468f6

这是使用它的最低范例：

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

尝试一下：

leaflet(options = leafletOptions(zoomControl = FALSE)) %>%
    htmlwidgets::onRender("function(el, x) {
        L.control.zoom({ position: 'topright' }).addTo(this)
    }") %>%

Answer 3

即使我没有尝试过，但我认为Bangyou给了你一个完全回答你问题的答案。

我仍然希望分享我对此问题的处理方法有两个原因：

• 它可以轻松灵活地以多种方式修改zoomControl（仅在R中工作）
• 它没有修改传单包，所以你可能对所有即将发布的传单都很好。

方法是使用actionButtons自定义zoomcontrol。

在服务器

中

• 跟踪无效值中的当前地图视图。 （我使用它不仅仅是缩放控制）
• 按下相应的操作按钮时，向上或向下设置视图（setView）。

添加到server.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)
})

我想在UI中使用actionButtons添加absolutepanel，但是将按钮放在您喜欢的位置。

在ui.R中添加：

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

这允许您更改默认位置并选择任何位置。不要忘记使用

禁用服务器中的标准缩放控件

leaflet(options = leafletOptions(zoomControl = FALSE))

希望它有价值。

最佳， Jiddu Alexander