10  Leaflet Template Combining R and Javascript

R creates the content and data
JS controls behavior and interaction
CSS controls appearance and layout

10.1 Single Map

map2 <- leaflet() %>%
  setView(lng = 4.4777, lat = 51.9244, zoom = 13) %>%
  addTiles() %>%  # Base OSM layer
  addTiles(
    urlTemplate = "https://allmaps.xyz/maps/8ebee9ef638a08cf/{z}/{x}/{y}.png",
    attribution = "Allmaps",
    options = tileOptions(opacity = 0.7)  # Optional: make it semi-transparent
  ) |> 
  addFullscreenControl()
map2

10.2 Side-By-Side Map, synchronized only in scale

10.3 Side-By-Side Map, scale and pan synchronized

10.4 Map with a slider bar in the middle

map1 <- leaflet() %>%
  setView(lng = 4.4777, lat = 51.9244, zoom = 13) %>%
  addTiles() %>%  # Base OSM layer
  addTiles(
    urlTemplate = "https://allmaps.xyz/maps/8ebee9ef638a08cf/{z}/{x}/{y}.png",
    attribution = "Allmaps",
    options = tileOptions(opacity = 0.7)  # Optional: make it semi-transparent
  ) |> 
  addFullscreenControl()
map1