R leaflet - 在 map 上添加一个新标记，弹出窗口已打开

Question

我有一个 shiny 应用程序，它显示一个leaflet map 。 该应用程序的一项功能允许用户在 map 上添加新的地理标记。 但是，我想让此类标记的弹出窗口在添加到 map 后立即打开，但始终保持使用“x”按钮或单击 map 将其关闭的可能性。

我已经阅读了leaflet 文档的“标记”指南（“从层继承的弹出方法”小节，显然，非常详细的指南在 R 语言中不可用）并且我找到了这个选项openPopup() . 不幸的是，这似乎不适用于我的代码。 这是一个简单的例子：

library(leaflet)

leaflet() %>% 
  addTiles() %>% 
  addMarkers(lng = -100,
             lat = 50,
             popup = "ALE",
             options = popupOptions(openPopup = TRUE))

预期的行为是使用 leaflet 的在线工具中显示的行为。 请尝试搜索地址并查看新标记是否立即打开了自己的弹出窗口。

在此先感谢您的帮助！

Answer 1

代码

我想需要一点 JavaScript 因为接口似乎不支持此功能。

下面是一个有效的 shiny 示例：

library(shiny)
library(leaflet)
library(shinyjs)

js_save_map_instance <- HTML(
   paste(
      "var mapsPlaceholder = [];",
      "L.Map.addInitHook(function () {",
      "   mapsPlaceholder.push(this); // Use whatever global scope variable you like.",
      "});", sep = "\n"
   )
)

js_open_popup <- HTML(
   paste("function open_popup(id) {",
         "   console.log('open popup for ' + id);",
         "   mapsPlaceholder[0].eachLayer(function(l) {",
         "      if (l.options && l.options.layerId == id) {",
         "         l.openPopup();",
         "      }",
         "   });",
         "}", sep = "\n"
   )
)

ui <- fluidPage(
   tags$head(
      tags$script(type = "text/javascript",
                  js_save_map_instance,
                  js_open_popup),
      useShinyjs()
   ),
   wellPanel(
      fluidRow(
         sliderInput("lng", "Longitude:", 10, 60, 35, 0.01),
         sliderInput("lat", "Latitude:", 35, 75, 42.5, 0.01),
         actionButton("add", "Add Marker")
      )
   ),
   fluidRow(
      leafletOutput("map")
   )
)

server <- function(input, output, session) {
   map <- leaflet() %>% 
      addTiles() %>%
      fitBounds(10, 35, 60, 75)
   
   output$map <- renderLeaflet(
      map
   )
   
   observeEvent(input$add, {
      id <- paste0("marker", input$add)
      leafletProxy("map") %>%
         addMarkers(input$lng, input$lat, id,
                    "mymarkers", 
                    popup = sprintf("%.2f / %.2f: %s", input$lng, input$lat, 
                                    id))
      runjs(sprintf("setTimeout(() => open_popup('%s'), 10)", id))
   })
}

shinyApp(ui, server)

评论

• leaflet.js不提供开箱即用的功能来在初始化后检索 map 实例。 因此，我们必须使用解决方法在初始化时显式保存 map。 这是在js_save_map_instance中存储的 JS 代码中完成的。 这个想法来自Find Leaflet map object after initialisation 。
• 我们创建一个 JS function，它采用我们要为其打开弹出窗口的标记的 id。 In this function we take the first element of our array, where we stored all map instances (if there should be more than one leaflet map on the page, this needs to be adapted.
• 在这个 map 实例上，我们可以遍历所有层，如果layerId等于我们正在寻找的那个，我们可以在这一层上调用openPopup 。 （注意，理想情况下我们可以直接访问该层（同样我在 API 中没有找到任何 function），我们可以使用私有_layer属性，但由于它是私有的，我使用循环方法。）
• 剩下的就是在shiny端的正确位置调用open_popup 。 我需要添加一个小的延迟以避免在添加标记之前调用 function。

结果