How can I make my two R leaflet maps synchronise with each other?

Question

I have had some nice success implementing Leaflet package in R for some data.

I have also managed to put two maps side by side as a lattice, and as a sync.

I have two issues:

1) Sync...does not sync the maps at all

I am using Mapview and Raster to attempt sync but the two maps side by side do not zoom in/out together.

See the code below:

library(leaflet)
library(ggmap)
library(mapview)
library(raster)
library(magrittr)
UK <- ggmap::geocode("United Kingdom")

#FILE1 <- read.csv("DATASET1.csv")
#FILE2 <- read.csv("DATASET2.csv")
FILE1 <- data.frame('lat' = c(51.31, 51.52, 51.53), 'lon' = c(0.06, 0.11, 0.09))
FILE2 <- data.frame('lat' = c(52.20, 52.25, 52.21), 'lon' = c(0.12, 0.12, 0.12))

map1 <- leaflet(FILE1)%>%
  addTiles()%>%
  addMarkers(clusterOptions = markerClusterOptions())

map2 <- leaflet(FILE2)%>%
  addTiles()%>%
  addMarkers(clusterOptions = markerClusterOptions())

sync(map1,map2)

I am sure I am missing something simple here but hopefully someone can help me in seeing that :)

2) Ideally I want one leaflet map to overlap the other one

I want to differentiate them by using different markets for each map. I have attempted to research this on the internet and through reading the manuals for leaflet but to no success

any guidance greatly appreciated!

Answer 1

You can also use the 'leafsync' library for this specifically. I have found this library has way less dependency problems that mapview personally, which has always been hard for me to install. Using the same sample code from JanLauGe:

library(leaflet)
library(ggmap)
library(leafsync)
library(raster)
library(magrittr)
UK <- ggmap::geocode("United Kingdom")

#FILE1 <- read.csv("DATASET1.csv")
#FILE2 <- read.csv("DATASET2.csv")
FILE1 <- data.frame('lat' = c(51.31, 51.52, 51.53), 'lon' = c(0.06, 0.11, 0.09))
FILE2 <- data.frame('lat' = c(52.20, 52.25, 52.21), 'lon' = c(0.12, 0.12, 0.12))

map1 <- leaflet(FILE1)%>%
  addTiles()%>%
  addMarkers(clusterOptions = markerClusterOptions())

map2 <- leaflet(FILE2)%>%
  addTiles()%>%
  addMarkers(clusterOptions = markerClusterOptions())

# Using leafsync instead of the other libraries
leafsync::latticeView(map1, map2, ncol = 2, sync = list(c(1, 2)), sync.cursor = TRUE, no.initial.sync = FALSE)

Answer 2

1) Syncing two maps

Installing the development version solved this for me

# Dependencies
# If your devtools is not the latest version
# then you might have to install "units" manually
install.packages('units') 
install.packages('devtools')
library(devtools)

devtools::install_github("environmentalinformatics-marburg/mapview", ref = "develop")

The code I used:

library(leaflet)
library(ggmap)
library(mapview)
library(raster)
library(magrittr)
UK <- ggmap::geocode("United Kingdom")

#FILE1 <- read.csv("DATASET1.csv")
#FILE2 <- read.csv("DATASET2.csv")
FILE1 <- data.frame('lat' = c(51.31, 51.52, 51.53), 'lon' = c(0.06, 0.11, 0.09))
FILE2 <- data.frame('lat' = c(52.20, 52.25, 52.21), 'lon' = c(0.12, 0.12, 0.12))

map1 <- leaflet(FILE1)%>%
  addTiles()%>%
  addMarkers(clusterOptions = markerClusterOptions())

map2 <- leaflet(FILE2)%>%
  addTiles()%>%
  addMarkers(clusterOptions = markerClusterOptions())

mapview::latticeView(map1, map2, ncol = 2, sync = list(c(1, 2)), sync.cursor = FALSE, no.initial.sync = FALSE)
# Or:
sync(map1, map2)

---

2) Overlaying two maps

You can use two separate data frames as data sources and add them to the same map separately. Change the symbol style to be able to differentiate between them.

map3 <- leaflet(FILE2)%>%
  addTiles() %>%
  addCircleMarkers(data = FILE1) %>%
  addCircleMarkers(data = FILE2,
                   color = '#0FF')
map3

If you want to do something similar for the cluster markers, there is some good documentation on that here and here. Based on some of the code from those posts I created a suggestion below where I use the pre-existing styles to differentiate between clusters of different types:

FILE1 <- data.frame('lat' = rnorm(n = 1000, mean = 51.4, sd = 0.5), 
                    'lon' = rnorm(n = 1000, mean = 0.8, sd = 0.5))
FILE2 <- data.frame('lat' = rnorm(n = 1000, mean = 53, sd = 0.5), 
                    'lon' = rnorm(n = 1000, mean = -0.5, sd = 0.5))

map3 <- leaflet(rbind(FILE1, FILE2)) %>%
  addTiles() %>%
  addCircleMarkers(data = FILE1,
    color = '#FA5',
    opacity = 1,
    clusterOptions = markerClusterOptions(iconCreateFunction = JS("function (cluster) {    
      var childCount = cluster.getChildCount(); 
      var c = ' marker-cluster-';  
      if (childCount < 3) {  
        c += 'large';  
      } else if (childCount < 5) {  
        c += 'large';  
      } else { 
        c += 'large';  
      }    
      return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', 
      className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
  
    }"))) %>%
  addCircleMarkers(data = FILE2,
    color = '#9D7',
    opacity = 1,
    clusterOptions = markerClusterOptions(iconCreateFunction = JS("function (cluster) {    
      var childCount = cluster.getChildCount(); 
      var c = ' marker-cluster-';  
      if (childCount < 3) {  
        c += 'small';  
      } else if (childCount < 5) {  
        c += 'small';  
      } else { 
        c += 'small';  
      }    
      return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', 
      className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
  
    }")))