Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible to trigger leaflet map rendering on non-selected tab? #659

Closed
JoshOBrien opened this issue Jan 3, 2020 · 3 comments · Fixed by #771
Closed

Possible to trigger leaflet map rendering on non-selected tab? #659

JoshOBrien opened this issue Jan 3, 2020 · 3 comments · Fixed by #771

Comments

@JoshOBrien
Copy link

JoshOBrien commented Jan 3, 2020

tldr: Should outputOptions(output, "map", suspendWhenHidden = FALSE) work when "map" is a leafletOutput object located on a hidden tab? If it should work, am I doing something wrong in how I am calling it?


I have a two-tabbed shiny app in which users upload a number of spatial layers on the "Data" tab, to then be displayed in a leaflet map on the "Map" tab. The map's background consists of tiles downloaded from the internet. The users' spatial layers are reactively rendered onto that map using leafletProxy() as they are selected.

My problem is that, if a user uploads spatial data before first visiting the "Map" tab, that uploaded data (and in fact the background map itself) does not get rendered. As @schloerke notes here, this is expected behavior for leafletProxy(): because the base map does not get rendered until the "Map" tab is first visited, when data are uploaded and the observeEvent() in which I've placed the calls to leafletProxy() is triggered, there's not yet any map rendered on top of which the spatial data could be drawn.

The cleanest solution would seem to be to force the background map to render as soon as possible after app launch, even though it is not located on the initally active/selected tab. Adding the following, as suggested by Joe Cheng (here), would seem to be the cleanest way to do that:

outputOptions(output, "map", suspendWhenHidden = FALSE) 

Unfortunately, adding a line like that to my server function seems to have no effect at all. (This StackOverflow answer notes that, at least in 2016, it was also not working, which makes me think that I'm not the only one experiencing this problem.) Should that work? And if not, why not?


I have found a couple possible workarounds, but neither of them work quite as well as I would hope setting suspendWhenHidden=FALSE should:

  • This StackOverflow answer uses shinyjs::extendShinyjs() to add some JavaScript to the app but also, unfortunately, messes up formatting on the tabs)

  • @shcloerke here showed how one can use an observeEvent that is triggered by the user's visit to the map tab, so that leafletProxy() isn't executed until the map has been triggered. That solution is quite elegant but, in my use case, has an important downside: if the user first loads a large raster and only then makes their first visit to the "map" tab, they may have to wait for up to 10 or 15 seconds before anything (map or overlay) is rendered on that page.


Here is a minimal working example demonstrating my issue. Note that, if one first clicks the "Upload raster layer" button and then moves to the "Map" tab, the data never gets rendered. If one first visits the "Map" tab and then uploads the data, it will get rendered.

library(shiny)
library(leaflet)
library(raster)

ui <- navbarPage("leafletProxy demo",
                 id = "active_tab",
   tabPanel("Data",
            actionButton("add_raster", "Upload raster layer")),
    tabPanel("Map",
             leafletOutput("Map"))
   )


server <- function(input, output, session) {

    RV <- reactiveValues(overlay = NULL)

    ## Large (many-celled) raster to be added via leafletProxy()
    observeEvent(input$add_raster, {
        r <- raster(matrix(1:3e6, 1500, 2000, byrow = TRUE),
                    xmn = -120, xmx = -110, ymn = 40, ymx = 50,
                    crs = CRS("+init=epsg:4326"))
        RV$overlay <- r
    })

    ## Base map
    output$Map <- renderLeaflet({
        leaflet() %>%
            addTiles() %>%
            fitBounds(lng1 = -120, lng2 = -100, lat1 = 30, lat2 = 50)
    })

    ## ## Uncomment this block to confirm that setting `suspendWhenHidden=FALSE`
    ## ## does not actually work as hoped.
    ## outputOptions(output, "Map", suspendWhenHidden = FALSE)

    ## Dynamically updated map element
    observeEvent(RV$overlay, {
        leafletProxy("Map") %>%
            addRasterImage(RV$overlay, colors = "Spectral", opacity = 0.4)
    })
}

shinyApp(ui, server)
@schloerke
Copy link
Contributor

schloerke commented Feb 3, 2022

I was confused as well. I thought using outputOptions() would work.

I've made a PR to address this issue (and will fix many others). #771

Thank you for the great reprex, @JoshOBrien!

... What a wild and convoluted goose chase to find out where a change was useful within rstudio/leaflet.

@JoshOBrien
Copy link
Author

@schloerke Really impressive! Thanks for all the work you put into getting this fixed.

@Abhijeet1828
Copy link

This was a great solution and a fix. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants