单击 R 中的传单地图按钮时显示和隐藏数据表

Question

I drawn a map with a 'datatable' using some packages in R. To have more space in leaflet map, I need a button to show/hide the datatable part. How to do it? The R code is below:

library(leaflet)
library(DT)
library(crosstalk)

df <- read.csv(textConnection(
    "Name,Lat,Long
    Samurai Noodle,47.597131,-122.327298
    Kukai Ramen,47.6154,-122.327157
    Tsukushinbo,47.59987,-122.326726"
))

sdf <- SharedData$new(df, df$Name)

lflt<-leaflet(sdf) %>% addTiles() %>%
    addMarkers(~ Long, ~ Lat)%>%addEasyButtonBar(
easyButton(
 icon = htmltools::span(class = "star", htmltools::HTML("+")),
 onClick = JS("function(btn, map){ alert(\"Button 1\");}")))

bscols(lflt,      datatable(sdf, width = "100%"))

Answer 1

You could play around with the javascript and css settings? Something like below. This maybe isn't the best method, but it just changes the data table display to 'none' when the button is clicked. And also change the width of the map to 100%.

lflt<-leaflet(sdf, elementId = "map") %>% addTiles() %>%
    addMarkers(~ Long, ~ Lat)%>%addEasyButtonBar(
easyButton(
 icon = htmltools::span(class = "star", htmltools::HTML("+")),
 onClick = JS("function(btn, map){ 
    let table = document.getElementsByClassName('datatables')[0];
    let map2 = document.getElementById('map');
    table.style.display = table.style.display == 'none' ? 'block' : 'none';
    map2.parentNode.style.width = table.style.display == 'none' ? '100%' : '50%';
    map2.style.position = map2.style.position == '' ? 'relative' : '';
    map.invalidateSize()
              }")))

bscols(lflt,      datatable(sdf))