index.Rmd

---
pagetitle: "Public parks in Trafford"
lang: "en-GB"
output: 
  html_document:
    css: styles.css
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)

library(crosstalk) ; library(tidyverse) ; library(sf) ; library(leaflet) ; library(leaflet.extras) ; library(reactable) ; library(shiny) ; library(htmlwidgets) ; library(htmltools)

# local authority boundary
sf <- st_read("local_authority.geojson", quiet = TRUE)

# parks
df <- read_csv("data/parks.csv") %>% 
  mutate(website = ifelse(is.na(website), "", str_c("<a href='", website, "'target='_blank'>", str_remove(website, "http://www.|https://www.|www.|http://|https://"), "</a>")),
         twitter = ifelse(is.na(twitter), "", str_c("<a href='https://twitter.com/", twitter, "' target='_blank'>@", twitter, "</a>")),
         green_flag = ifelse(is.na(green_flag), "", str_c("<a href='", green_flag, "'target='_blank'>Green Flag Award Winner 2021/22</a>")),
         popup = ifelse(is.na(green_flag), str_c("<strong>", name, "</strong>") %>% map(HTML), str_c("<strong>", name, "</strong><br/>", green_flag) %>% map(HTML)))

# shared dataframe
sd <- SharedData$new(df, group = "name")
# subset of shared dataframe
sd_table <- select(df, name, website, twitter) %>%
  SharedData$new(group = "name")
```

```{r, map}
map <- leaflet(sd, width = "100%", height = 350, options = leafletOptions(zoomControl = TRUE, minZoom = 10, maxZoom = 16)) %>%
  addTiles(urlTemplate = "", attribution = '<a href="https://www.ons.gov.uk/methodology/geography/licences">Contains OS data © Crown copyright and database right (2023)</a> | <a href="https://www.trafforddatalab.io">@traffordDataLab</a>') %>%
  addProviderTiles(providers$Esri.WorldGrayCanvas) %>% # Base map tiles
  addPolygons(data = sf, fillColor = "#CCCCCC", weight = 0.8, opacity = 1, color = "#212121") %>%  
  addFullscreenControl() %>%
  addAwesomeMarkers(popup = df$popup, icon = ~makeAwesomeIcon(icon = "tree-deciduous", library = "glyphicon", iconColor = "#006d2c", markerColor = "lightgreen")) %>%
  onRender(paste0("function(el, x) {$('head').append(","\'<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\'",");}"))
```

```{r, table}
# improve accessibility
options(reactable.language = reactableLang(
  noData = "No parks found",
  pagePreviousLabel = "Previous page",
  pageNextLabel = "Next page"))

table <- reactable(
  sd_table,
  columns = list(
    name = colDef(name = "Park"),
    website = colDef(name = "Website", html = TRUE),
    twitter = colDef(name = "Twitter", html = TRUE)),
  compact = TRUE,
  borderless = TRUE,
  sortable = FALSE,
  wrap = FALSE,
  highlight = TRUE,
  selection = "multiple",
  onClick = "select",
  rowStyle = list(cursor = "pointer")
)
```
<header>
```{r, logo}
a(
  href = "https://www.trafforddatalab.io", 
  img(src = "https://www.trafforddatalab.io/assets/logo/trafforddatalab_logo.svg", 
      alt = "Trafford Data Lab", 
      width = "100",
      style = "position:absolute; top:0; right:0; padding: 10px;")
  )
```
</header><main>
```{r, ui}
div(class = "container-fluid",
  div(class = "row",
      h1("Public parks in Trafford", style = "padding-top: 25px; margin-bottom: 20px;"),
      div(class = "col-xs-12 col-sm-6 col-md-6 col-lg-6", map),
      h2("Facilities", style = "margin-top: -3px;"),
      div(class = "col-xs-6 col-sm-3 col-md-3 col-lg-3", 
          list(
            # Playground
            filter_checkbox(id = "playground", label = NULL, sharedData = sd, group = ~ifelse(playground == 1, "Playground", NA), inline = TRUE),
            # Cafe
            filter_checkbox(id = "cafe", label = NULL, sharedData = sd, group = ~ifelse(cafe == 1, "Cafe", NA), inline = TRUE),
            # Toilets
            filter_checkbox(id = "toilets", label = NULL, sharedData = sd, group = ~ifelse(toilets == 1, "Toilets", NA), inline = TRUE),
            # Accessible toilets
            filter_checkbox(id = "accessible_toilet", label = NULL, sharedData = sd, group = ~ifelse(accessible_toilet == 1, "Accessible toilet", NA), inline = TRUE),
            # Pets' corner
            filter_checkbox(id = "pets_corner", label = NULL, sharedData = sd, group = ~ifelse(pets_corner == 1, "Pets' corner", NA), inline = TRUE),
            # Miniature railway
            filter_checkbox(id = "miniature_railway", label = NULL, sharedData = sd, group = ~ifelse(miniature_railway == 1, "Miniature railway", NA), inline = TRUE),
            # Basketball
            filter_checkbox(id = "basketball", label = NULL, sharedData = sd, group = ~ifelse(basketball == 1, "Basketball", NA), inline = TRUE)
           )),
      div(class = "col-xs-6 col-sm-3 col-md-3 col-lg-3", 
          list(
            # Bowling green
            filter_checkbox(id = "bowling", label = NULL, sharedData = sd, group = ~ifelse(bowling == 1, "Bowling green", NA), inline = TRUE),
            # Tennis courts
            filter_checkbox(id = "tennis", label = NULL, sharedData = sd, group = ~ifelse(tennis == 1, "Tennis courts", NA), inline = TRUE),
            # Football
            filter_checkbox(id = "football", label = NULL, sharedData = sd, group = ~ifelse(football == 1, "Football pitches", NA), inline = TRUE),
            # Outdoor gym
            filter_checkbox(id = "outdoor_gym", label = NULL, sharedData = sd, group = ~ifelse(outdoor_gym == 1, "Outdoor gym", NA), inline = TRUE),
            # BMX track
            filter_checkbox(id = "bmx_track", label = NULL, sharedData = sd, group = ~ifelse(bmx_track == 1, "BMX track", NA), inline = TRUE)),
          # Skate park
          filter_checkbox(id = "skate_park", label = NULL, sharedData = sd, group = ~ifelse(skate_park == 1, "Skate park", NA), inline = TRUE))),
  br(),
  div(class = "row",
      h2("Friends' Groups"),
      div(class = "col-sm-12", table)),
  div(class = "row",
      div(class = "col-sm-12", 
          p("If you spot an error, or there is something you'd like adding, please contact us at", a("infotrafford@trafford.gov.uk", href = 'mailto:infotrafford@trafford.gov.uk')), 
          p("For more information about parks in Trafford, please visit", a("trafford.gov.uk/parks", href = 'https://www.trafford.gov.uk/parks', target = "_blank"))),
      br()
      )
  )
```
</main>
<script>
  // Remove label tags created by crosstalk for the checkboxes causing validation errors
  // Reason for the error is that the 'for' attribute isn't referencing an id of a form control
  // NOTE: the do while loop always references array index 0 because as the elements are removed from the DOM they are also removed from the array
 
  var arrEmptyLabels = document.getElementsByClassName('control-label');
  var parent;
  
  do {
    parent = arrEmptyLabels[0].parentNode;
    parent.removeChild(arrEmptyLabels[0]);
  }
  while (arrEmptyLabels.length > 0);
  
  // Remove the crosstalk selection button from the Leaflet map. Map may not have initialised at this point so set up an interval to keep calling until it has
  var removeSelectionButtonFn = setInterval(removeSelectionButton, 100);
  
  function removeSelectionButton() {
    try {
      // We don't have an id or name so have to do it by classname and then check we have the correct button by testing the 'title' attribute
      var arrEasyButtonContainer = document.getElementsByClassName('easy-button-container');
  
      for (var i = 0; i < arrEasyButtonContainer.length; i++) {
        if (arrEasyButtonContainer[i].childNodes[0].title == "Make a selection") {
          var parent = arrEasyButtonContainer[i].parentNode;
          parent.removeChild(arrEasyButtonContainer[i]);    // remove the whole container plus button
          clearInterval(removeSelectionButtonFn);  // cancel any further calls to this function as we have completed all actions
        }
      }
    }
    catch(e) {
      clearInterval(removeSelectionButtonFn);   // something went wrong so cancel fn call
    }
  }
  
  // Add aria-label attribute to the fullscreen Leaflet map button to identify its purpose as the link is empty (assessibility issue)
  // Map may not have initialised at this point so set up an interval to keep calling until it has
  var updateFullscreenButtonFn = setInterval(updateFullscreenButton, 100);
  
  function updateFullscreenButton() {
    try {
      // We don't have an id or name so have to do it by classname
      var arrFullscreenButtonLink = document.getElementsByClassName('leaflet-control-fullscreen-button');
      
      if (arrFullscreenButtonLink.length > 0) {
        // set aria-label to describe the function of the link/button
        arrFullscreenButtonLink[0].setAttribute('aria-label', 'Maximise/minimise map.');
        
        clearInterval(updateFullscreenButtonFn);    // cancel any further calls to this function as we have completed all actions
      }
    }
    catch(e) {
      clearInterval(updateFullscreenButtonFn);    // something went wrong so cancel fn call
    }
  }
</script>