r-spatial / mapview

Interactive viewing of spatial data in R
https://r-spatial.github.io/mapview/
GNU General Public License v3.0
519 stars 90 forks source link

Raster doesn't display in mapview/leaflet when using in Shiny together with cubeViewOutput #62

Open lukysmarek opened 7 years ago

lukysmarek commented 7 years ago

Hi, and thanks for an awesome package. I've been playing with Shiny, leaflet and cubeView and hit an issue that I don't know whether it is mine own, a computer's one, or made by some possible interference in mapview package. When cubeViewOutput is deployed in one of the panels, the raster layer in leaflet (or mapview) panel is not displayed (no error or warning). It is not an issue with points that are working as expected. Everything works fine also when the cubeViewOutput is removed from the panel.

Minimal reproducible example:

ui.R

library(shiny)
library(leaflet)
library(mapview)

shinyUI(navbarPage("App", 
                   tabPanel("Map",
                            div(class="outer",
                                tags$style(type = "text/css", ".outer {position: fixed; top: 50px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
                                leafletOutput("map", width = "100%", height = "100%")
                            )
                   ),
                   tabPanel("3D explorer",
                            cubeViewOutput("cubemap", width = "auto", height = "auto")
                   )
)
)

server.R

library(shiny)
library(leaflet)
library(raster)
library(mapview)

gp.stack <- stack(system.file("extdata", "kiliNDVI.tif", package = "mapview"))

shinyServer(function(input, output, session) {

  output$map <- renderLeaflet({
    leaflet() %>% addTiles() %>%
      addRasterImage(gp.stack[[1]], opacity = 0.5, project = TRUE, layerId="rasimg")
  })

  output$cubemap <- renderCubeView({
    cubeView(gp.stack)})
})

SessionInfo

R version 3.3.2 (2016-10-31)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1

locale:
[1] LC_COLLATE=English_New Zealand.1252  LC_CTYPE=English_New Zealand.1252    LC_MONETARY=English_New Zealand.1252
[4] LC_NUMERIC=C                         LC_TIME=English_New Zealand.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] raster_2.5-8       sp_1.2-4           mapview_1.2.34     leaflet_1.1.0.9000 shiny_1.0.0       

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.9        RColorBrewer_1.1-2 git2r_0.18.0       plyr_1.8.4         base64enc_0.1-3    R.methodsS3_1.7.1 
 [7] R.utils_2.5.0      iterators_1.0.8    tools_3.3.2        gdalUtils_2.0.1.7  digest_0.6.12      jsonlite_1.1      
[13] viridisLite_0.1.3  satellite_0.2.0    memoise_1.0.0      lattice_0.20-34    png_0.1-7          foreach_1.4.3     
[19] DBI_0.5-1          crosstalk_1.0.0    parallel_3.3.2     yaml_2.1.14        curl_2.3           rgdal_1.2-5       
[25] quickmapr_0.2.0    withr_1.0.2        httr_1.2.1         rgeos_0.3-22       htmlwidgets_0.8    devtools_1.12.0   
[31] webshot_0.4.0      stats4_3.3.2       grid_3.3.2         sf_0.3-4           R6_2.2.0           udunits2_0.13     
[37] magrittr_1.5       units_0.4-2        scales_0.4.1       codetools_0.2-15   htmltools_0.3.5    rsconnect_0.7     
[43] mime_0.5           xtable_1.8-2       colorspace_1.3-2   httpuv_1.3.3       munsell_0.4.3      R.oo_1.21.0 
tim-salabim commented 7 years ago

Hi, sorry for the late reply. I am not sure what is going on here, in the chrome console I see the following:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
three.min.js:639 THREE.WebGLRenderer 74
2three.min.js:708 THREE.WebGLProgram: gl.getProgramInfoLog() 
6127.0.0.1/:1 [.Offscreen-For-WebGL-0x7f592fdd98a0]RENDER WARNING: there is no texture bound to the unit 0

but I have no idea what that actually means. I will need to dig into this deeper, but I am no expert in js or html. Maybe @bhaskarvk has an idea about what is happening here?