Mapas interactivos con leaflet
Renderice mapas web interactivos con marcadores, ventanas emergentes y capas de teselas.
Mapas interactivos con leaflet es una lección gratuita de R Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de R Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de R Academy incluye 4 lecciones en total.
Introducción a leaflet
El paquete leaflet integra la biblioteca Leaflet.js para crear mapas web interactivos y ampliables directamente desde R. Los mapas son widgets HTML que se visualizan en el visor de RStudio, R Markdown y las aplicaciones Shiny sin necesidad de conocimientos de 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: capas de mapa base
addTiles() añade la capa de teselas predeterminada de OpenStreetMap. Use addProviderTiles(providers$ para cambiar a imágenes por satélite, CartoDB, Esri, Stamen o cualquier otro proveedor de teselas. Los nombres de las capas se encuentran en la lista integrada 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 con ventanas emergentes
addMarkers(lng, lat, popup) añade marcadores de ubicación al mapa. El argumento popup acepta cadenas HTML, por lo que puede incluir texto en negrita, enlaces o imágenes. El argumento label muestra texto al pasar el cursor, sin necesidad de hacer clic.
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() representa círculos cuyo tamaño se fija en píxeles de pantalla (a diferencia de addCircles(), cuyo tamaño cambia con el nivel de zoom). Son ideales para representar símbolos proporcionales: asigne radius a una variable de datos.
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: mapas coropléticos
addPolygons() representa geometrías poligonales directamente desde un objeto sf. El color de relleno se puede asociar a una columna de datos mediante las funciones de paleta colorNumeric() o colorBin(). La opción highlight añade efectos al pasar el cursor.
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 y fitBounds
setView(lng, lat, zoom) centra el mapa en una ubicación fija y con un nivel de zoom determinado. fitBounds(lng1, lat1, lng2, lat2) ajusta automáticamente el zoom para que quepa un cuadro delimitador geográfico, lo que resulta útil cuando no conoce de antemano la extensión de los datos.
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: alternar capas
addLayersControl() añade un control de botones de opción y casillas de verificación para activar y desactivar mapas base y capas superpuestas. Utilice baseGroups para capas de teselas mutuamente excluyentes y overlayGroups para capas de datos que se puedan alternar de forma independiente.
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 y addLegend
addPopups() añade cuadros emergentes persistentes (siempre visibles). addLegend() crea una leyenda del mapa vinculada a una paleta de colores. Ambos admiten contenido HTML y se pueden personalizar por completo con clases CSS.
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
)Paletas de colores: colorNumeric y colorBin
Las funciones colorNumeric(), colorBin(), colorQuantile() y colorFactor() crean funciones de paleta que asignan valores de datos a colores hexadecimales. Pase el resultado a fillColor y utilice la misma paleta en 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: actualizar mapas en Shiny
leafletProxy('mapId') actualiza un mapa leaflet existente en una aplicación Shiny sin volver a representar todo el mapa desde cero. Utilícelo con clearMarkers(), clearShapes() o addMarkers() para responder de forma eficiente a las entradas del usuario.
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 runMapa coroplético interactivo completo
A continuación se muestra un mapa coroplético de calidad de producción que combina todas las funciones principales: teselas de un proveedor, relleno de polígonos, resaltados al pasar el cursor, ventanas emergentes dinámicas, una leyenda de colores y controles de capas, todo en menos de 25 líneas.
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')Comprobación rápida
En una aplicación Shiny, desea actualizar las posiciones de los marcadores en un mapa leaflet existente cuando el usuario cambia un menú desplegable, sin volver a representar el mapa completo. ¿Qué función debe utilizar?
Repaso: paquete leaflet
Conceptos clave:
leaflet() |> addTiles()crea un mapa interactivo con teselas de OpenStreetMapaddProviderTiles(providers$cambia a otros proveedores de teselas) addMarkers()/addCircleMarkers()para datos de puntos; utilicepopupylabeladdPolygons(fillColor = ~pal(col))para mapas coropléticoscolorNumeric(),colorBin(),colorQuantile()crean funciones de paletaaddLegend()se combina con funciones de paleta;addLayersControl()alterna las capasleafletProxy()para actualizaciones eficientes de mapas en ShinyfitBounds()ajusta automáticamente el zoom a la extensión de los datos
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')Aprende R con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 43
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Mapas interactivos con leaflet» es gratis?
Sí — el texto completo de «Mapas interactivos con leaflet» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de R Academy, actualiza a CoddyKit PRO. El curso de R Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Mapas interactivos con leaflet»?
Renderice mapas web interactivos con marcadores, ventanas emergentes y capas de teselas. Practicas R Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar R Academy?
No se requiere experiencia previa. R Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Mapas interactivos con leaflet»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de R Academy?
Sí. Cada lección de R Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Simple Features con el paquete sf
- Sistemas de referencia de coordenadas y proyecciones
- Uniones y operaciones espaciales
- Mapas interactivos con leaflet