Cómo agregar el plugin popupmovable a un mapa de Leaflet.

Cómo agregar el plugin PopupMovable a un mapa de Leaflet en R Shiny

Resumen

En esta guía, abordamos el problema de superposición de popups en un mapa de Leaflet creado con R Shiny. Cuando los puntos de datos están muy cerca entre sí, los popups pueden solaparse, dificultando la visualización de la información. Para solucionarlo, se desea implementar el plugin PopupMovable, que permite desplazar los popups y mantener las líneas de conexión con los marcadores.

Problema

El usuario necesita poder abrir múltiples popups simultáneamente, moverlos y guardarlos para su posterior exportación en un informe. Sin embargo, el autor del código encontró dificultades para integrar el plugin PopupMovable.

Solución

Dependencia del Plugin: Asegúrate de que la dependencia del plugin esté correctamente incluida en tu aplicación Shiny.

addPopupMove = htmltools::htmlDependency(
 "leaflet.PopupMovable", 
 "1.0.0",
 src = c(href="https://raw.githubusercontent.com/wrwrh/leaflet-popupmovable/refs/heads/main/leaflet.PopupMovable.js"),
 script="leaflet.PopupMovable.js"
)

Función para Registrar el Plugin: Define una función para registrar el plugin en el mapa.

registerPlugin <- function(map, plugin) {
 map$dependencies <- c(map$dependencies, list(plugin))
 map
}

Integración en el UI: Asegúrate de incluir el script del plugin en la sección de head del UI.

tags$head(
 includeScript("https://raw.githubusercontent.com/wrwrh/leaflet-popupmovable/refs/heads/main/leaflet.PopupMovable.js"),
 useShinyjs()
)

Configuración del Mapa:

Usa registerPlugin(addPopupMove) para añadir el plugin al mapa.
Configura el uso de L.Map.PopupMovable.

Aquí hay un ejemplo de cómo estructurar la función del mapa en el servidor de la aplicación:

map = function() {
 leaflet(options = leafletOptions(worldCopyJump = FALSE, preferCanvas = TRUE)) %>%
   setView(lng = 0, lat = 0, zoom = 2) %>%
   addEsriBasemapLayer(esriBasemapLayers$Oceans, autoLabels = TRUE, 
                       options = providerTileOptions(noWrap = FALSE, updateWhenIdle = TRUE), 
                       group = 'Oceans') %>%
   addMarkers(lat = data$lat, lng = data$lon,
              popup = paste(data$station, "<br>", 
                            "Lat: ", data$lat, "<br>", 
                            "Lon: ", data$lon, "<br>", 
                            "Est.: ", data$year),
              popupOptions = popupOptions(autoClose = FALSE, closeOnClick = FALSE)) %>%
   registerPlugin(addPopupMove) %>%
   onRender("function(el, x) {
     var popmove = L.Map.PopupMovable({ popupMovable: true });
     popmove.addTo(this);
   }")
}

Ejecución de la Aplicación Shiny: Finalmente, asegúrate de que tu aplicación Shiny se ejecute correctamente y que el mapa y los popups sean funcionales.

Esta configuración permitirá que los popups sean draggable, facilitando la visualización de datos para los usuarios.

Cómo agregar el plugin popupmovable a un mapa de Leaflet.