Markers not showing in leaflet map

[pomchip]

Hi

I have just started to use leaflet and am experiencing issues showing markers on a basic map. The network tab in my web browser reports that the GET http://cdn.leafletjs.com/leaflet/v1.3.1/images/marker-icon.png
and GET http://cdn.leafletjs.com/leaflet/v1.3.1/images/marker-shadow.pngrequests return a 403 error code.

data(quakes)
leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag), label = ~as.character(mag))

Can you please suggest a way forward?

My session info

R version 4.1.2 (2021-11-01)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Linux Mint 20.3

Matrix products: default
BLAS:   /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.9.0
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.9.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] leaflet_2.1.0

loaded via a namespace (and not attached):
 [1] pillar_1.6.4            compiler_4.1.2          tools_4.1.2             rorcid_0.7.0            digest_0.6.29           jsonlite_1.7.2         
 [7] evaluate_0.14           lifecycle_1.0.1         tibble_3.1.6            pkgconfig_2.0.3         rlang_0.4.12            DBI_1.1.2              
[13] crosstalk_1.2.0         crul_1.2.0              curl_4.3.2              yaml_2.2.1              xfun_0.29               fastmap_1.1.0          
[19] dplyr_1.0.7             httr_1.4.2              stringr_1.4.0           knitr_1.37              leaflet.providers_1.9.0 htmlwidgets_1.5.4      
[25] fauxpas_0.5.0           generics_0.1.1          vctrs_0.3.8             tidyselect_1.1.1        vitae_0.5.1             glue_1.6.0             
[31] httpcode_0.3.0          R6_2.5.1                fansi_1.0.2             rmarkdown_2.11          xaringan_0.23           tidyr_1.1.4            
[37] purrr_0.3.4             magrittr_2.0.1          whisker_0.4             ellipsis_0.3.2          htmltools_0.5.2         assertthat_0.2.1       
[43] utf8_1.2.2              stringi_1.7.6           crayon_1.4.2 

[jlacko]

Your code is legit, and I confirm that there seems to be an issue on the leaflet.js side. Somewhat unexpected, but do have a look at the project website: https://leafletjs.com/

As a workaround I would suggest either using addCircleMarkers() or addAwesomeMarkers() - the first would add plain circles in place of markers (I find these less distracting than the pin shaped markers, but that could be just me...) and the second uses markers with icons.

Or consider this code

library(leaflet)

data(quakes)

# a single icon is declared
awesome <- makeAwesomeIcon(
  icon = "info",
  iconColor = "black",
  markerColor = "blue",
  library = "fa"
)


leaflet(data = quakes[1:20,]) %>%
  addTiles() %>%
  addAwesomeMarkers(~long,
                   ~lat,
                   icon = awesome,
                   popup = ~as.character(mag),
                   label = ~as.character(mag))

On an unrelated note: while it is technically legit to have both popup and label with the same content (magnitude of the earthquake) it seems somewhat odd... I would pick just one, and dropped the other.

[pomchip]

Thanks @jlacko

Somewhat unexpected, but do have a look at the project website: https://leafletjs.com/

Thanks for the link and the reality check! I did not realize that there might be a connection

Coming back to the issue at hand and your suggestions to use addAwesomeMarkers, I experimented with this based upon various tutorials/bloq posts listed by DuckDuckGo search but faced another problem: how to tell leaflet it must use the v5 or v6 fontawesome library? Cursory testing suggests that the v4.7 library is used.

library(leaflet)

data(quakes)

# a single icon is declared
awesome <- makeAwesomeIcon(
  icon = "house-medical",
  iconColor = "black",
  markerColor = "blue",
  library = "fa"
)


leaflet(data = quakes[1:20,]) %>%
  addTiles() %>%
  addAwesomeMarkers(~long,
                    ~lat,
                    icon = awesome,
                    popup = ~as.character(mag),
                    label = ~as.character(mag))

[jlacko]

I am afraid the leaflet font awesome extension is somewhat dated, and works only with the old icons.

As far as the leaflet web page is concerned: my speculation is that as the maintainers of leaflet.js moved the web content to the /SlavaUkraini/ folder the hard-coded paths in R package {leaflet} broke.

On second thought: it may be possible to "override" - and I am putting it in quotation marks, since you are using the correct markers - the broken marker images with an updated version of the same, hosted on Cloudflare.

library(leaflet)

data(quakes)

# a working path to icon & shadow, hosted on https://cdnjs.com/libraries/leaflet
marker_icon <- makeIcon(
  iconUrl = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0-beta.0/images/marker-icon.png",
  shadowUrl = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0-beta.0/images/marker-shadow.png",
)

leaflet(data = quakes[1:20,]) %>%
  addTiles() %>%
  addMarkers(~long,
             ~lat,
             icon = marker_icon,
             popup = ~as.character(mag),
             label = ~as.character(mag))

[jlacko]

a fun fact: the issue seems to have been noted by {leaflet} maintainers, and has been fixed (less than 24 hours ago, so bleeding edge it is!) in Use unpkg CDN unconditionally by jcheng5 · Pull Request #785 · rstudio/leaflet · GitHub

So if you install the current github version of {leaflet} this issue should be fixed already

[pomchip]

Thanks @jlacko for your insight.

In combination with your blog post, I got to create the map I needed... Now I need to resolve why my labels are showing at odd places when my map is shown in a xaringan slide deck. But that could be the topic of another thread.