2017-12-01 6 views
2

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) 
+0

[This](https://stackoverflow.com/a/36434237/5894457)助けてください! – SBista

+0

@SBistaご意見ありがとうございます。 'mapview'の' popupImage() '関数とフォルダをシフトする他の方法は、Rのリーフレットを使ってうまく動作します。しかしShinyと同じことをしようとしています。アプリ。私はこれらのテクニックをShinyに取り入れようとしましたが、何の成功もありませんでした。 – LAD

+0

あなたが試してみることの1つは、ユーザーが 'www'フォルダにアップロードした画像を保存し、あなたのポップアップにその画像を表示することです。私はそれを試して、これは動作します! – SBista

答えて

0

ここでは、私が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) 

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

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

関連する問題