Question

几周前，我发现了一个很棒的网站https://windy.com，它提供了一个免费的API，可以将地图包含在您自己的网页中（请参阅https://api.windy.com）。

我想将此地图作为基础图层/提供者图块包含在传单中，以便在Shiny App中展示。

我可以包含地图但是我无法让地图与R Leaflet功能（如addMarkers）进行交互。假设我想在点击按钮时向地图添加一些随机标记。

我尝试过不同的事情，但都没有显示标记：

尝试1

library(shiny)
library(leaflet)

  ui <- fluidPage(
    # Load leaflet.js
    tags$head(HTML("<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'></script> ")),

    # Either Use the two following lines or..
    tags$head(HTML("<style type='text/css'>
                   #windyty {    height: 800px; width: 1000px; 
                   margin-left: auto; margin-right: auto;
                   position: relative;
                   margin-top: 50px; }
                   </style>")),
    leafletOutput("windyty", height = "800px"),

    # .. the two following lines
    # tags$div(id = "windyty", style = "height: 500px; width: 1000px; 
    #                   margin-left: auto; margin-right: auto;
    #          position: relative;
    #          margin-top: 50px;"),
    #htmlOutput("<div id='windyty'></div>"),

    # Setup Windy.Com API
    tags$head(tags$script(
      "
      var windytyInit = {
      // Required: API key
      key: 'PsL-At-XpsPTZexBwUkO7Mx5I',

      // Optional: Initial state of the map
      lat: 50.4,
      lon: 14.3,
      zoom: 5,
      }

      // Required: Windyty main function is called after
      // initialization of API
      //
      // @map is instance of Leaflet maps
      //
      function windytyMain(map) {
      var popup = L.popup()
      .setLatLng([50.4, 14.3])
      .setContent('Hello World')
      .openOn( map );
      }
      "
    )),

    # Load map by running the following js script. It creates a Leaflet Map inside windyty div with id = "map_container"
    tags$head(HTML("<script async defer src='https://api.windytv.com/v2.3/boot.js'></script> ")),

    p(),
    actionButton("recalc", "New points")
  )


  server <- function(input, output, session) {
    # Create Random Data Point
    points <- eventReactive(input$recalc, {
      cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)
    }, ignoreNULL = FALSE)

    # When recalc is clicked add markers to map - Doesn't work :-/
    observeEvent(input$recalc,{
      leafletProxy("map_container") %>% #windyty doesn't work either!
        addMarkers(data = points())
    })
  }

  shinyApp(ui, server)

尝试2（包括JS作为插件）

    library(shiny)
    library(leaflet)
    library(htmltools)
    library(htmlwidgets)

    ui <- fluidPage(

      tags$head(HTML("<style type='text/css'>
                     #windyty {    height: 800px; width: 1000px; 
                     margin-left: auto; margin-right: auto;
                     position: relative;
                     margin-top: 50px; }
                     </style>")),
      tags$head(HTML("<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'></script> ")),

      leafletOutput("windyty", height = "800px"),
      # tags$div(id = "windyty", style = "height: 500px; width: 1000px; 
      #                   margin-left: auto; margin-right: auto;
      #          position: relative;
      #          margin-top: 50px;"),
      #htmlOutput("<div id='windyty'></div>"),
      tags$head(tags$script(
        "
        var windytyInit = {
        // Required: API key
        key: 'PsL-At-XpsPTZexBwUkO7Mx5I',

        // Optional: Initial state of the map
        lat: 50.4,
        lon: 14.3,
        zoom: 5,
        }

        // Required: Windyty main function is called after
        // initialization of API
        //
        // @map is instance of Leaflet maps
        //
        function windytyMain(map) {
        var popup = L.popup()
        .setLatLng([50.4, 14.3])
        .setContent('Hello World')
        .openOn( map );
        }
        "
      )),


      p(),
      actionButton("recalc", "New points")
      )


    WindyPlugin <- htmlDependency("leaflet.windy", "2.3",
                                  src = c(href = "https://api.windytv.com/v2.3/"),
                                  script = "boot.js"
    )

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



    server <- function(input, output, session) {
      # Create Random Data Point
      points <- eventReactive(input$recalc, {
        cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)
      }, ignoreNULL = FALSE)

      # When recalc is clicked add markers to map - Doesn't work :-/
      observeEvent(input$recalc,{
        leafletProxy("map_container") %>% #windyty
          addMarkers(data = points())
      })

      # Render Leaflet and Activate Windy.Com Plugin!
      output$windyty <- renderLeaflet({
        leaflet() %>%
          registerPlugin(WindyPlugin)
      })
    }

    shinyApp(ui, server)

可能的解释

“Hello World”标记工作（包含在js脚本中）。但是随机数据点没有显示。通过检查由闪亮的应用程序生成的HTML，我看到有风的传单地图没有存储在windyty id中。相反，它使用id =“map_container”在windyty div中创建传单地图。

此外，“map_container”具有类“leaflet-container leaflet-fade-anim”而不是类“leaflet html-widget html-widget-output shiny-bound-output leaflet-container leaflet-fade-anim”，我认为R Leaflet地图通常有。这可能是问题所在。

任何帮助将不胜感激！干杯

Answer 1

据我所知，你需要一些标记

somevariable <- leaflet() %>%  addTiles() %>%  addMarkers(data=nameofdataframe, lng= ~colhavinglongitude , lat= ~colhavinglatitude, popup = ~paste("<h4>name of marker</h4>","<br>","<b>Placename</b>"))

这将起作用

使用R Leaflet与从JavaScript API绘制的Leaflet Map进行交互

尝试1

尝试2（包括JS作为插件）

可能的解释

1 个答案: