Skjutningar: visa hjälpinformation

Det är alltid användbart att ge användarna mer sammanhang om din app. Ett sätt att göra detta är att lägga till en About-knapp i appen och visa informationen som en modal dialog.

Det är precis vad vi ska göra i den här övningen. Din app kommer att likna bilden i den här skärmbilden när användaren klickar på knappen "About".

En app som visar röda cirklar för varje skjutningsincident med detaljer som visas när man klickar på cirkeln

Kom ihåg att du kan visa texten 'About' i en modal dialog med kodavsnittet:

showModal(modalDialog("About"))

Den här övningen är en del av kursen

Bygg webbapplikationer med Shiny i R

Visa kurs

Övningsinstruktioner

UI: Lägg till en åtgärdsknapp med namnet show_about.
Server: Använd observeEvent för att utlösa visningen av en modal dialog med showModal(modalDialog(text_about, title = 'About')).

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

ui <- bootstrapPage(
  theme = shinythemes::shinytheme('simplex'),
  leaflet::leafletOutput('map', width = '100%', height = '100%'),
  absolutePanel(top = 10, right = 10, id = 'controls',
    sliderInput('nb_fatalities', 'Minimum Fatalities', 1, 40, 10),
    dateRangeInput(
      'date_range', 'Select Date', "2010-01-01", "2019-12-01"
    ),
    # CODE BELOW: Add an action button named show_about
    
  ),
  tags$style(type = "text/css", "
    html, body {width:100%;height:100%}     
    #controls{background-color:white;padding:20px;}
  ")
)

server <- function(input, output, session) {
  # CODE BELOW: Use observeEvent to display a modal dialog
  # with the help text stored in text_about.

  
  
  output$map <- leaflet::renderLeaflet({
    mass_shootings %>% 
      filter(
        date >= input$date_range[1],
        date <= input$date_range[2],
        fatalities >= input$nb_fatalities
      ) %>% 
      leaflet() %>% 
      setView( -98.58, 39.82, zoom = 5) %>% 
      addTiles() %>% 
      addCircleMarkers(
        popup = ~ summary, radius = ~ sqrt(fatalities)*3,
        fillColor = 'red', color = 'red', weight = 1
      )
  })
}

shinyApp(ui, server)

Redigera och kör kod