0
262
ViewsAgregar un evento de 'clic' a los polígonos del folleto a través de R
¿Cómo puedo agregar un evento de 'clic' del mouse a cada polígono trazado en un mapa de folleto? Quiero hacer esto para poder filtrar un widget separado según los datos de las funciones (en este caso, WD21CD).
--- output: html_document --- ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = FALSE) library(tidyverse) library(htmltools) library(leaflet) ``` ```{r cars, echo=FALSE} url <- 'https://opendata.arcgis.com/api/v3/datasets/bf9d32b1aa9941af84e6c2bf0c54b1bb_0/downloads/data?format=geojson&spatialRefId=4326' wardShapes <- sf::st_read(url) %>% filter(WD21CD >= "E05011175" & WD21CD <= "E05011181") leaflet(wardShapes,elementId = "bhamMap", height = 550,# width = 10, options = leafletOptions(minZoom = 10, maxZoom = 14)) %>% addTiles() %>% setView(lng = -1.810, lat = 52.555, zoom = 12) %>% addPolygons( weight = 0.5, smoothFactor = 0.5, opacity = 1.0, fillOpacity = 0.2, highlightOptions = highlightOptions(color = "white", weight = 2, bringToFront = TRUE), label = ~as.character(WD21NM), labelOptions = (interactive = TRUE) ) ``` ```{js, class.source = "jsvis1", echo=FALSE} document.getElementById("bhamMap").addEventListener("click", function(e){ console.log("hello"); });
·
Santiago Trujillo
1 answers
Answer question0
Podemos usar htmlwidgets::onRender para pasar código JS personalizado al folleto htmlwidget.
Con la ayuda del método eachLayer podemos agregar una función de clic a cada capa de polígono:
--- title: "leaflet polygons clicks" output: html_document --- ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = FALSE) library(tidyverse) library(htmltools) library(leaflet) library(sf) library(htmlwidgets) ``` ```{r cars, echo=FALSE} url <- 'https://opendata.arcgis.com/api/v3/datasets/bf9d32b1aa9941af84e6c2bf0c54b1bb_0/downloads/data?format=geojson&spatialRefId=4326' wardShapes <- sf::st_read(url) %>% filter(WD21CD >= "E05011175" & WD21CD <= "E05011181") leaflet(wardShapes,elementId = "bhamMap", height = 550,# width = 10, options = leafletOptions(minZoom = 10, maxZoom = 14)) %>% addTiles() %>% setView(lng = -1.810, lat = 52.555, zoom = 12) %>% addPolygons( weight = 0.5, smoothFactor = 0.5, opacity = 1.0, fillOpacity = 0.2, highlightOptions = highlightOptions(color = "white", weight = 2, bringToFront = TRUE), label = ~ as.character(WD21NM), labelOptions = (interactive = TRUE), options = pathOptions(title = ~ WD21CD, customdata = ~ WD21NM) ) %>% htmlwidgets::onRender(" function(el, x) { var map = this; map.eachLayer(function(layer) { if(layer instanceof L.Polygon){ layer.on('click', function(e){ alert('You clicked on layer._leaflet_id: ' + layer._leaflet_id + '\\nWD21CD: ' + layer.options.title + '\\ncustomdata: ' + layer.options.customdata); }) .addTo(map) } }); } ") ``` 
·
Santiago Trujillo
Report
Answer question