reactLeaflet

reactLeaflet is a thin R wrapper around the React Leaflet v4 component library.

Installation

# install.packages("remotes")remotes::install_github("lgnbhl/reactLeaflet")

Usage

library(shiny)
library(reactLeaflet)
ui<- MapContainer(
center= c(51.505, -0.09), zoom=13,
style=list(height="100vh"), # MapContainer needs a height!
TileLayer(
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution="&copy; OpenStreetMap contributors"
),
Marker(
position= c(51.505, -0.09),
Popup("A pretty popup."),
Tooltip("Hover me")
)
)
server<-function(input, output, session) {}
shinyApp(ui, server)

Events

React Leaflet components accept an eventHandlers prop. Bridge it to Shiny with triggerEvent() (a click counter, like actionButton()) or JS() for full control over the payload:

Marker(
position= c(51.5, -0.09),
eventHandlers=list(click= triggerEvent("markerClick"))
)
MapContainer(
eventHandlers=list(click= JS(
"(e) => Shiny.setInputValue('mapClick', e.latlng, {priority: 'event'})"
)),
...
)

Components

All React Leaflet v4 components are wrapped:

MapContainer, TileLayer, WMSTileLayer, Marker, Popup, Tooltip, Circle, CircleMarker, Polyline, Polygon, Rectangle, SVGOverlay, ImageOverlay, VideoOverlay, GeoJSON, LayerGroup, FeatureGroup, Pane, LayersControl (with LayersControl.BaseLayer() and LayersControl.Overlay()), ZoomControl, AttributionControl, ScaleControl.

Examples

reactLeafletExample() # list examples
reactLeafletExample("basic") # basic map + marker + popup
reactLeafletExample("shapes") # Polyline, Polygon & Rectangle vector shapes
reactLeafletExample("overlays") # ImageOverlay, VideoOverlay & SVGOverlay
reactLeafletExample("groups") # LayerGroup, FeatureGroup & custom Pane
reactLeafletExample("controls") # ZoomControl, ScaleControl & AttributionControl
reactLeafletExample("wms") # WMSTileLayer weather-radar overlay
reactLeafletExample("layers") # LayersControl with base layers & overlays
reactLeafletExample("choropleth")# GeoJSON choropleth of Swiss cantons by area
reactLeafletExample("events") # capturing clicks on the Shiny server
reactLeafletExample("dynamic") # server-rendered map: reactOutput/renderReact/setInput
reactLeafletExample("reactrouter-mui") # muiMaterial + reactRouter, no Shiny server

The reactrouter-mui example shows how to combine reactLeaflet with muiMaterial and reactRouter without any Shiny server logic: a JS loader fetches data and the URL hash drives the map. The same ui object renders as static HTML (htmltools::save_html(ui, "index.html")), so it also works in a Quarto document.