Interaktiva kartor med leaflet
Rendera interaktiva webbkartor med markörer, popup-fönster och tile-lager.
Interaktiva kartor med leaflet är en gratis lektion i R Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för R Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i R Academy innehåller totalt 4 lektioner.
Introduktion till leaflet
Paketet leaflet kapslar in biblioteket Leaflet.js för att skapa interaktiva, zoomningsbara webbkartor direkt från R. Kartorna är HTML-widgetar som visas i RStudios Viewer, R Markdown och Shiny-appar utan att Ni behöver kunna JavaScript.
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: Bakgrundskartlager
addTiles() lägger till standardlagret med karttiles från OpenStreetMap. Använd addProviderTiles(providers$ för att byta till satellitbilder, CartoDB, Esri, Stamen eller någon annan tile-leverantör. Lagernamnen finns i den inbyggda listan 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'
)
map2addMarkers med popup-fönster
addMarkers(lng, lat, popup) lägger till nålmarkörer på kartan. Argumentet popup accepterar HTML-strängar, så Ni kan inkludera fet text, länkar eller bilder. Argumentet label visar text när Ni håller pekaren över markören utan att klicka.
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() återger cirklar vars storlek är fixerad i skärmpixlar (till skillnad från addCircles(), vars storlek skalas med zoomnivån). De passar utmärkt för att representera proportionella symboler – mappa radius till en datavariabel.
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: Koropletkartor
addPolygons() återger polygongeometrier direkt från ett sf-objekt. Fyllningsfärgen kan mappas till en datakolumn med palettfunktionerna colorNumeric() eller colorBin(). Alternativet highlight lägger till effekter vid hovring.
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 och fitBounds
setView(lng, lat, zoom) centrerar kartan på en fast plats och zoomnivå. fitBounds(lng1, lat1, lng2, lat2) zoomar automatiskt så att en geografisk begränsningsruta passar, vilket är användbart när Ni inte känner till datans utbredning i förväg.
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: Växla lager
addLayersControl() lägger till en radio-/kryssrutestyrning för att slå på och av bakgrundskartor och överlagringslager. Använd baseGroups för ömsesidigt uteslutande kartlager och overlayGroups för datalager som kan växlas oberoende av varandra.
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 och addLegend
addPopups() lägger till beständiga popup-rutor som alltid visas. addLegend() skapar en kartförklaring som är kopplad till en färgpalett. Båda stöder HTML-innehåll och kan anpassas helt med CSS-klasser.
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
)Färgpaletter: colorNumeric och colorBin
Funktionerna colorNumeric(), colorBin(), colorQuantile() och colorFactor() skapar palettfunktioner som mappar datavärden till hexadecimala färger. Skicka resultatet till fillColor och använd samma palett i 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: Uppdatera kartor i Shiny
leafletProxy('mapId') uppdaterar en befintlig leaflet-karta i en Shiny-app utan att åter rendera hela kartan från början. Använd den tillsammans med clearMarkers(), clearShapes() eller addMarkers() för att effektivt reagera på användarens inmatning.
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 runFullständig interaktiv koropletkarta
Här är en produktionsklar koropletkarta som kombinerar alla centrala funktioner: leverantörskartor, polygonfyllning, markeringar vid hovring, dynamiska popup-rutor, en färgförklaring och lagerstyrning – allt på färre än 25 rader.
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')Snabbkontroll
I en Shiny-app vill Ni uppdatera markörernas positioner på en befintlig leaflet-karta när användaren ändrar ett rullgardinsval – utan att åter rendera hela kartan. Vilken funktion bör Ni använda?
Sammanfattning: Paketet leaflet
Viktiga lärdomar:
leaflet() |> addTiles()skapar en interaktiv karta med OpenStreetMap-kartoraddProviderTiles(providers$byter till andra kartleverantörer) addMarkers()/addCircleMarkers()för punktdata; användpopupochlabeladdPolygons(fillColor = ~pal(col))för koropletkartorcolorNumeric(),colorBin(),colorQuantile()skapar palettfunktioneraddLegend()kopplas ihop med palettfunktioner;addLayersControl()växlar lagerleafletProxy()för effektiva kartuppdateringar i ShinyfitBounds()zoomar automatiskt till datans utbredning
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')
Lär dig R med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 43
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Interaktiva kartor med leaflet” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen R Academy, inklusive ”Interaktiva kartor med leaflet”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i R Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Interaktiva kartor med leaflet”?
Rendera interaktiva webbkartor med markörer, popup-fönster och tile-lager. Ni övar på R Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig R Academy?
Du behöver inga förkunskaper. Utbildningen i R Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Interaktiva kartor med leaflet”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här R Academy-lektionen?
Ja. Varje R Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Simple Features med paketet sf
- Koordinatreferenssystem och projektioner
- Spatiala joins och operationer
- Interaktiva kartor med leaflet