Sync two leaftlet maps on different tabs in RMarkdown with Shiny - r

Question

Running into issues syncing two leaflet maps on different tabs.
After looking at previous entries (Synchronizing two leaflet maps in R / Rmarkdown), the solution provided by #TimSalabim does not work because the maps are on different tabs.
Here is a MWE RMarkdown example:
---
title: "QuestionforStackOverflow"
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")
```
I want a two way change. Any view changes to map1 -- changes map2 OR any changes to map2 will change map1.
Ideally: if you scroll into St. Louis on map1, map2 will have the same zoom level on St. Louis.
Right now, there is no interactivity between the two maps. Is there a way to make them sync?

Answer 1

You can use the leafletProxy() for this :
See the help here : https://rstudio.github.io/leaflet/shiny.html
For your particular problem, here's an idea :
---
title: "QuestionforStackOverflow"
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)
})
```
The idea is to retrieve the coordinates of the other map when clicking on the buttons, and to sync the view then.
Minor problem : the view is not that well synced : could be better to find the centroid of the displayed map and to use setView() using input$map1_zoom.
Major problem : this means using buttons, what is not that user-friendly.
Theoritically, you could use an observe() block to reflect the coordinates of each map to the other. Tried it and it's quite buggy, probably because of some "infinite" loop as there are micro-variations in the coordinates.

Answer 2

No idea how that would work with R, but with plain JavaScript you could use Leaflet.Sync to synchronize two maps.
If you have two tabs of which only one is visible at the time, you could also just sync on tab switch, which is much simpler to implement.