From a07ed8f1751477f09ddd1ffab93437508ebf4dd3 Mon Sep 17 00:00:00 2001 From: guslipkin Date: Fri, 5 Apr 2024 22:28:45 -0400 Subject: [PATCH] updated map controls --- R/app_server.R | 49 ++++++++++++++----- R/app_ui.R | 43 +++++++++++++--- R/utils_map.R | 27 ++++------ inst/app/www/images/arrows-angle-contract.svg | 3 ++ inst/app/www/images/arrows-angle-expand.svg | 3 ++ inst/app/www/images/shield-check.svg | 4 ++ 6 files changed, 92 insertions(+), 37 deletions(-) create mode 100644 inst/app/www/images/arrows-angle-contract.svg create mode 100644 inst/app/www/images/arrows-angle-expand.svg create mode 100644 inst/app/www/images/shield-check.svg diff --git a/R/app_server.R b/R/app_server.R index 7127a1a..03cbfcd 100644 --- a/R/app_server.R +++ b/R/app_server.R @@ -16,6 +16,25 @@ app_server <- function(input, output, session) { '', 'Toggle Clusters' ) ) + shiny::updateActionButton( + inputId = 'fit_zoom', + label = shiny::HTML( + '', 'Fit Points' + ) + ) + shiny::updateActionButton( + inputId = 'reset_zoom', + label = shiny::HTML( + '', 'Reset Zoom' + ) + ) + shinyjs::runjs(" + $('.card-tools') + .contents() + .filter(function() { return this.nodeType == 3; }) + .replaceWith(' '); + ") + # btn btn-tool btn-sm btn-primary dropdown-toggle dat <- shiny::reactiveVal(full_data) table_dat <- shiny::reactiveVal(full_data) selected_dat <- shiny::reactiveVal(full_data) @@ -104,7 +123,7 @@ app_server <- function(input, output, session) { }) |> shiny::bindEvent(input$clear_filters, ignoreNULL = TRUE, ignoreInit = FALSE) - shiny::observe({ + shiny::observe({ if (is.null(input$table_rows_selected) & !is.null(input$map_bounds)) { dat() |> dplyr::filter( @@ -120,6 +139,20 @@ app_server <- function(input, output, session) { ignoreNULL = FALSE, ignoreInit = FALSE ) + #----user zoom---- + shiny::observe({ + shiny::req(selected_dat()) + leaflet::leafletProxy('map', data = selected_dat()) |> + .fit_bounds(selected_dat()) + }) |> + shiny::bindEvent(input$fit_zoom, ignoreInit = TRUE) + + shiny::observe({ + leaflet::leafletProxy('map', data = dat()) |> + .fit_bounds(dat()) + }) |> + shiny::bindEvent(input$reset_zoom, ignoreInit = TRUE) + #----row selection---- shiny::observe({ dt <- table_dat()[rlang::`%||%`(input$table_rows_selected, seq_len(nrow(table_dat()))),] @@ -189,19 +222,7 @@ app_server <- function(input, output, session) { } map_zoom(input$map_zoom) if (!is.null(cluster)) { - # b <- .get_bounds(selected_dat()) leaflet::leafletProxy('map', data = selected_dat()) |> - # (\(x) { - # if (!is.null(input$table_rows_selected)) { - # x <- - # x |> - # leaflet::fitBounds( - # b[1], b[2], b[3], b[4], - # options = list('maxZoom' = 12, 'padding' = rep(24, 2)) - # ) - # } - # return(x) - # })() |> .add_markers(selected_dat(), cluster = cluster) } }) |> @@ -238,6 +259,8 @@ app_server <- function(input, output, session) { #----misc---- shiny::observe({ show_about_us() }) |> shiny::bindEvent(input$about_us) + shiny::observe({ show_terms() }) |> + shiny::bindEvent(input$terms) shiny::observe({ shiny::invalidateLater(1e4) }) } diff --git a/R/app_ui.R b/R/app_ui.R index d2311a5..2b74b95 100644 --- a/R/app_ui.R +++ b/R/app_ui.R @@ -27,6 +27,7 @@ app_ui <- function(request) { color = 'lightblue' ), shiny::tags$head( + shinyjs::useShinyjs(), shiny::tags$style( shiny::HTML(glue::glue(" .filter_boulder_height .irs--shiny .irs-line { @@ -299,15 +300,30 @@ app_ui <- function(request) { ) ), bs4Dash::box( - title = 'Maps', + id = 'map_box', + title = 'Map', width = 12, status = 'primary', solidHeader = TRUE, - dropdownMenu = bs4Dash::actionButton( - inputId = 'toggle_clusters', - label = NULL, - status = 'warning', - size = 'xs' + dropdownMenu = list( + bs4Dash::actionButton( + inputId = 'toggle_clusters', + label = NULL, + status = 'warning', + size = 'xs' + ), + bs4Dash::actionButton( + inputId = 'fit_zoom', + label = NULL, + status = 'warning', + size = 'xs' + ), + bs4Dash::actionButton( + inputId = 'reset_zoom', + label = NULL, + status = 'warning', + size = 'xs' + ) ), leaflet::leafletOutput('map') ), @@ -359,7 +375,7 @@ app_ui <- function(request) { icon = NULL, width = NULL, class = 'bg-warning', style = 'width: 100%;', - onclick = "window.open('mailto:gus@climbwith.info?subject=ClimbWith', '_blank')" + onclick = glue::glue("window.open('mailto:gus@{.url()}?subject=ClimbWith', '_blank')") ) ), shiny::column( @@ -386,6 +402,19 @@ app_ui <- function(request) { style = 'width: 100%;' ) ) + ), + shiny::tags$br(), + shiny::fluidRow( + shiny::column( + width = 12, + shiny::actionButton( + inputId = 'terms', + htmltools::img(src = 'www/images/shield-check.svg'), ' Terms', + icon = NULL, width = NULL, + class = 'bg-info', + style = 'width: 100%;' + ) + ) ) ), golem_add_external_resources() diff --git a/R/utils_map.R b/R/utils_map.R index c1428d1..b3795c5 100644 --- a/R/utils_map.R +++ b/R/utils_map.R @@ -9,6 +9,15 @@ unname() } +.fit_bounds <- function(map, data) { + b <- .get_bounds(data) + map |> + leaflet::fitBounds( + b[1], b[2], b[3], b[4], + options = list('maxZoom' = 12, 'padding' = rep(24, 2)) + ) +} + .create_map <- function(.data) { .data |> leaflet::leaflet() |> @@ -25,28 +34,12 @@ map.locate({ setView: true, enableHighAccuracy: true, - maxZoom: 10 + maxZoom: 11 }) }" ) ) ) |> - # leaflet::addEasyButton( - # leaflet::easyButton( - # position = "topleft", - # icon = "fa-maximize", - # title = "Fit", - # onClick = leaflet::JS( - # "function(btn, map){ - # map.eachLayer(function(layer) { - # if (layer.id === 'markers') { - # // map.fitBounds(map.getLayer(layer.id).getBounds()); - # } - # }); - # }" - # ) - # ) - # ) |> .add_markers(.data) } diff --git a/inst/app/www/images/arrows-angle-contract.svg b/inst/app/www/images/arrows-angle-contract.svg new file mode 100644 index 0000000..1aa7875 --- /dev/null +++ b/inst/app/www/images/arrows-angle-contract.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/inst/app/www/images/arrows-angle-expand.svg b/inst/app/www/images/arrows-angle-expand.svg new file mode 100644 index 0000000..578d3b6 --- /dev/null +++ b/inst/app/www/images/arrows-angle-expand.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/inst/app/www/images/shield-check.svg b/inst/app/www/images/shield-check.svg new file mode 100644 index 0000000..c031ee0 --- /dev/null +++ b/inst/app/www/images/shield-check.svg @@ -0,0 +1,4 @@ + + + +