using leaflet-side-by-side plugin in R

Question

I tried to implement leaflet-side-by-side plugin using example codes from Using arbitrary Leaflet JS plugins with Leaflet for R. Appears simple, no success so far. I could not figured out what I'm doing wrong. Greatly, appreciate your reply. Thanks,

library(leaflet)
library(htmltools)
library(htmlwidgets)


LeafletSideBySidePlugin <- htmlDependency("leaflet-side-by-side","2.0.0",
                                          src = c(href="https://github.com/digidem/leaflet-side-by-side"),
                                          script="leaflet-side-by-side.js")

# A function that takes a plugin htmlDependency object and adds
# it to the map. This ensures that however or whenever the map
# gets rendered, the plugin will be loaded into the browser.

registerPlugin <- function(map, plugin) {
   map$dependencies <- c(map$dependencies, list(plugin))
   map
}

leaflet() %>% addTiles() %>%
   setView(lng = 12, lat = 50, zoom = 4) %>%
   # Register leaflet-side-by-side plugin on this map instance
   registerPlugin(LeafletSideBySidePlugin) %>%
   onRender("
            function(el, x) {
var mylayer1 = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            maxZoom: 18
            })
var mylayer2 = L.tileLayer(
          '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
            maxZoom: 14
            })
            L.control.sideBySide(mylayer1, mylayer2).addTo(this);
            ")

side-by-side is very nice. Not exactly the same, but `mapview` offers leaflet-sync http://environmentalinformatics-marburg.github.io/mapview/sync/sync.html. — timelyportfolio, Oct 20 '16 at 12:55
Great. May I know how can I call 'sync' or 'latticeView' generated plots in shiny. I tried plotOutput and leafletOutput, but do not see any display. — SatishR, Oct 25 '16 at 19:22
@timelyportfolio I found both 'sync' and 'latticeView' allows one to do very nice things, and tried in the following way for shiny but unsuccessful. Greatly appreciate your feedback: in server.r: output$plot1 <- renderLeaflet({ m1<-leaflet(EUGegrphclData) %>% addPolygons(...,fillColor = "red") m2<-leaflet(EUGegrphclData) %>% addPolygons(...,fillColor = "blue") sync(m1,m2) })' EUGegraphclData - is a spatial object in ui.r 'leafletOutput('plot1') — SatishR, Oct 26 '16 at 13:15

score 1 · Answer 1 · answered Aug 22 '17 at 14:12

just stumble upon this question.

I think you miss addTo() method for each tile map layer. here is should be.

leaflet() %>% addTiles() %>%
   setView(lng = 12, lat = 50, zoom = 4) %>%
   # Register leaflet-side-by-side plugin on this map instance
   registerPlugin(LeafletSideBySidePlugin) %>%
   onRender("
        function(el, x) {
          var mylayer1 = L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
             maxZoom: 18
             }).addTo(this);
          var mylayer2 = L.tileLayer(
             '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
             maxZoom: 14
             }).addTo(this);
        L.control.sideBySide(mylayer1, mylayer2).addTo(this);
        ")

score 1 · Answer 2 · answered Apr 22 '20 at 15:23

I would like to commend Abuw for his answer. If anyone is wondering why it still doesn't work, it's because there is an unmatched '{' in the onRender JavaScript.

Also make sure that your htmlDependency source actually exists. jsdelivr provides most js libraries available through npm and github in application/javascript format. Using that instead of the raw github path you, the full working code should be as follows:

library(leaflet)
library(htmltools)
library(htmlwidgets)


LeafletSideBySidePlugin <- htmlDependency("leaflet-side-by-side","2.0.0",
                                          src = c(href="https://cdn.jsdelivr.net/gh/digidem/leaflet-side-by-side@2.0.0/"),
                                          script="leaflet-side-by-side.js")

# A function that takes a plugin htmlDependency object and adds
# it to the map. This ensures that however or whenever the map
# gets rendered, the plugin will be loaded into the browser.

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>% addTiles() %>%
  setView(lng = 12, lat = 50, zoom = 4) %>%
  # Register leaflet-side-by-side plugin on this map instance
  registerPlugin(LeafletSideBySidePlugin) %>%
  onRender("
        function(el, x) {
          var mylayer1 = L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
             maxZoom: 18
             }).addTo(this);
          var mylayer2 = L.tileLayer(
          '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
             maxZoom: 14
             }).addTo(this);
        L.control.sideBySide(mylayer1, mylayer2).addTo(this);
        }")

I have a similar question, https://stackoverflow.com/questions/68407136/using-leaflet-lasso-js-plugins-with-leaflet-for-r , could you look at it please? — Masoud, Jul 16 '21 at 11:24

using leaflet-side-by-side plugin in R

2 Answers2

Linked