我正在启动一个闪亮的应用程序,其中包含传单地图。
我需要用户能够在地图上放置两个单独的标记(出发地和目的地),并可能稍后替换它们。
所以我所做的是创建一个起点按钮和一个目的地按钮,这样当用户单击其中一个按钮时,他们将在地图上下次单击时放置或更新相应的标记。
library(shiny)
library(shinyWidgets)
library(leaflet)
library(RColorBrewer)
library(osrm)
ui <- bootstrapPage(
tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
leafletOutput("map", width = "100%", height = "100%"),
absolutePanel(top = 10, right = 10,
actionButton("change_orig", "Origine"),
actionButton("change_dest", "Destination"),
)
)
server <- function(input, output, session) {
origin_icon = makeIcon("https://static.thenounproject.com/png/1477944-200.png",
iconWidth=24, iconHeight=30)
destination_icon = makeIcon("https://static.thenounproject.com/png/924206-200.png",
iconWidth=24, iconHeight=30)
output$map <- renderLeaflet({
leaflet() %>% addTiles(providers$OpenStreetMap) %>%
addProviderTiles(providers$OpenStreetMap, group="Open Street Map") %>%
addProviderTiles(providers$OpenTopoMap, group="Open Topo Map") %>%
fitBounds(2.907730, 45.856550, 3.310954, 45.714034) %>%
addLayersControl(
baseGroups = c("Open Street Map", "Open Topo Map")
)
})
# When "Origin" is selected,
# a click on the map will (re)place the origin marker.
observeEvent(input$change_orig, {
observeEvent(input$map_click, {
click = input$map_click
leafletProxy('map')%>%
clearGroup("origin") %>%
addMarkers(lng=click$lng, lat=click$lat, icon=origin_icon,
group="origin")
})
})
# When "Destination" is selected,
# a click on the map will (re)place the destination marker.
observeEvent(input$change_dest, {
observeEvent(input$map_click, {
click = input$map_click
leafletProxy('map') %>%
clearGroup("destination") %>%
addMarkers(lng=click$lng, lat=click$lat, icon=destination_icon,
group="destination")
})
})
}
shinyApp(ui, server)
我在这里面临几个问题。
clearGroup
也会删除目的地和起点标记,并在同一位置重新创建两者。如何确保只创建或替换一个标记而不影响另一个标记?
我怎样才能只监听按钮被选择后的点击事件?
所以我最终选择了一个
radioButtons
而不是两个actionButton
。
然后在
observeEvent
的 map_click
中,我使用了一个简单的 if
来检查选择了哪个单选按钮:
library(shiny)
library(shinyWidgets)
library(leaflet)
library(RColorBrewer)
library(osrm)
ui <- bootstrapPage(
tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
leafletOutput("map", width = "100%", height = "100%"),
absolutePanel(top = 10, right = 10,
radioButtons(
'orig_dest_switch',
"Changer l'origine ou la destination",
choices = c("Origine", "Destination"),
choiceValues = c("orig", "dest"),
inline = TRUE),
)
)
server <- function(input, output, session) {
origin_icon = makeIcon("https://static.thenounproject.com/png/1477944-200.png",
iconWidth=24, iconHeight=30)
destination_icon = makeIcon("https://static.thenounproject.com/png/924206-200.png",
iconWidth=24, iconHeight=30)
output$map <- renderLeaflet({
leaflet() %>% addTiles(providers$OpenStreetMap) %>%
addProviderTiles(providers$OpenStreetMap, group="Open Street Map") %>%
addProviderTiles(providers$OpenTopoMap, group="Open Topo Map") %>%
fitBounds(2.907730, 45.856550, 3.310954, 45.714034) %>%
addLayersControl(
baseGroups = c("Open Street Map", "Open Topo Map")
)
})
observeEvent(input$map_click, {
click = input$map_click
# Vérifier si l'on update le marker d'origine ou de destination
if(input$orig_dest_switch=="Origine"){
origin = list(lng=click$lng, lat=click$lat)
leafletProxy('map')%>%
clearGroup("origin") %>%
addMarkers(lng=click$lng, lat=click$lat, icon=origin_icon,
group="origin")
} else {
destination = list(lng=click$lng, lat=click$lat)
leafletProxy('map')%>%
clearGroup("destination") %>%
addMarkers(lng=click$lng, lat=click$lat, icon=destination_icon,
group="destination")
}
})
}
shinyApp(ui, server)