javascriptrleafletgoogle-street-viewr-leaflet

How do you implement leaflet plugin "Leaflet-Pegman" in R Leaflet


I want to use google streetview in my r shiny application. I am using leaflet to draw my map. I found this great leaflet plugin "Leaflet Pegman".

How do I implement this plugin into a r shiny app?

I tried to use this explanation. I also found another R-package (googleway) but in my case I want to use leaflet instead.

Could some one provide me a working example. This is my code now:

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

Googlekey <- "api_key_here"

PluginPegman <- htmlDependency(name = "Pegman",version = "0.1.4"
                               ,src = c(href = "https://unpkg.com/leaflet-pegman/0.1.4/")
                               ,script = "leaflet-pegman.js"
                               ,stylesheet = "leaflet-pegman.css")

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

ui <- bootstrapPage(
  tags$style(type = "text/css","html,body {width:100%;height:100%}")
  ,leafletOutput("map",width = "100%",height = "100%")
)

server <- function(input, output) {
  
  output$map <- renderLeaflet({
    leaflet() %>%
      # Set view to the Netherlands
      setView(5.41077,52.13012,zoom = 8) %>%
      addProviderTiles(providers$OpenStreetMap,group = "OSM") %>%
      
      registerPlugin(PluginPegman)  %>%
      onRender("function() {
      var pegmanControl = new L.Control.Pegman({
      position: 'bottomright', // position of control inside the map
      theme: 'leaflet-pegman-v3-default', // or 'leaflet-pegman-v3-small'});
      pegmanControl.addTo(map);
               }")
  })
}

shinyApp(ui = ui, server = server)

Thank you very very much.


Solution

  • I had to include the leaflet-pegman js file in the head of the UI for it to work. I also edited the link in the htmlDependency as it wasn't referencing the correct link.

    This code works for me now:

    library(shiny)
    library(leaflet)
    library(htmltools)
    library(htmlwidgets)
    
    Googlekey <- "api_key_here"
    
    PluginPegman <- htmlDependency(name = "Pegman", version = '0.1.5'
                                   ,src = c(href = "https://unpkg.com/leaflet-pegman")
                                   ,script = "leaflet-pegman.js"
                                   ,stylesheet = "leaflet-pegman.css")
    
    registerPlugin <- function(map, plugin) {
        map$dependencies <- c(map$dependencies, list(plugin))
        map
    }
    
    ui <- bootstrapPage(
        tags$head(
            tags$script(src='https://unpkg.com/leaflet-pegman@0.1.5/leaflet-pegman.js'),
            tags$style(type = "text/css","html,body {width:100%;height:100%}")
        ),
        
        leafletOutput("map",width = "100%",height = "100%")
    )
    
    server <- function(input, output) {
        
        output$map <- renderLeaflet({
            leaflet() %>%
                # Set view to the Netherlands
                setView(5.41077,52.13012,zoom = 8) %>%
                addProviderTiles(providers$OpenStreetMap,group = "OSM") %>%
                registerPlugin(PluginPegman)  %>%
                onRender("function(el,x) {
          var pegmanControl = new L.Control.Pegman({
          position: 'bottomright', 
          theme: 'leaflet-pegman-v3-default',
          apiKey: YOUR API KEY});
          pegmanControl.addTo(this);}")
        })
    }
    
    shinyApp(ui = ui, server = server)