Additional features

Add-ons
Advanced Features
- Custom JavaScript with htmlwidgets::onRender()

Add-ons

These are various utility functions that you can use to augment your map with additional elements. Each of the utility function give below supports options of customization, be sure to check the help files for details.

Leaflet Measure

You can use addMeasure() to add the leaflet-measure plugin to a map.

library(leaflet)

m <- leaflet() %>% addTiles()

m %>%
  # Central Park
  fitBounds(-73.9, 40.75, -73.95,40.8) %>%
  addMeasure()

Use various options to customize the appearance and behavior of the plugin (see ?addMeasure for details).

m %>%
  # Berlin, Germany
  fitBounds(13.76134, 52.675499, 13.0884, 52.33812) %>%
  addMeasure(
    position = "bottomleft",
    primaryLengthUnit = "meters",
    primaryAreaUnit = "sqmeters",
    activeColor = "#3D535D",
    completedColor = "#7D4479")

Graticule

Use addGraticule() to add a graticule (grid) to the map (via the Leaflet.Graticule plugin).

library(leaflet)

m <- leaflet() %>% addTiles() %>% setView(0,0,2)

m %>% addGraticule()

m %>% addGraticule(interval = 40, style = list(color = "#FF0000", weight = 1))

You can use the group argument to make the graticule toggleable.

m %>%
  addGraticule(group = "Graticule") %>%
  addLayersControl(overlayGroups = c("Graticule"),
    options = layersControlOptions(collapsed = FALSE))

Terminator (day/night indicator)

library(leaflet)

# Default Resolution
leaflet() %>% addTiles() %>% addTerminator()


# Custom Resolution + Custom Date and on a toggleable Layer
leaflet() %>%
  addTiles() %>%
  addTerminator(
    resolution=10,
    time = "2013-06-20T21:00:00Z",
    group = "daylight") %>%
  addLayersControl(
    overlayGroups = "daylight",
    options = layersControlOptions(collapsed = FALSE))

Minimap

You can use addMiniMap() to add a minimap to aid in navigation. This is implemented via the Leaflet-MiniMap plugin.

Note that the minimap only shows map tiles; markers, polygons, and other layers on the main map will not be displayed in the minimap.

library(leaflet)
l <- leaflet() %>% setView(0,0,3)

l %>%
  addProviderTiles(providers$Esri.WorldStreetMap) %>%
  addMiniMap()

You can use a specific basemap for the minimap via the tiles parameter. This example also allows the minimap to be hidden by setting toggleDisplay = TRUE.

l %>%
  addProviderTiles(providers$Esri.WorldStreetMap) %>%
  addMiniMap(
    tiles = providers$Esri.WorldStreetMap,
    toggleDisplay = TRUE)

EasyButton

Use addEasyButton() to add simple buttons (via Leaflet.EasyButton) that trigger custom JavaScript logic.

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

This map adds two buttons: one sets the map zoom level to 1, and the other attempts to locate you.

leaflet() %>% addTiles() %>%
  addEasyButton(easyButton(
    icon="fa-globe", title="Zoom to Level 1",
    onClick=JS("function(btn, map){ map.setZoom(1); }"))) %>%
  addEasyButton(easyButton(
    icon="fa-crosshairs", title="Locate Me",
    onClick=JS("function(btn, map){ map.locate({setView: true}); }")))

The next example demonstrates an easyButton with two distinct states: frozen-markers and unfrozen-markers, each of which has a distinct icon, title, and click handler.

leaflet() %>% addTiles() %>%
  addMarkers(data=quakes,
    clusterOptions = markerClusterOptions(),
    clusterId = "quakesCluster") %>%
  addEasyButton(easyButton(
    states = list(
      easyButtonState(
        stateName="unfrozen-markers",
        icon="ion-toggle",
        title="Freeze Clusters",
        onClick = JS("
          function(btn, map) {
            var clusterManager =
              map.layerManager.getLayer('cluster', 'quakesCluster');
            clusterManager.freezeAtZoom();
            btn.state('frozen-markers');
          }")
      ),
      easyButtonState(
        stateName="frozen-markers",
        icon="ion-toggle-filled",
        title="UnFreeze Clusters",
        onClick = JS("
          function(btn, map) {
            var clusterManager =
              map.layerManager.getLayer('cluster', 'quakesCluster');
            clusterManager.unfreeze();
            btn.state('unfrozen-markers');
          }")
      )
    )
  ))

Advanced Features

Custom JavaScript with `htmlwidgets::onRender()`

htmlwidgets::onRender() can be used to add custom behavior to the leaflet map using native Javascript. This is a some what advanced use case and requires you to know Javascript. Using onRender you can customize your map’s behavior using any of the APIs as defined in the Leaflet.js documentation.

Below is an example where we sync the base layer of the mini-map with the baselayer of the main map, using the ‘baselayerchange’ event.

l <- leaflet() %>% setView(0,0,3)

esri <- grep("^Esri", providers, value = TRUE)

for (provider in esri) {
  l <- l %>% addProviderTiles(provider, group = provider)
}

l %>%
  addLayersControl(baseGroups = names(esri),
    options = layersControlOptions(collapsed = FALSE)) %>%
  addMiniMap(tiles = esri[[1]], toggleDisplay = TRUE,
    position = "bottomleft") %>%
  htmlwidgets::onRender("
    function(el, x) {
      var myMap = this;
      myMap.on('baselayerchange',
        function (e) {
          myMap.minimap.changeLayer(L.tileLayer.provider(e.name));
        })
    }")