0

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%"))
Masoud
  • 535
  • 3
  • 19

1 Answers1

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))
Jumble
  • 1,128
  • 4
  • 10
  • Could you see my other questions? Some of them need JavaScript code! For example https://stackoverflow.com/questions/68342915/use-circle-instead-rectangle-for-select-reign-in-leaflet need to design a button that can select points by circle or lasso shape. – Masoud Jul 15 '21 at 15:20