Schietpartijen met meerdere slachtoffers: help tonen

Het is altijd nuttig om gebruikers meer context over je app te geven. Een manier om dit te doen is door een About-knop aan de app toe te voegen en de context als een modaal dialoogvenster te tonen.

Precies dat ga je in deze oefening doen. Je app ziet eruit zoals in de screenshot wanneer de gebruiker op de knop "About" klikt.

An app displaying red circles for each mass shooting incident with details appearing on clicking the circle

Onthoud dat je de tekst 'About' in een modaal dialoogvenster kunt tonen met:

showModal(modalDialog("About"))

Deze oefening maakt deel uit van de cursus

Webapplicaties bouwen met Shiny in R

Cursus bekijken

Oefeninstructies

UI: Voeg een actieknop toe met de naam show_about.
Server: Gebruik observeEvent om het tonen van een modaal dialoogvenster te activeren met showModal(modalDialog(text_about, title = 'About')).

Praktische interactieve oefening

Probeer deze oefening eens door deze voorbeeldcode in te vullen.

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)

Code bewerken en uitvoeren