Color problem when using different tiles providers?

[BastienFR]

I've noticed the the color used to with addGlifyPolygons doesn't work for all tile providers.

See RE:

# loading the libraries
library(sf)  
library(leaflet)
library(leaflet.glify)
library(colourvalues)

# preparing the shapefile
nc <- st_read(system.file("gpkg/nc.gpkg", package="sf"), quiet = TRUE) %>% 
  st_transform(st_crs(4326)) %>% 
  st_cast('POLYGON')

# setting the colors
cols = colour_values_rgb(nc$AREA, palette = "inferno", include_alpha = FALSE) / 255

# making the first map like in your example:
leaflet() %>%
  addProviderTiles(provider = providers$CartoDB.DarkMatter) %>%
  leaflet.glify:::addGlifyPolygons(nc, color = cols) %>% 
  fitBounds(lng1 = unname(st_bbox(nc)$xmin), lng2 = unname(st_bbox(nc)$xmax), lat1 = unname(st_bbox(nc)$ymin), lat2 = unname(st_bbox(nc)$ymax))

# making the second map with a different tile provider:
leaflet() %>%
  addProviderTiles(provider = providers$OpenStreetMap.Mapnik) %>%
  leaflet.glify:::addGlifyPolygons(nc, color = cols) %>% 
  fitBounds(lng1 = unname(st_bbox(nc)$xmin), lng2 = unname(st_bbox(nc)$xmax), lat1 = unname(st_bbox(nc)$ymin), lat2 = unname(st_bbox(nc)$ymax))

Do you know what the problem is?

[tim-salabim]

Can you provide your sessionInfo() please?
I see:

leaflet() %>%
  addProviderTiles(provider = providers$CartoDB.DarkMatter) %>%
  leaflet.glify:::addGlifyPolygons(nc, color = cols) %>% 
  fitBounds(lng1 = unname(st_bbox(nc)$xmin), 
            lng2 = unname(st_bbox(nc)$xmax),
            lat1 = unname(st_bbox(nc)$ymin),
            lat2 = unname(st_bbox(nc)$ymax))

# making the second map with a different tile provider:
leaflet() %>%
  addProviderTiles(provider = providers$OpenStreetMap.Mapnik) %>%
  leaflet.glify:::addGlifyPolygons(nc, color = cols) %>% 
  fitBounds(lng1 = unname(st_bbox(nc)$xmin), 
            lng2 = unname(st_bbox(nc)$xmax),
            lat1 = unname(st_bbox(nc)$ymin),
            lat2 = unname(st_bbox(nc)$ymax))

Session info (click to view)

R version 3.5.1 (2018-07-02)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

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

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

other attached packages:
[1] colourvalues_0.1.1  leaflet.glify_0.1.0 leaflet_2.0.2       sf_0.7-0           

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.18    magrittr_1.5    units_0.6-1     xtable_1.8-3    R6_2.2.2        tools_3.5.1     grid_3.5.1     
 [8] e1071_1.7-0     DBI_1.0.0.9000  rapidjsonr_1.1  htmltools_0.3.6 crosstalk_1.0.0 class_7.3-14    yaml_2.2.0     
[15] digest_0.6.17   shiny_1.1.0     spData_0.2.9.3  later_0.7.3     htmlwidgets_1.2 promises_1.0.1  mime_0.5       
[22] geojsonsf_1.2   compiler_3.5.1  classInt_0.2-3  jsonlite_1.5    httpuv_1.4.5

[BastienFR]

R version 3.4.4 (2018-03-15)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 16.04.4 LTS

Matrix products: default
BLAS: /usr/lib/atlas-base/atlas/libblas.so.3.0
LAPACK: /usr/lib/atlas-base/atlas/liblapack.so.3.0

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=en_US.UTF-8        LC_COLLATE=en_US.UTF-8     LC_MONETARY=en_US.UTF-8   
 [6] LC_MESSAGES=en_US.UTF-8    LC_PAPER=en_US.UTF-8       LC_NAME=C                  LC_ADDRESS=C               LC_TELEPHONE=C            
[11] LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       

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

other attached packages:
[1] colourvalues_0.1.1  leaflet.glify_0.1.0 leaflet_2.0.2       sf_0.7-2           

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.19    magrittr_1.5    units_0.6-1     xtable_1.8-2    R6_2.3.0        tools_3.4.4     grid_3.4.4      e1071_1.6-8     DBI_1.0.0      
[10] rapidjsonr_1.1  htmltools_0.3.6 crosstalk_1.0.0 class_7.3-14    yaml_2.2.0      digest_0.6.18   shiny_1.1.0     spData_0.2.8.3  later_0.7.2    
[19] htmlwidgets_1.3 promises_1.0.1  mime_0.5        geojsonsf_1.2   compiler_3.4.4  classInt_0.2-3  jsonlite_1.5    httpuv_1.4.3   

Working on Rstudio server

[BastienFR]

Considering you didn't have the problem, I did more test on my side. I've tried to use this code on my windows machine. Actually, in that case, the result is even worst, I get nothing display for the first map and only the tiles with no polygons for the second call. here is my sessionInfo for me Windows machine. All my packages are up to date but R is 3.5.0.

R version 3.5.0 (2018-04-23)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows Server >= 2012 x64 (build 9200)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252    LC_MONETARY=English_United States.1252
[4] LC_NUMERIC=C                           LC_TIME=English_United States.1252    

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

other attached packages:
[1] colourvalues_0.1.1  leaflet.glify_0.1.0 leaflet_2.0.2       sf_0.7-1           

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.19    magrittr_1.5    units_0.6-1     xtable_1.8-3    R6_2.3.0        tools_3.5.0     grid_3.5.0     
 [8] e1071_1.7-0     DBI_1.0.0       rapidjsonr_1.1  htmltools_0.3.6 crosstalk_1.0.0 class_7.3-14    yaml_2.2.0     
[15] digest_0.6.18   shiny_1.1.0     spData_0.2.9.4  later_0.7.5     htmlwidgets_1.3 promises_1.0.1  mime_0.6       
[22] geojsonsf_1.2   compiler_3.5.0  classInt_0.2-3  jsonlite_1.5    httpuv_1.4.5  

[tim-salabim]

Are your problems in RStudio viewer, the browser or both? And which browser are you using? Chrome does normally not allow local files to be served, so nothing may be displayed. Firefox usually works fine.
Regarding your second problem, can you please open the map in a browser (Firefox) and post a screenshot of the console (press ctrl + shift + i)?

[BastienFR]

I'm continuing my tests both on windows and linux. On windows:

• Updated everything (all packages, R and Rstudio): Same problem

• Close Rstudio an ran the script in Base R gui and open the html with both Firefox and Chrome (both Firefox and Chrome gave the same results):

  • Openstreet map:
    

  • CartoDB:
    

• In this case, both tiles show up (which is not the case in Rstudio where only the OpenStreet tiles show up). However, I still don't get my actual shape (nc). This may be unrelated to the original problem that I posted as it do not seems link with the colors. If I remove the colors=cols argument, I still don't see my shape.

For the problem on my linux machine, I'm currently updating my machine and it's taking a long time. I'll post my results as soon as I have them.

[tim-salabim]

Thanks! Can you please also provide screeshots with those that show the console, not the inspector.

[BastienFR]

oups, sorry...

hope it's ok this time­...

[BastienFR]

For Linux: I'm on rstudio Server, running on a azure virtual machine with ubuntu 16.04 and called by Chrome on my local windows machine. I can't use firefox on this machine, corporate policy... I've updated all R and the packages but I didn't update my Rstudio server. If I run the script, I get the same thing as before the update. see below:

• Openstreet map:

  • before the console:
    
  • After the console (when I open the console, my map disappear...):
    

• for cartoDB:

  • before the console:
    

  • after the console:
    

[tim-salabim]

Perfect thanks!
Now can you post a screenshot of the (beginning of) "glpolygons_data.json" mentioned in the first XML-parsing error? You can just navigate to that folder and open it in the browser or press ctrl+u in the tab with the map. A new tab should open where you should see a link to that file - just click on it

[BastienFR]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="lib/htmlwidgets-1.3/htmlwidgets.js"></script>
<script src="lib/jquery-1.12.4/jquery.min.js"></script>
<link href="lib/leaflet-1.3.1/leaflet.css" rel="stylesheet" />
<script src="lib/leaflet-1.3.1/leaflet.js"></script>
<link href="lib/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<script src="lib/Proj4Leaflet-1.0.1/proj4-compressed.js"></script>
<script src="lib/Proj4Leaflet-1.0.1/proj4leaflet.js"></script>
<link href="lib/rstudio_leaflet-1.3.1/rstudio_leaflet.css" rel="stylesheet" />
<script src="lib/leaflet-binding-2.0.2/leaflet.js"></script>
<script src="lib/leaflet-providers-1.1.17/leaflet-providers.js"></script>
<script src="lib/leaflet-providers-plugin-2.0.2/leaflet-providers-plugin.js"></script>
<script src="lib/addGlifyPoints-0.0.1/addGlifyPoints.js"></script>
<script src="lib/addGlifyPoints-0.0.1/addGlifyPolygons.js"></script>
<script src="lib/addGlifyPoints-0.0.1/glify.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/js/canvasoverlay.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/js/gl.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/js/index.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/js/map-matrix.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/js/points.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/js/shapes.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/js/utils.js"></script>
<script src="lib/addGlifyPoints-0.0.1/src/shader/fragment/dot.glsl"></script>
<script src="lib/addGlifyPoints-0.0.1/src/shader/fragment/point.glsl"></script>
<script src="lib/addGlifyPoints-0.0.1/src/shader/fragment/polygon.glsl"></script>
<script src="lib/addGlifyPoints-0.0.1/src/shader/fragment/puck.glsl"></script>
<script src="lib/addGlifyPoints-0.0.1/src/shader/fragment/simple-circle.glsl"></script>
<script src="lib/addGlifyPoints-0.0.1/src/shader/fragment/aquare.glsl"></script>
<script src="lib/addGlifyPoints-0.0.1/src/shader/vertex/default.glsl"></script>
<link id="glpolygonsdt-1-attachment" rel="attachment" href="lib/glpolygonsdt-1/glpolygons_data.json"/>
<link id="glpolygonscl-1-attachment" rel="attachment" href="lib/glpolygonscl-1/glpolygons_color.json"/>

</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
  <div id="htmlwidget-6895209d5e1286c1bf2f" style="width:100%;height:400px;" class="leaflet html-widget"></div>
</div>
<script type="application/json" data-for="htmlwidget-6895209d5e1286c1bf2f">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["CartoDB.DarkMatter",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addGlifyPolygons","args":["glpolygonsdt","glpolygonscl",null,0.6,10]}],"fitBounds":[33.8821646134549,-84.3237734916375,36.5897678106392,-75.4565804266542,[]]},"evals":[],"jsHooks":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-6895209d5e1286c1bf2f">{"viewer":{"width":"100%","height":400,"padding":0,"fill":true},"browser":{"width":"100%","height":400,"padding":0,"fill":true}}</script>
</body>
</html>

Is that it?

[BastienFR]

The other option is:

[tim-salabim]

can you just click on link id="glpolygonsdt-1-attachment" rel="attachment" href="lib/glpolygonsdt-1/glpolygons_data.json" in this tab please. The href part should be clickable

[BastienFR]

`{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"id":1},"geometry":{"type":"Polygon","coordinates":[[[-81.47257911591413,36.23448491106877],...

[tim-salabim]

Did you put that first ` there? Or is this part of what you see in the browser? A screenshot would be better

[BastienFR]

I don't see the ` you are talking about.