updated map controls

R/app_server.R

@@ -16,6 +16,25 @@ app_server <- function(input, output, session) {
       '<img src="www/images/toggle-on.svg"/>', 'Toggle Clusters'
     )
   )
+  shiny::updateActionButton(
+    inputId = 'fit_zoom',
+    label = shiny::HTML(
+      '<img src="www/images/arrows-angle-expand.svg"/>', 'Fit Points'
+    )
+  )
+  shiny::updateActionButton(
+    inputId = 'reset_zoom',
+    label = shiny::HTML(
+      '<img src="www/images/arrows-angle-contract.svg"/>', '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) })
 }

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()

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)
 }