Нажав на маркер листовки, вы попадете на URL - PullRequest
Новая
       113

Нажав на маркер листовки, вы попадете на URL

5 голосов
/ 03 октября 2019

В пакете для R есть способ щелкнуть маркер и перейти на URL? *

Это возможно в JS .


Легко добавить отдельное всплывающее окно с URL-адресом: 

library(leaflet)
content <- paste(sep = "<br/>",
                 "<b><a href='http://www.samurainoodle.com'>Samurai Noodle</a></b>"
)

leaflet() %>% addTiles() %>%
  addPopups(-122.327298, 47.597131,  content,
             options = popupOptions(closeButton = FALSE)
  )

Также просто добавить маркер, который при нажатии предоставляет URL-адресво всплывающем окне: 

leaflet() %>% addTiles() %>%
  addMarkers(-122.327298, 47.597131, popup =  content,
            options = popupOptions(closeButton = FALSE)
  )

Возможно, что-то нестандартное передано в листовку в ...?

Наконец, как пользовательская функция JS может отображать различные URL-адресадля каждого маркера карты? Рассмотрим пример data.frame: 

df <- data.frame(url = c("https://stackoverflow.com/questions/tagged/python",
                         "https://stackoverflow.com/questions/tagged/r")),
                 lng = c(-122.327298, -122.337298),
                 lat = c(47.597131,47.587131))

* Это было , ранее заданное , но я снова задаю вопрос здесь и приведу минимальный воспроизводимый пример.

1 Ответ

6 голосов
/ 07 октября 2019

Вы можете использовать htmltools или htmlwidgets для добавления события onclick с javascript:

Решение 1) с htmltools: 

library(leaflet)
map <- leaflet() %>% 
  addTiles() %>%
  addMarkers(-122.327298, 47.597131, popup =  'LINK',
             options = popupOptions(closeButton = FALSE)
  )

library(htmltools)
browsable(
  tagList(
    list(
      tags$head(
        tags$script(
          '
         document.addEventListener("DOMContentLoaded", function(){
           var marker = document.getElementsByClassName("leaflet-pane leaflet-marker-pane");
           var openLink = function() {
             window.open("https://www.stackoverflow.com")
           };
           marker[0].addEventListener("click", openLink, false);
         })
          '
        )
      ),
      map
    )
  )
)

Решение 2 - с htmlwidgets: 

library(leaflet)
library(htmlwidgets)
leaflet() %>% 
  addTiles() %>%
  addMarkers(-122.327298, 47.597131, popup =  'LINK',
             options = popupOptions(closeButton = FALSE)
  ) %>%
  onRender('
    function(el, x) {
      var marker = document.getElementsByClassName("leaflet-pane leaflet-marker-pane");
      var openLink = function() {
        window.open("https://www.stackoverflow.com")
      };
      marker[0].addEventListener("click", openLink, false);
    }
  ')

Различные URL для каждого маркера:

Это грязный подход и показывает общеепуть. Мне не хватает времени, чтобы освоиться с замыканиями в JS, чтобы снова добавить цикл.

Можно посмотреть здесь: addEventListener, использующий для цикла и передачи значений . И данные могут быть переданы из R в JS с помощью функции onRender. Может быть, я снова найду время на выходных или вы / кто-то добавите эту часть. Не стесняйтесь оставлять вопрос открытым, .. 

 jsCode <- paste0('
 function(el, x) {
  var marker = document.getElementsByClassName("leaflet-marker-icon leaflet-zoom-animated leaflet-interactive");
  marker[0].onclick=function(){window.open("https://stackoverflow.com/questions/tagged/python");};
  marker[1].onclick=function(){window.open("https://stackoverflow.com/questions/tagged/r");};
}
 ')


 library(leaflet)
 library(htmlwidgets)
 leaflet() %>% 
   addTiles() %>%
   addMarkers(lng = df$lng, lat = df$lat, popup =  'LINK',
              options = popupOptions(closeButton = FALSE)
   ) %>%
   onRender(jsCode)
...