CODEWITHSUNDEEP
htmlrshinyr-leaflet
Heliornis
Heliornis

Reputation: 391

Overlay fileInput on leaflet in shiny

I have a leaflet map in a shiny app. It takes a file from a user and plots that data. It's kind of ugly right now, though. I'd really like to have the fileInput to be overlaid on the leaflet map. In other words, I want the page to be entirely the leaflet map, but with the file input floating above it, similar to the zoom button.

I want the fileInput upload button to to look kind of like the elements of this shiny app. It has logos overlaid on the top left, as well as checkboxes overlaid on the left and a title overlaid on the top right.

Here's a basic (over-simplified) outline of my app:

library(shiny)
library(shinydashboard)
library(leaflet)


shinyApp(
  ui <- bootstrapPage(
    fileInput("file_in", label = "label"),
    tags$style(type="text/css", "html, body {width:100%;height:100%}"),
    leafletOutput("myMap", width="100%", height="100%")
  ),

  server = function(input, output) {

    my_table <- reactive({

      inFile <- input$file_in
      if (is.null(inFile))
        return(NULL)

      myData = read.csv(inFile$datapath)

      return(myData)
    })

    output$myMap = renderLeaflet({
      if(is.null(my_table()))
      {
        return(leaflet()) %>% addTiles()
      }
      else
      {
        leaflet(data = my_table()) %>% addTiles()
      }
    })
  }
)

Upvotes: 0

Views: 438

Answers (1)

Heliornis
Heliornis

Reputation: 391

I did this by using absolutePanel(..., fileInput()) in the ui.

Upvotes: 0

Related Questions