EasyButton examples

Use addEasyButton() to add simple buttons 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');
          }")
      )
    )
  ))