Shiny - Control Widgets Inside Leaflet Karte

Question

Ich habe eine einfache shiny-App mit nur einem Dropdown-Liste Bezirke von Afghanistan und eine Broschüre Karte der gleichen.

kann die Form-Datei an diesem link zugegriffen werden - AFG_adm2.shp von http://www.gadm.org/download

hier ist der Code App:

library(shiny) 
library(leaflet) 
library(rgdal) 
library(sp) 

afg <- readOGR(dsn = "data", layer ="AFG_adm2", verbose = FALSE, stringsAsFactors = FALSE) 

ui <- fluidPage(
    titlePanel("Test App"), 
    selectInput("yours", choices = c("",afg$NAME_2), label = "Select Country:"), 
    actionButton("zoomer","reset zoom"), 
    leafletOutput("mymap") 

) 

server <- function(input, output){ 
    initial_lat = 33.93 
    initial_lng = 67.71 
    initial_zoom = 5 

    output$mymap <- renderLeaflet({ 
    leaflet(afg) %>% #addTiles() %>% 
     addPolylines(stroke=TRUE, color = "#00000", weight = 1) 
    }) 

    proxy <- leafletProxy("mymap") 

    observe({ 
    if(input$yours!=""){ 
     #get the selected polygon and extract the label point 
     selected_polygon <- subset(afg,afg$NAME_2==input$yours) 
     polygon_labelPt <- selected_polygon@polygons[[1]]@labpt 

     #remove any previously highlighted polygon 
     proxy %>% removeShape("highlighted_polygon") 

     #center the view on the polygon 
     proxy %>% setView(lng=polygon_labelPt[1],lat=polygon_labelPt[2],zoom=7) 

     #add a slightly thicker red polygon on top of the selected one 
     proxy %>% addPolylines(stroke=TRUE, weight = 2,color="red",data=selected_polygon,layerId="highlighted_polygon") 
    } 
    }) 

    observeEvent(input$zoomer, { 
    leafletProxy("mymap") %>% setView(lat = initial_lat, lng = initial_lng, zoom = initial_zoom) %>% removeShape("highlighted_polygon") 
    }) 


} 


# Run the application 
shinyApp(ui = ui, server = server) 

EDIT: Ich versuche tatsächlich eine Aktion hinzufügen Diese Schaltfläche setzt den Zoom auf einen Standardwert zurück (mit Hilfe von "leafletproxy" und "setview"). Ich möchte diese Schaltfläche in der oberen rechten Ecke der Karte platzieren, anstatt sie oberhalb der Karte zu platzieren.

Kann ich addLayersControl verwenden, um dies zu tun?

EDIT2:

-Code in Voll App:

# Create the map 
    output$mymap <- renderLeaflet({ 
     leaflet(afg) %>% addTiles() %>% 
     addPolygons(fill = TRUE, 
        fillColor = ~factpal(acdf$WP_2012), #which color for which attribute 
        stroke = TRUE, 
        fillOpacity = 1, #how dark/saturation the fill color should be 
        color = "black", #color of attribute boundaries 
        weight = 1, #weight of attribute boundaies 
        smoothFactor = 1, 
        layerId = aid 
        #popup = ac_popup 
     ) %>% addPolylines(stroke=TRUE, color = "#000000", weight = 1) %>% 
     addLegend("bottomleft", pal = factpal, values = ~WP_2012, 
        title = "Party", 
        opacity = 1 
     ) %>% setView(lng = initial_lng, lat = initial_lat, zoom = initial_zoom) %>% 
     addControl(html = actionButton("zoomer1","Reset", icon = icon("arrows-alt")), position = "topright") 
    }) 

Ich kann die Kartenkacheln aus addTiles oder der Zoom-Reset-Taste von addControl sehen. Irgendwelche Ideen, warum das passieren könnte?

Answer 1

Sie können dies erreichen, indem Sie die glänzende Funktion absolutePanel() in Ihrer Benutzeroberfläche verwenden, z.

library(shiny) 
library(leaflet) 
library(rgdal) 
library(sp) 

afg <- readOGR(dsn = "data", layer ="AFG_adm2", verbose = FALSE, stringsAsFactors = FALSE) 

ui <- fluidPage(
tags$head(
    tags$style(
     HTML(
      ' 
      .outer { 
       position: fixed; 
       top: 80px; 
       left: 0; 
       right: 0; 
       bottom: 0; 
       overflow: hidden; 
       padding: 0; 
      } 

      #controls-filters { 
       background-color: white; 
       border:none; 
       padding: 10px 10px 10px 10px; 
       z-index:150; 
      } 
      ' 
     ) 
    ) 
), 
titlePanel("Test App"), 
absolutePanel(
    id = "controls-filters", 
    class = "panel panel-default", 
    fixed = TRUE, 
    draggable = TRUE, 
    top = 100, 
    left = "auto", 
    right = 20, 
    bottom = "auto", 
    width = 330, 
    height = "auto", 
    selectInput("yours", choices = c("", afg$NAME_2), label = "Select Country:"), 
    actionButton("zoomer", "reset zoom") 
), 
div(class = "outer", leafletOutput("mymap")) 
     ) 

server <- function(input, output){ 
initial_lat = 33.93 
initial_lng = 67.71 
initial_zoom = 5 

output$mymap <- renderLeaflet({ 
    leaflet(afg) %>% #addTiles() %>% 
     addPolylines(stroke=TRUE, color = "#00000", weight = 1) 
}) 

proxy <- leafletProxy("mymap") 

observe({ 
    if(input$yours!=""){ 
     #get the selected polygon and extract the label point 
     selected_polygon <- subset(afg,afg$NAME_2==input$yours) 
     polygon_labelPt <- selected_polygon@polygons[[1]]@labpt 

     #remove any previously highlighted polygon 
     proxy %>% removeShape("highlighted_polygon") 

     #center the view on the polygon 
     proxy %>% setView(lng=polygon_labelPt[1],lat=polygon_labelPt[2],zoom=7) 

     #add a slightly thicker red polygon on top of the selected one 
     proxy %>% addPolylines(stroke=TRUE, weight = 2,color="red",data=selected_polygon,layerId="highlighted_polygon") 
    } 
}) 

observeEvent(input$zoomer, { 
    leafletProxy("mymap") %>% setView(lat = initial_lat, lng = initial_lng, zoom = initial_zoom) %>% removeShape("highlighted_polygon") 
}) 

} 

# Run the application 
shinyApp(ui = ui, server = server) 

Dies sollte Ihnen den Einstieg, aber ich würde empfehlen, Ihre Anwendung so zu strukturieren, dass sie eine Stand-alone-CSS-Datei hat.

Answer 2

können Sie die addControl Funktion direkt verwenden:

output$mymap <- renderLeaflet({ 
    leaflet(afg) %>% #addTiles() %>% 
     addPolylines(stroke=TRUE, color = "#00000", weight = 1) %>% 
     addControl(actionButton("zoomer","Reset"),position="topright") 
})