Манипулируйте существующей картой Leaflet в блестящем приложении с помощью JavaScript с использованием brightjs - PullRequest
Новая
       37

Манипулируйте существующей картой Leaflet в блестящем приложении с помощью JavaScript с использованием brightjs

0 голосов
/ 26 апреля 2018

У меня блестящее приложение с существующей картой листовки. Я хочу иметь возможность манипулировать этой картой после рендеринга, используя пользовательский javascript через пакет shinyjs. Ниже приведен минимальный пример:

app.R 

# packages ----------------------------------------------------------------

library(dplyr)
library(leaflet)
library(shiny)
library(shinyjs)

# ui ----------------------------------------------------------------------

ui <- fluidPage(

  useShinyjs(),
  extendShinyjs(script = "my_js.js"),

  leafletOutput(outputId = "map", height = "80vh"),

  tags$hr(),
  tags$p("Button to run the JS code"),
  actionButton(inputId = "go", label = "Add a Marker")

)

# server ------------------------------------------------------------------

server <- function(input, output, session){

  # define a simple map
  output$map <- renderLeaflet({

    leaflet() %>%
      addProviderTiles("CartoDB.Positron")
  })

  # observe the go button and run the shinyjs.addMarker function
  observeEvent(
    eventExpr = input$go,
    handlerExpr = js$addMarker()
  )

}

# run ---------------------------------------------------------------------

shinyApp(ui = ui, server = server)

my_js.js 

shinyjs.addMarker = function(){

  // get the map - this bit doesn't work!
  var map = document.getElementById('map');

  // create a marker and add to map
  var marker = new L.marker([53, -1]).addTo(map);

  // really I'd be going off and querying an API, or doing
  // something else for which there is no handy R function.

};

Вопрос в том, как получить доступ к объекту карты после того, как он был создан. Очевидно, что в этом примере я просто добавляю маркер, что я могу сделать с leafletProxy(), но на самом деле я хочу запросить API и добавить дополнительные данные на карту, когда пользователь выполняет действие.

Буду признателен за любую помощь или совет относительно других способов сделать это!

Chris

1 Ответ

0 голосов
/ 31 мая 2018

Вы можете добраться до объекта карты с помощью функции htmlwidtget onRender(). Затем вы можете сохранить его в глобальной области видимости (пропустив ключевое слово var при создании переменной). Это становится доступным в любом месте кода JavaScript. 

output$map <- renderLeaflet({
    leaflet() %>%
        addProviderTiles("CartoDB.Positron") %>%
        htmlwidgets::onRender("
            function(el,x) {
                map = this;
            }
        ")
})

Ваш my_js.js будет выглядеть следующим образом: 

shinyjs.addMarker = function(){

  // create a marker and add to map
  var marker = new L.marker([53, -1]).addTo(map);

  // really I'd be going off and querying an API, or doing
  // something else for which there is no handy R function.

};
...