Shiny環境のマップdivの外にリーフレットコントロールを置く

Question

リーフレットコントロールをShiny環境のマップdivの外に移動することは可能ですか？

例：

次のコードから：

library(shiny) 
library(leaflet) 

shinyApp(

    ui <- fluidPage(
    sidebarPanel("This is where I want to put the leaflet layers control", width = 3), 
    mainPanel(
     leafletOutput("map", width = "100%"), 
     width = 9) 
), 

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

    output$map <- renderLeaflet({ 
     leaflet() %>% 
     addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>% 
     addProviderTiles("Esri.WorldImagery", group = "Layer2") %>% 
     addLayersControl(position = "topleft", 
         baseGroups = c("Layer1", "Layer2"), 
         options = layersControlOptions(collapsed = F)) 
    }) # END RENDERLEAFET 
    } # END SERVER 
) # END SHINYAPP 

私はthis questionを見ましたが、それはシャイニーと大きく異なるleaflet.js、に特異的でした。これを行う方法はありますか？

Answer 1

JSと（部分的に）可能です。光沢のあるlibrary(shinyjs)内JSを使用するにはシャイニー内

のJSを使用して

は素敵なショートカットです。 ui側にはuseShinyjs()、サーバー側にはrunjs()を使用してください。

修正HTML

あなたはDOMを変更すると、あなたは、1つのDOMは、あなたがそれを変更する前に、完全に、構築されるまで待たなければならないことを知っている必要があります。 session$onFlushed(function() {}を使用すると、DOMが完全に構築されている場合にのみ修正を開始できます。

HTML要素

まずの再配置、あなたは要素は、あなたが再配置したいとあなたがそれを挿入したいターゲットは、命名されている方法を知っている必要があります。これを行うには、（ブラウザで）アプリケーションを実行して、必要な要素を右クリックし、「検査」を選択します。 次に、「要素から位置への変更」を変数に保存し、リーフレットから削除し、マップの外に追加します。

JSコードは次のようになります。

 var targetName = "div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control" 
    var target = document.querySelector(targetName); 
    var dest = document.querySelector("div.col-sm-3"); 
    document.querySelector(targetName).remove() 
    dest.appendChild(target) 

チャレンジ あなたがそのすべて一緒にあなたが気づく入れた場合、制御は灰色のボックス内ではありませんが、それ以下。上記のコードが与えられた理由は、form.wellでは機能しないため、div.col-sm-3に追加され、form.wellに追加されなかったためです。 UIのtags$div(id = "insertContainer", "")に空のコンテナを追加してそこに挿入するというアイデアがありましたが、どちらも問題ありません。私はあなたが灰色のボックスの中に入ることがどれほど重要であるかは分かりませんが、おそらく良く見えます。多分誰かが助けてくれるかもしれない。

コード

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

    ui <- fluidPage(
    useShinyjs(), 
    sidebarPanel(HTML("This is where I want to put the leaflet layers control"), width = 3, height = 5), 
    mainPanel(
     leafletOutput("map", width = "100%"), 
     width = 9) 
) 

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

    session$onFlushed(function() { 
     runjs(' 
      var targetName = "div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control" 
      var target = document.querySelector(targetName); 
      var dest = document.querySelector("div.col-sm-3"); 
      document.querySelector(targetName).remove() 
      dest.appendChild(target) 
     ') 
    }) 

    output$map <- renderLeaflet({ 
     leaflet() %>% 
     addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>% 
     addProviderTiles("Esri.WorldImagery", group = "Layer2") %>% 
     addLayersControl(position = "topleft", 
         baseGroups = c("Layer1", "Layer2"), 
         options = layersControlOptions(collapsed = F)) 
    }) # END RENDERLEAFET 
    } # END SERVER 


runApp(shinyApp(ui, server), launch.browser = TRUE)