更改 Shiny 应用传单地图中缩放控件的默认位置答案

【问题标题】：Change the default position of zoom control in leaflet map of Shiny app更改 Shiny 应用传单地图中缩放控件的默认位置
【发布时间】：2016-06-03 07:10:59
【问题描述】：

我正在使用 Shiny 应用创建传单地图，但想将缩放控件的默认位置从 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的经验。感谢您的任何建议。

【问题讨论】：

标签： javascript r shiny leaflet

【解决方案1】：

试试这个：

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

【讨论】：

对我来说就像一个魅力。

【解决方案2】：

我知道如何更改zoomControl 的位置。您可以从我的传单包 fork 中找到此功能：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)

【讨论】：

这可能是一个愚蠢的问题，但是我如何通过您提供的链接访问您的zoomControlPosition 函数？
我的拉取请求似乎没有合并到传单包中。你可以从我的 fork 中找到它：github.com/byzheng/leaflet
你已经删除了你的分叉，邦友。您能告诉我们您是如何创建 zoomControlPosition 函数的吗？

【解决方案3】：

尽管我没有尝试过，但我认为邦友给你的答案正好回答了你的问题。

我仍然想分享我对这个问题的处理方法，原因有两个：

它可以轻松灵活地以多种方式修改您的 zoomControl（仅适用于 R）
它不会修改传单包，因此您可能会很好地使用所有即将发布的传单。

方法是使用actionButtons自定义缩放控件。

在服务器中

以反应值跟踪当前地图视图。（我不仅将其用于缩放控制）
按下相应的操作按钮时向上或向下设置视图 (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 添加绝对面板，但将按钮放置在您喜欢的位置。

在 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))

希望它有价值。

最好，吉杜亚历山大

【讨论】：