multiple copies of the world when zooming out in worldmap created with leaflet in R

Question

I am using the leaflet library in R and I am creating a world map with the following code:

 leaflet(data = sPDF) %>%

  addProviderTiles("Stamen.Watercolor") %>%
  addPolygons(fillColor = ~pal(sPDF$Colonizer_col), 
              fillOpacity = 0.8, 
              color = "#BDBDC3", 
              weight = 1, 
              popup = state_popup) %>%
  addLegend("bottomright", pal = pal, values = ~na.omit(Colonizer),
            title = "Colony Information",
            labFormat = labelFormat(prefix = ""),
            opacity = 1 ) %>%

  addCircles(data=left, lng = ~LONG, lat = ~LAT, weight = 1,
             radius = ~sqrt(Totals)*300, popup = ~area_popup_left) %>%


  addCircles(data=arrived, lng = ~LONG, lat = ~LAT, weight = 1,
             radius = ~sqrt(Totals)*300, popup = ~area_popup_arrive, fillColor = "Green" )%>%


  setView(lng = -1.5, lat = 53.4, zoom = 2.5)#%>%# set centre and extent of map 

When the map shows up in R it is all fine but when I export it to an .html file it allows the user to zoom out so much that there is three copies of the world map. I would like to set it so that the maximum zoom out allows only one copy of the map as a webpage (the same way as it is presented in R). I have tried tileOptions(maxZoom=5) but this only affects the zoom while the map is viewed in R, not when it is exported to html.

Answer 1

Leaflet's L.Map class has an option to stop the copying of the map's overlays:

With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.

http://leafletjs.com/reference.html#map-worldcopyjump

The proper way of making sure a user doesn't pan out a certain area is using L.Map's maxBounds option:

When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view.

http://leafletjs.com/reference.html#map-maxbounds

In code:

leafletMap(
    "map", "100%", "100%",
    initialTileLayer = "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
    initialTileLayerAttribution = HTML('&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'),
    options=list(
        center = c(0, 0),
        zoom = 0,
        worldCopyJump = FALSE,
        maxBounds = list(
            list(-90, -180),
            list(90, 180)
        )
    )
)

You could indeed top that off with setting the noWrap option on your L.TileLayer but all that in fact does is stop the tiles from repeating which is imo not the solution to your actual problem:

If set to true, the tiles just won't load outside the world width (-180 to 180 longitude) instead of repeating.

http://leafletjs.com/reference.html#tilelayer-nowrap