使用 Shiny 在 Markdown 中的不同选项卡上同步两个传单地图

Question

运行遇到在不同选项卡上同步两个传单地图的问题。

查看之前的条目 () 后，@TimSalabim 提供的解决方案不起作用，因为地图位于不同的选项卡上。

这是一个 MWE RMarkdown 示例：

---
title: "QuestionforWhosebug"
output: 
flexdashboard::flex_dashboard:
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(leaflet)
```

Tab One
======================================================================
```{r tab1}
output$map1 <-
   renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )

leafletOutput("map1")

```
Tab Two
======================================================================
```{r tab2}

output$map2 <-
  renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )

leafletOutput("map2")
```

我想要双向更改。对 map1 的任何视图更改——更改 map2 或对 map2 的任何更改都将更改 map1。

理想情况下：如果您在地图 1 上滚动到圣路易斯，地图 2 将在圣路易斯上具有相同的缩放级别。

目前，两张地图之间没有互动。有没有办法让它们同步？

Answer 1

不知道这对 R 有何影响，但对于普通的 JavaScript，您可以使用 Leaflet.Sync 来同步两个地图。

如果您有两个选项卡，但当时只有一个选项卡可见，您也可以只在选项卡切换时同步，这样实现起来要简单得多。

Answer 2

您可以为此使用 leafletProxy()：在此处查看帮助：https://rstudio.github.io/leaflet/shiny.html

对于您的特定问题，这里有一个想法：

---
  title: "QuestionforWhosebug"
  output: 
    flexdashboard::flex_dashboard:
  runtime: shiny
---

```{r setup, include=FALSE}
  library(flexdashboard)
  library(shiny)
  library(leaflet)
```

Tab One
======================================================================

```{r tab1}
output$map1 <-
  renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )

actionButton("syncMap1", "Fit to map2 bounds")
leafletOutput("map1")

observeEvent(input$syncMap1,{
  map2coords <- input$map2_bounds
  map1Proxy <- leafletProxy("map1")
  map1Proxy %>% fitBounds(lng1 = map2coords$east,
                          lat1 = map2coords$north,
                          lng2 = map2coords$west,
                          lat2 = map2coords$south)
})
```

Tab Two
======================================================================

```{r tab2}

output$map2 <-
  renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )
actionButton("syncMap2", "Fit to map1 bounds")
leafletOutput("map2")

observeEvent(input$syncMap2,{
  map1coords <- input$map1_bounds
  map2Proxy <- leafletProxy("map2")
  map2Proxy %>% fitBounds(lng1 = map1coords$east,
                          lat1 = map1coords$north,
                          lng2 = map1coords$west,
                          lat2 = map1coords$south)
})
```

想法是在单击按钮时检索其他地图的坐标，然后同步视图。

小问题：视图没有很好地同步：找到显示地图的质心并使用 input$map1_zoom.

可以更好地使用 setView()

主要问题：这意味着使用按钮，不是那么用户友好。理论上，您可以使用 observe() 块将每个地图的坐标反映到另一个地图。尝试了一下，它有很多错误，可能是因为一些 "infinite" 循环，因为坐标中存在微小变化。

使用 Shiny 在 Markdown 中的不同选项卡上同步两个传单地图

Sync two leaftlet maps on different tabs in RMarkdown with Shiny

r

leaflet

r-markdown

shiny

flexdashboard