Fade screen when updating map

[Zekiye-VAP]

Describe the bug
I am working on a shiny app where you can click on the map and add a point based on the coordinates of the click. The new point details are added to a reactive dataframe however I have encountered an issue where the map fades out after it has been updated with the new point. The new point can be seen on the map so it is added correctly but not sure why it fades. The map is still functional and you can keep adding new points but it remains faded.

Screenshots

To Reproduce

library(shiny)
library(mapdeck)
library(tidyverse)

set_token(ADD MAPDECK TOKEN HERE)

shinyApp(
  ui = fluidPage(
    title = "Mapdeck add feature",
    fluidRow(
      mapdeckOutput("map", height = '800', width = '101%')
    )
  ),
  server = function(input, output, session) {
    
    # initialise reactive (this would have couple of hundred records in working version)
    note_layer <- reactiveVal(
      data.frame(
        id = 1,
        text = 'Footscray',
        lon = 144.892357,
        lat = -37.7988987,
        type = 1
      )
    )
    
    # base map with existing points
    output$map <- renderMapdeck({
      mapdeck(style = mapdeck_style("outdoors"),
              location = c(144.959,-37.8125),
              zoom = 9.15,
              bearing = 0,
              pitch = 40,
              max_pitch = 90) %>%
        add_pointcloud(
          data = note_layer() %>% mutate(text = paste0("<h5>", text, "</h5>")),
          layer_id = "note",
          lat = "lat",
          lon = "lon",
          radius = 10,
          fill_opacity = .7,
          fill_colour = "type",
          update_view = F,
          tooltip = "text"
        )      
    })
    
    # map click handling
    observeEvent(input$map_click, {
      add_feature_to_df(input$map_click$coordinate[[2]], input$map_click$coordinate[[1]])
    })
    
    point_lon <- reactiveVal()
    point_lat <- reactiveVal()
    
    add_feature_to_df <- function(lat_cord,lon_cord){
      point_lon(lon_cord)
      point_lat(lat_cord)
      add_feature()
    }
    
    add_feature <- function() {
      showModal(
        modalDialog(
          tags$h2("Add description to point"),
          textAreaInput("desc", 
                        "Description (accepts HTML formatting)"),
          footer=tagList(
            actionButton('submit', 'Submit'),
            modalButton('Cancel')
          )
        )
      )
    }
    
    #save new point details to reactive
    observeEvent(input$submit, {
      removeModal()
      note_layer(
        rbind(
          note_layer(), 
          data.frame(
            id = rnorm(1),
            text = ifelse(input$desc == "","No Description", input$desc),
            lon = point_lon(),
            lat = point_lat(),
            type = 1
          )
        )
      )
    })
    
    #update map
    observeEvent(note_layer(), {
      mapdeck_update(map_id = "map") %>%
        add_pointcloud(
          data = note_layer() %>% mutate(text = paste0("<h5>", text, "</h5>")),
          layer_id = "note",
          lat = "lat",
          lon = "lon",
          radius = 10,
          fill_opacity = .7,
          fill_colour = "type",
          update_view = F,
          tooltip = "text"
        )
    }, ignoreInit = T)    
  }
)

[dcooley]

I don't get this 'fade' you're seeing.

what browser are you using, and are there any errors in its console?

[Zekiye-VAP]

I am using a chrome browser. We have tested it on two separate computers now and get the same issue. Not sure if these warnings are related but this is what is in the console when I start the app. No new errors come up when the fade overlay appears. The fade is from the 'mapdeckmap recalculating' class.

[dcooley]

'mapdeckmap recalculating'

what / where is this class?

[Zekiye-VAP]

I think it is just the shiny CSS class for recalculating, not sure what triggers it

[dcooley]

ok I think you've found this issue in the latest version of shiny

I think you can put the temporary fix in the ui

  ui = fluidPage(
    title = "Mapdeck add feature",
    tags$head(
      tags$style(
        HTML(
          ".mapdeckmap.recalculating {
            --shiny-fade-opacity: 1;
          }"
        )
      )
    ),
    fluidRow(
      mapdeckOutput("map", height = '800', width = '101%')
    )
  )

But I haven't tested this.