リーフレットマーカーポップアップでシャイニーの画像

Question

Leafletを使ってRで地図を作成するときに、マーカーのポップアップで画像を使用することがよくあります。 Shinyのリーフレットマップを作って、ユーザーがマーカーポップアップに入る写真を選択できるようにしたいと思います。シャイニーからこれを行うと、コンテナはイメージなしで表示されます。スタンドアロンのリーフレットマップのように、イメージをクリックして自分のマシン上のその場所に移動することはできません。コンテナにカーソルを合わせると、htmlwidgetsのチラシマップを出力したときと同じように、ファイル名の前にfile:///というファイル名が表示されます。

以下は、この問題の簡単な動作例です。アップロードするには、.jpg、png、またはsvgが必要です。

ui<-bootstrapPage(div(class="outer", 
       tags$style(type ="text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0} #table{white-space: nowrap;}"), 

      leafletOutput("map", width = "100%", height="100%"), 
       absolutePanel(top = 10, right = 10, width=300, draggable=TRUE,style="background-color: rgba(217, 240, 209, 0.85); border-radius: 10px; padding: 10px", 

      fileInput(inputId = "photos", label = "Include photos", multiple = T, accept = c('image/png', 'image/jpeg', 'image/svg')) 
         ))) 



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

photos<- reactive({ 

if (is.null(input$photos)) 
    return(NULL) 

infilee<-input$photos 
dirr<-dirname(infilee[1,4]) 

#reassign that directory to all of the filenames 
for (i in 1:nrow(infilee)) { 
    file.rename(infilee[i,4], paste0(dirr,"/",infilee[i,1]))} 

photo<-list.files(dirr, full.names=TRUE) 


    }) 



output$map <- renderLeaflet({ 

leaflet() %>% addProviderTiles("Esri.WorldImagery") %>% 
    fitBounds(-81, 34, -77, 40) %>% 

    addMeasure(
    position = "topleft", primaryLengthUnit = "meters", primaryAreaUnit = "acres", secondaryAreaUnit = "sqmeters", 
    activeColor = "#ff6f69", completedColor = "#00a9ff") 

    }) 


observe({ 

if (is.null(input$photos)) 
    return(NULL) 

photos()->phdata 

popup<-paste0("<div><a target='_blank' href='",phdata,"'><img width=100%, height=100% src='", phdata,"' ></a></div>") 

leafletProxy("map") %>% 
addMarkers(lng=-81, lat=37,popup=popup) 

    }) 
    } 

shinyApp(ui = ui, server = server) 

Answer 1

ここでは、私がtemoraryフォルダからwwwフォルダに画像ファイルをコピーしたコードを示します。

library(shiny) 
library(leaflet) 
library(mapview) 

ui<-bootstrapPage(div(class="outer", 
         tags$style(type ="text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0} #table{white-space: nowrap;}"), 

         leafletOutput("map", width = "100%", height="100%"), 
         absolutePanel(top = 10, right = 10, width=300, draggable=TRUE,style="background-color: rgba(217, 240, 209, 0.85); border-radius: 10px; padding: 10px", 

            fileInput(inputId = "photos", label = "Include photos", multiple = T, accept = c('image/png', 'image/jpeg', 'image/svg')) 
        ))) 



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

    photos<- reactive({ 

    if (is.null(input$photos)) 
     return(NULL) 

    infilee<-input$photos 
    dirr<-dirname(infilee[1,4]) 
    www_dir <- file.path(getwd(), "www") 

    #rename the files and copy all the files to www directory 
    for (i in 1:nrow(infilee)) { 
     file.rename(infilee[i,4], paste0(dirr,"/",infilee[i,1])) 
     file.copy(paste0(dirr,"/",infilee[i,1]), www_dir) 
     } 

    #Since the file is saved in www directory, you just have to pass the file name 
    photo<-list.files(www_dir) 


    }) 



    output$map <- renderLeaflet({ 
    # print(tempdir()) 
    # print(tempfile()) 

    leaflet() %>% addProviderTiles("Esri.WorldImagery") %>% 
     fitBounds(-81, 34, -77, 40) %>% 
     addMeasure(
     position = "topleft", primaryLengthUnit = "meters", primaryAreaUnit = "acres", secondaryAreaUnit = "sqmeters", 
     activeColor = "#ff6f69", completedColor = "#00a9ff")#%>%saveas(tempdir())  
    }) 


    observe({ 

    if (is.null(input$photos)) 
     return(NULL) 

    photos()->phdata 
    popup <- popupImage(phdata) 
    leafletProxy("map") %>% 
     addMarkers(lng=-81, lat=37,popup=popup) 

    }) 
} 

shinyApp(ui = ui, server = server) 

あなたはこのコードを使用して取得する出力は、次のとおりです。

はそれが役に立てば幸い！