managing multiple leaflet maps with tabPanels

[Jamie Kass]

Hello, I am building a shiny app that has multiple tabPanels, each with their own leaflet map. I want to plot points on the first tabPanel, then when I go to the second tabPanel I want those same points to show up. Then I can press a button to thin those points, and I want it to me which were thinned by making the ones retained a different color. I thought this would require having one map that is rendered on both tabPanels, but I guess that's not possible (am I wrong?), so I made two leaflet() instances and simply plotted them identically with an actionButton click on the first tabPanel. However, the map in the second tabPanel is not identical to the first. A weird bug is that it does plot identically if you switch to the second tabPanel before pressing the actionButton on the first, then switch back and press the button. But it's not centered appropriately and remains statically zoomed out. It appears that the behavior works in this case, but the zoom never changes despite a call to fitBounds().

I made and attached a simplified case to demonstrate the issue. Is there a good way to approach this problem? Did I discover a bug or am I simply not doing things correctly? Thanks for your help.

[Joe Cheng]

Can you try upgrading htmlwidgets and leaflet, and restarting R, then trying again? We fixed some bugs related to this recently. Thanks.

devtools::install_github(c("ramnathv/htmlwidgets", "rstudio/leaflet"))

On Thu, May 28, 2015 at 1:55 PM, Jamie Kass <jamie....@gmail.com> wrote:

Hello, I am building a shiny app that has multiple tabPanels, each with their own leaflet map. I want to plot points on the first tabPanel, then when I go to the second tabPanel I want those same points to show up. Then I can press a button to thin those points, and I want it to me which were thinned by making the ones retained a different color. I thought this would require having one map that is rendered on both tabPanels, but I guess that's not possible (am I wrong?), so I made two leaflet() instances and simply plotted them identically with an actionButton click on the first tabPanel. However, the map in the second tabPanel is not identical to the first. A weird bug is that it does plot identically if you switch to the second tabPanel before pressing the actionButton on the first, then switch back and press the button. But it's not centered appropriately and remains statically zoomed out. It appears that the behavior works in this case, but the zoom never changes despite a call to fitBounds().

I made and attached a simplified case to demonstrate the issue. Is there a good way to approach this problem? Did I discover a bug or am I simply not doing things correctly? Thanks for your help.

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/a3e402ea-dcee-4f04-9b47-34bc07ca40a0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jamie Kass]

Joe, just reinstalled both packages and the behavior has not changed. Could you check out my example and tell me what's going on? Thanks.

[Joe Cheng]

I think the problem here is that when a Leaflet map (or any HTML element) is hidden, its size is 0 pixels by 0 pixels. Leaflet isn't designed to work well when you send it commands (like fitBounds) while it's sized like that. We tried to work around this problem in some scenarios by delaying rendering the map until it's actually visible--but I didn't take into account leafletProxy(), so I'm not sure what other bugs are still lurking when you use leafletProxy on a hidden map.

Those are things we should try to figure out before the Leaflet package goes to CRAN. But in the meantime, I think you'd be better served by reorganizing the UI to have a single map, if that's your intention. I'd create a UI where only the inputs are in tabs, maybe like this:

library(shiny)

library(leaflet)

ui <- fluidPage(

  h1("My app"),

  fluidRow(

    column(4,

      tabsetPanel(

        tabPanel("A",

          "Controls"

        ),

        tabPanel("B",

          "More controls"

        )

      )

    ),

    column(8,

      leafletOutput("map", height = 600)

    )

  )

)

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

  output$map <- renderLeaflet({

    leaflet() %>% addTiles()

  })

}

shinyApp(ui, server)

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/cfd85972-82d6-4846-97ff-5848855f6e7f%40googlegroups.com.

[gregory...@thehartford.com]

Joe,

Any idea if a fix to the leaflet binding, and particular leafletProxy, is in the works at RStudio? This issue is turning into an impediment to implementing Shiny apps with some of our business customers.

Thanks,

Greg

[Joe Cheng]

Can you file an issue at https://github.com/rstudio/leaflet/issues/new, preferably with a repro case? I haven't looked at leaflet in a number of months but we are now trying to get additional (paid) help to address the backlog.

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/9289813f-3dd9-4805-9555-0f098e758115%40googlegroups.com.

[Strabel, Gregory D (Actuarial)]

Will do. Thanks for the quick response!

************************************************************
This communication, including attachments, is for the exclusive use of addressee and may contain proprietary, confidential and/or privileged information.  If you are not the intended recipient, any use, copying, disclosure, dissemination or distribution is strictly prohibited.  If you are not the intended recipient, please notify the sender immediately by return e-mail, delete this communication and destroy all copies.
************************************************************