Leaflet map doesn't work with Shiny

[timror]

It is possible to get the rCharts with Shiny example working:

  #server.R
  #incomplete example
  output$myChart <- renderChart({
    names(iris) = gsub("\\.", "", names(iris))
    p1 <- rPlot(input$x, input$y, data = iris, color = "Species", 
                facet = "Species", type = 'point')
    p1$addParams(dom = 'myChart')
    return(p1) 
  })

#ui.R
#incomplete example
showOutput("myChart", "polycharts"),

But when I try to run the following to create a Leaflet map it doesn't show anything.

  #server.R
  #incomplete example
  output$myChart2 <- renderMap({  
    map3 <- Leaflet$new()
    map3$setView(c(51.505, -0.09), zoom = 13)
    map3$marker(c(51.5, -0.09), bindPopup = "<p> Hi. I am a popup </p>")
    map3$marker(c(51.495, -0.083), bindPopup = "<p> Hi. I am another popup </p>")
    return(map3)
  })

 #ui.R
 #incomplete example
 showOutput("myChart2", "leaflet")

[ramnathv]

You need to explicitly set the dom id of the map, and also specify a minimum height for it to show up. In future versions, we will try to remove these two limitations.

# server.R
require(shiny)
require(rCharts)
shinyServer(function(input, output){
 output$myChart2 <- renderMap({
    map3 <- Leaflet$new()
    map3$setView(c(51.505, -0.09), zoom = 13)
    map3$marker(c(51.5, -0.09), bindPopup = "Hi. I am a popup")
    map3$marker(c(51.495, -0.083), bindPopup = "Hi. I am another popup")
    map3$set(dom = 'myChart2')
    map3
 })
})

# ui.R
require(shiny)
require(rCharts)
shinyUI(basicPage(
    tags$style('.leaflet {height: 400px;}'),
    showOutput('myChart2', 'leaflet')  
))

[ramnathv]

UPDATE. I pushed a fix, which eliminates the need to explicitly set the height of the map. It is now taken care by renderMap. You will still have to explicitly refer to the dom id.

[timror]

tnx for the quick respond. You fix works fine for me.

This makes the rCharts even better

[ramnathv]

Glad that it worked for you!

[jimcrozier]

Hey Ramnath, thank you so much for all of your hard work on this package. It is truly remarkable and I am loving it. Just in case anyone else is having trouble getting a leaflet map to insert into a mainPanel, below is the code (modified from above) that is working for me.

# ui.R
require(shiny)
require(rCharts)
shinyUI(pageWithSidebar(
  headerPanel("test"),
  sidebarPanel(),
  mainPanel(
    tabsetPanel(
      tabPanel("map", tags$style('.leaflet {height: 400px;}'),showOutput('myChart2', 'leaflet'))
    )
  )
))

# server.R (from above, credit @ramnathv)
require(shiny)
require(rCharts)
shinyServer(function(input, output){
 output$myChart2 <- renderMap({
    map3 <- Leaflet$new()
    map3$setView(c(51.505, -0.09), zoom = 13)
    map3$marker(c(51.5, -0.09), bindPopup = "Hi. I am a popup")
    map3$marker(c(51.495, -0.083), bindPopup = "Hi. I am another popup")
    map3$set(dom = 'myChart2')
    map3
 })
})

[ramnathv]

Thanks for posting it here @jimcrozier. Can you also post it as a gist with ui.R and server.R so that anyone who wants to try it can use the runGist function that ships with Shiny.

Moreover, if you have some interesting applications that you can share the code for and the final result, I would appreciate if you can add it to the rCharts gallery. The idea is to create a searchable repository of examples with the code that would enable anyone to reproduce a plot.

[jimcrozier]

Thanks. I will post the app on gist when it is finished. Out of curiosity, if I have a leaflet map created (not through rCharts) that I wanted to render to a tabPanel would it be possible to harness showOutput() (or something similar) to hit an html that I stored under the /www folder? I know that it is hacky, but I am not familiar enough with rCharts (getting there, slowly but surely) to include all of the js packages and options that I am currently using with leaflet. It seems that you are doing something similar with the rCharts output that is hitting appData, but I haven't been able to figure it out. Thanks again.

[ramnathv]

Yes you can use mapOutput. It essentially adds the js and css resources required as well as a wrapper that contains the map. On the server side, instead of using renderChart, you can use renderUI and includeHTML to directly include the script used to produce your leaflet plot.

If you provide me with a link to your source code, I might be able to help better.

[jimcrozier]

Wow! That worked like a freaking charm! +1000. Thank you so much. Just awesome.

[ramnathv]

Glad to be of help. Can you close the issue, if it is completely resolved?

[jimcrozier]

Sorry, but I do not believe that I have any issues open.

[ramnathv]

Oh my bad. I see that this issue was started by someone else.

[jrcharlton]

Hi Ramnath,

I'm having an issue that might bring this problem up again. What I'm going to do is provide a simple server.R file, and then show you what UI works and then several UI's that don't.

What I'm trying to do is have multiple tabPanels, and within one of those tabPanels have a leaflet map that has below it (or above it) a plot (i.e. from ggplot).

Here's a simple example of what works:

#  server.R
library(shiny)
library(rCharts)
library(ggplot2)
library(leaflet)

data(uspop2000)
base_df <- head(uspop2000[which(uspop2000$State == "AL"), ])


shinyServer(function(input, output){

 output$myChart1 <- renderPlot({
                                pop_plot <- ggplot(base_df, aes(x = City, y = Pop2000)) +
                                                geom_bar(stat = "identity")
                                print(pop_plot)
                              })

 output$myChart2 <- renderMap({
    map3 <- Leaflet$new()
    map3$setView(c(37.45, -93.85), zoom = 5)
    map3$marker(c(37.45, -93.85), bindPopup = "Hi. I am a popup")
    map3$marker(c(37.45, -93.85), bindPopup = "Hi. I am another popup")
    map3$set(dom = 'myChart2')
    map3
 })
})

# ui.R - Version that works
library(shiny)
library(rCharts)
library(ggplot2)
library(leaflet)


shinyUI(pageWithSidebar(
  headerPanel("test"),
  sidebarPanel(),
  mainPanel(
    tabsetPanel(
      tabPanel("map2", tags$style('.leaflet {height: 400px;}'),showOutput('myChart2', 'leaflet'), plotOutput("myChart1"))
    )
  )
))

# ui.R Version that doesn't work
library(shiny)
library(rCharts)
library(ggplot2)
library(leaflet)


shinyUI(pageWithSidebar(
  headerPanel("test"),
  sidebarPanel(),
  mainPanel(
    tabsetPanel(
      tabPanel("map2", tags$style('.leaflet {height: 400px;}'),showOutput('myChart2', 'leaflet'), plotOutput("myChart1")),
      tabPanel("test",plotOutput("myChart1"))
    )
  )
))

So what I'm trying to do is have multiple panels, one of which has panel with a ggplot Plot and the leaflet map, while another panel has some other plot. I've already discovered that it's not so much the multiple panels (or simply that). I can have a single leaflet plot in one tabPanel, and multiple graphs and plots in other tabPanels, but the moment I have the following condition: multiple tabPanels, one of which has a leaflet plot and some other output object, not one of the panels works.

Thank you in advance so very much for your help.

[ramnathv]

Two things.

1. renderMap was updated such that you no longer have to explicitly add the styling or the dom id.
2. You have duplicate bindings for myChart1, which was causing the application to fail.

I have a working version of your app in a gist. You can run it using

shiny::runGist("https://gist.github.com/ramnathv/e1e04ffa03e405e36fe7")

Let me know if this works for you.

[jrcharlton]

SUPER THUMBS UP!!!

You are the MAN!!!

[aishwarya91]

It worked for me as well