0Pricing
R Academy · Lektion

Interaktive Karten mit leaflet

Erzeugen Sie interaktive Webkarten mit Markierungen, Pop-ups und Kachelebenen

Interaktive Karten mit leaflet ist eine kostenlose R Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des R Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der R Academy-Kurs umfasst insgesamt 4 Lektionen.

Einführung in leaflet

Das Paket leaflet kapselt die Bibliothek Leaflet.js, um direkt aus R interaktive, zoombare Webkarten zu erstellen. Karten sind HTML-Widgets, die im Viewer von RStudio, in R Markdown und in Shiny-Apps dargestellt werden, ohne dass JavaScript-Kenntnisse erforderlich sind.

library(leaflet)

# Minimal leaflet map: tiles + one marker
leaflet() |>
  addTiles() |>         # OpenStreetMap base layer
  setView(
    lng  = -74.006,
    lat  =  40.713,
    zoom = 12
  ) |>
  addMarkers(
    lng   = -74.006,
    lat   =  40.713,
    popup = '<b>New York City</b>'
  )

addTiles: Basiskarten-Layer

addTiles() fügt den standardmäßigen OpenStreetMap-Kachel-Layer hinzu. Mit addProviderTiles(providers$) wechseln Sie zu Satellitenbildern, CartoDB, Esri, Stamen oder einem anderen Kachel-Provider. Die Layernamen finden Sie in der integrierten Liste providers.

library(leaflet)

# Default OpenStreetMap
map1 <- leaflet() |> addTiles()

# CartoDB light theme (great for data overlay)
map2 <- leaflet() |>
  addProviderTiles(providers$CartoDB.Positron)

# Satellite imagery
map3 <- leaflet() |>
  addProviderTiles(providers$Esri.WorldImagery)

# Custom tile URL
custom <- leaflet() |>
  addTiles(
    urlTemplate = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    attribution  = '(c) OpenStreetMap contributors'
  )

map2

addMarkers mit Popups

addMarkers(lng, lat, popup) fügt der Karte Markierungen in Form von Pins hinzu. Das Argument popup akzeptiert HTML-Zeichenfolgen, sodass Sie fetten Text, Links oder Bilder einfügen können. Das Argument label zeigt Text beim Überfahren mit dem Mauszeiger an, ohne dass ein Klick erforderlich ist.

library(leaflet)

cities <- data.frame(
  name = c('New York', 'Los Angeles', 'Chicago'),
  lon  = c(-74.006, -118.244, -87.629),
  lat  = c( 40.713,   34.052,  41.878),
  pop  = c(8336817,  3979576, 2693976)
)

leaflet(cities) |>
  addTiles() |>
  addMarkers(
    lng   = ~lon,
    lat   = ~lat,
    popup = ~paste0(
      '<b>', name, '</b><br>',
      'Population: ', format(pop, big.mark = ',')
    ),
    label = ~name
  )

addCircleMarkers

addCircleMarkers() rendert Kreise, deren Größe in Bildschirmpixeln festgelegt ist (anders als bei addCircles(), dessen Größe mit der Zoomstufe skaliert wird). Sie eignen sich ideal zur Darstellung proportionaler Symbole – ordnen Sie radius einer Datenvariablen zu.

library(leaflet)

cities <- data.frame(
  name = c('New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'),
  lon  = c(-74.006, -118.244, -87.629, -95.369, -112.074),
  lat  = c( 40.713,   34.052,  41.878,  29.760,   33.449),
  pop  = c(8336817,  3979576, 2693976, 2304580, 1608139)
)

leaflet(cities) |>
  addProviderTiles(providers$CartoDB.Positron) |>
  addCircleMarkers(
    lng    = ~lon,
    lat    = ~lat,
    radius = ~sqrt(pop / 50000),
    color  = 'steelblue',
    fill   = TRUE,
    fillOpacity = 0.6,
    popup  = ~paste0(name, ': ', format(pop, big.mark = ','))
  )

addPolygons: Choroplethenkarten

addPolygons() rendert Polygongeometrien direkt aus einem sf-Objekt. Die Füllfarbe kann mithilfe der Palettenfunktionen colorNumeric() oder colorBin() einer Datenspalte zugeordnet werden. Die Option highlight fügt Effekte beim Überfahren mit dem Mauszeiger hinzu.

library(leaflet)
library(sf)

nc <- st_transform(
  read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)

# Colour palette based on birth count
pal <- colorNumeric('YlOrRd', domain = nc$BIR74)

leaflet(nc) |>
  addProviderTiles(providers$CartoDB.Positron) |>
  addPolygons(
    fillColor   = ~pal(BIR74),
    fillOpacity = 0.7,
    color       = 'white',
    weight      = 1,
    popup       = ~paste0('<b>', NAME, '</b><br>Births 1974: ', BIR74),
    highlight   = highlightOptions(
      weight    = 3,
      color     = '#333',
      bringToFront = TRUE
    )
  ) |>
  addLegend('bottomright', pal = pal, values = ~BIR74, title = 'Births 1974')

setView und fitBounds

setView(lng, lat, zoom) zentriert die Karte auf einen festen Ort und eine feste Zoomstufe. fitBounds(lng1, lat1, lng2, lat2) zoomt automatisch so, dass eine geografische Boundingbox vollständig angezeigt wird. Das ist nützlich, wenn die Ausdehnung der Daten im Voraus nicht bekannt ist.

library(leaflet)
library(sf)

nc <- st_transform(
  read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)
bbox <- st_bbox(nc)

# fitBounds: auto-zoom to data extent
leaflet() |>
  addTiles() |>
  fitBounds(
    lng1 = bbox['xmin'], lat1 = bbox['ymin'],
    lng2 = bbox['xmax'], lat2 = bbox['ymax']
  ) |>
  addPolygons(
    data        = nc,
    fillColor   = 'lightblue',
    fillOpacity = 0.4,
    color       = 'steelblue',
    weight      = 1
  )

addLayersControl: Layer umschalten

addLayersControl() fügt ein Optionsfeld-/Kontrollkästchen-Steuerelement hinzu, mit dem Sie Basiskarten und Overlay-Layer ein- und ausschalten können. Verwenden Sie baseGroups für sich gegenseitig ausschließende Kachel-Layer und overlayGroups für unabhängig umschaltbare Daten-Layer.

library(leaflet)
library(sf)

nc <- st_transform(
  read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)

high_birth  <- nc[nc$BIR74 > 3000, ]
low_birth   <- nc[nc$BIR74 <= 3000, ]

leaflet() |>
  addProviderTiles(providers$CartoDB.Positron, group = 'Light') |>
  addProviderTiles(providers$Esri.WorldImagery, group = 'Satellite') |>
  addPolygons(data = high_birth, color = 'red',   group = 'High Births (>3000)') |>
  addPolygons(data = low_birth,  color = 'blue',  group = 'Low Births (<=3000)') |>
  addLayersControl(
    baseGroups    = c('Light', 'Satellite'),
    overlayGroups = c('High Births (>3000)', 'Low Births (<=3000)'),
    options       = layersControlOptions(collapsed = FALSE)
  )

addPopups und addLegend

addPopups() fügt dauerhaft sichtbare Popup-Felder hinzu. addLegend() erstellt eine mit einer Farbpalette verknüpfte Kartenlegende. Beide unterstützen HTML-Inhalte und lassen sich mithilfe von CSS-Klassen vollständig anpassen.

library(leaflet)

leaflet() |>
  addTiles() |>
  setView(-79.0, 35.5, zoom = 7) |>
  addPopups(
    lng     = -78.639,
    lat     =  35.779,
    popup   = '<b>Raleigh</b><br>State Capital of NC'
  ) |>
  addLegend(
    position = 'bottomleft',
    colors   = c('red', 'blue', 'green'),
    labels   = c('High', 'Medium', 'Low'),
    title    = 'Risk Level',
    opacity  = 0.8
  )

Farbpaletten: colorNumeric und colorBin

Die Funktionen colorNumeric(), colorBin(), colorQuantile() und colorFactor() erstellen Palettenfunktionen, die Datenwerte auf Hex-Farben abbilden. Übergeben Sie das Ergebnis an fillColor und dieselbe Palette an addLegend().

library(leaflet)
library(sf)

nc <- st_transform(
  read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)

# Continuous palette
pal_num <- colorNumeric('Blues', domain = nc$BIR74)

# Binned palette (5 equal bins)
pal_bin <- colorBin('RdYlGn', domain = nc$BIR74, bins = 5)

# Quantile palette (equal number of features per class)
pal_qtl <- colorQuantile('YlOrRd', domain = nc$BIR74, n = 4)

# Use binned palette
leaflet(nc) |>
  addTiles() |>
  addPolygons(
    fillColor   = ~pal_bin(BIR74),
    fillOpacity = 0.7, weight = 1, color = 'white'
  ) |>
  addLegend('bottomright', pal = pal_bin, values = ~BIR74,
            title = 'Births 1974 (5 bins)')

leafletProxy: Karten in Shiny aktualisieren

leafletProxy('mapId') aktualisiert eine vorhandene leaflet-Karte in einer Shiny-App, ohne die gesamte Karte von Grund auf neu zu rendern. Verwenden Sie die Funktion zusammen mit clearMarkers(), clearShapes() oder addMarkers(), um effizient auf Benutzereingaben zu reagieren.

library(shiny)
library(leaflet)

# Minimal Shiny app with leafletProxy
ui <- fluidPage(
  selectInput('colour', 'Marker colour:', choices = c('red', 'blue', 'green')),
  leafletOutput('map')
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() |> addTiles() |>
      setView(-79.0, 35.5, zoom = 7)
  })

  observeEvent(input$colour, {
    leafletProxy('map') |>
      clearMarkers() |>
      addCircleMarkers(
        lng   = -78.639, lat = 35.779,
        color = input$colour,
        label = paste('Raleigh -', input$colour)
      )
  })
}

# shinyApp(ui, server)  # uncomment to run

Vollständige interaktive Choroplethenkarte

Hier sehen Sie eine produktionsreife Choroplethenkarte, die alle wichtigen Funktionen kombiniert: Provider-Kacheln, Polygonfüllung, Hervorhebungen beim Überfahren, dynamische Popups, eine Farblegende und Layer-Steuerelemente – und das alles in weniger als 25 Zeilen.

library(leaflet)
library(sf)

nc <- st_transform(
  read_sf(system.file('shape/nc.shp', package = 'sf')), 4326
)
pal <- colorQuantile('YlOrRd', domain = nc$SID74, n = 5)

leaflet(nc) |>
  addProviderTiles(providers$CartoDB.Positron) |>
  addPolygons(
    fillColor   = ~pal(SID74),
    fillOpacity = 0.75,
    color       = 'white',
    weight      = 0.5,
    popup       = ~paste0('<b>', NAME, '</b><br>SIDS 1974: ', SID74),
    highlight   = highlightOptions(
      weight = 2, color = '#555', bringToFront = TRUE
    )
  ) |>
  addLegend(
    position = 'bottomright',
    pal = pal, values = ~SID74,
    title = 'SIDS Deaths 1974<br>(Quintiles)'
  ) |>
  addControl('<b>NC SIDS Data 1974</b>', position = 'topright')

Kurze Wissensprüfung

In einer Shiny-App möchten Sie die Positionen von Markern auf einer vorhandenen leaflet-Karte aktualisieren, wenn die Benutzerin oder der Benutzer eine Dropdown-Auswahl ändert – ohne die gesamte Karte neu zu rendern. Welche Funktion sollten Sie verwenden?

Zusammenfassung: leaflet-Paket

Wichtigste Erkenntnisse:

  • leaflet() |> addTiles() erstellt eine interaktive Karte mit OpenStreetMap-Kacheln
  • addProviderTiles(providers$) wechselt zu anderen Kachelprovidern
  • addMarkers() / addCircleMarkers() für Punktdaten; verwenden Sie popup und label
  • addPolygons(fillColor = ~pal(col)) für Choroplethenkarten
  • colorNumeric(), colorBin(), colorQuantile() erstellen Palettenfunktionen
  • addLegend() wird mit Palettenfunktionen kombiniert; addLayersControl() schaltet Layer um
  • leafletProxy() für effiziente Kartenaktualisierungen in Shiny
  • fitBounds() zoomt automatisch auf die Datenausdehnung
library(leaflet)

# Three-line interactive map
leaflet() |>
  addProviderTiles(providers$CartoDB.Positron) |>
  addCircleMarkers(lng = c(-74, -118, -88), lat = c(41, 34, 42),
                   label = c('NYC', 'LA', 'Chicago'), color = 'steelblue')

Häufig gestellte Fragen

Ist die Lektion „Interaktive Karten mit leaflet“ kostenlos?

Ja — der vollständige Text von „Interaktive Karten mit leaflet“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des R Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der R Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Interaktive Karten mit leaflet“?

Erzeugen Sie interaktive Webkarten mit Markierungen, Pop-ups und Kachelebenen Du übst R Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um R Academy zu starten?

Keine Vorkenntnisse erforderlich. R Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Interaktive Karten mit leaflet“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser R Academy-Lektion Code schreiben und ausführen?

Ja. Jede R Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Simple Features mit dem Paket sf
  2. Koordinatenreferenzsysteme und Projektionen
  3. Räumliche Joins und Operationen
  4. Interaktive Karten mit leaflet
← Zurück zu R Academy