Sidebar overlaid on a Leaflet map

[Michael G.]

First, RStudio, thank you so much for shiny! 

I've spent some hours trying to get a Leaflet map to take up the full window with the sidebar panel (and its content) overlaid on top. Similar to this: http://maps.mixedbredie.net/leaflet/index2.html

I've played with the CSS but i've only managed to stumble: setting html, body height to 100% and the #map to the same.. but only to have my map disappear)

I was hoping if someone may lend a hand--Below are the files I am playing with.

Thank you!

# server.r

library(shiny)

shinyServer(function(input, output) {})

# ui.r

library(shiny)

shinyUI(pageWithSidebar(

  headerPanel(

tags$link(rel="stylesheet", type="text/css", href="styles.css"),

  ),

  sidebarPanel(

  p("Content")

  ),

  mainPanel(

  includeHTML("mapper.html"),

  includeScript("./www/map.js")

  )

))

<!-- mapper.html -->

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

<link rel="stylesheet" type="text/css" href="styles.css" />

<div id="map"></div>

// map.js

var layer = new L.StamenTileLayer("toner-lite");

var map = new L.Map("map", {

    center: new L.LatLng(39.3199, -76.6167),

    zoom: 5,

    maxZoom: 10

});

map.addLayer(layer);

/*styles.css*/

#map { height: 700px; }

[Ramnath Vaidyanathan]

You can do this with rCharts (http://rcharts.io), an R package that I authored which provides bindings to multiple js viz libraries. Here is the code that will get you a fullscreen map in your app. Note that you will need to install the `dev` branch of `rCharts` from `github` to be able to use this.

library(shiny)
# devtools::install_github("rCharts", "ramnathv", ref = "dev")
library(rCharts)
runApp(list(
  ui = bootstrapPage(
    mapOutput("mymap")  
  ),
  server = function(input, output, session){
    output$mymap <- renderMap({
      L1 <- Leaflet$new()
      L1$setView(c(39.3199, -76.6167), 10)
      L1$tileLayer(provider = 'Stamen.TonerLite')
      L1$set(width = 1600, height = 800)
      L1
    })
  }
))