[WINDOWS] rmarkdown build (index.html) in SublimeText 3 not displaying map, but rmarkdown::run() works

[ghost]

First Attempt with SublimeText 3 R Markdown Build

If I build with R Markdown in SublimeText 3, an index.html file is generated. If I then open this .html file in either Firefox, Chrome, Brave, etc, the map does not render. For example:

Result

Second Attempt with Terminal

However, If I switch to my Windows terminal and load R, then use rmarkdown::run(), the map generates in either browser of choice. For instance:

Result

Reprex Code: flexdashboard with shiny integration

---
title: "COVID-19 Tracker"
date: "`r Sys.Date()`"
fontsize: 9pt
fontfamily: Segoe UI
output: flexdashboard::flex_dashboard
runtime: shiny
---

```{r global,include=FALSE}
suppressMessages( require(dplyr) )
suppressMessages( require(tidyr) )
suppressMessages( require(flexdashboard) )
suppressMessages( require(leaflet) )
suppressMessages( require(maps) )
suppressMessages( require(mapdata) )
suppressMessages( require(shiny) )
suppressMessages( require(htmltools) )
suppressMessages( require(htmlwidgets) )

cntry <- map("world2Hires",fill=F,plot=F)$names[1:100]
cntry <- cntry[order(cntry)]
getBounds <- function(vec=NULL)
{
    lng1 <- rep(0,length(vec))
    lat1 <- rep(0,length(vec))
    lng2 <- rep(0,length(vec))
    lat2 <- rep(0,length(vec))
    for (i in 1:length(vec))
    {
        lat1[i] <- map("world2Hires",fill=F,region=vec[i],plot=F)$range[3] %>% round(5)
        lng2[i] <- map("world2Hires",fill=F,region=vec[i],plot=F)$range[2] %>% round(5)
        lat2[i] <- map("world2Hires",fill=F,region=vec[i],plot=F)$range[4] %>% round(5)
        lng2[i] <- map("world2Hires",fill=F,region=vec[i],plot=F)$range[1] %>% round(5)
    }
    cbind(lng1,lat1,lng2,lat2)
}

location <- getBounds(vec=cntry)
df1 <- data.frame(cntry,location)

Column {.sidebar}

Epicenter Region

# https://community.rstudio.com/t/rstudio-connect-interactive-markdown-with-shiny-error-path-for-html-dependency-not-provided/7263/11
selectInput("loc",
        label="Select Region:",
        selectize=FALSE,        
        choices=df1[,1],
        selected=df1[19,1])

Column

COVID-19 Epicenters

renderLeaflet({
    leaflet() %>% addTiles() %>%
    # add tile theme layer
    addProviderTiles(providers$CartoDB.Positron) %>%
    # add bounds
    fitBounds(lng1=map("world2Hires",fill=F,region=input$loc,plot=F)$range[1],
          lat1=map("world2Hires",fill=F,region=input$loc,plot=F)$range[3],
          lng2=map("world2Hires",fill=F,region=input$loc,plot=F)$range[2],
          lat2=map("world2Hires",fill=F,region=input$loc,plot=F)$range[4])
})

[schloerke]

When the leaflet is run by shiny/rmarkdown, it is hosted by a server and not your file system.

I'm wondering if trying to load a (most likely) https:// based tiles when the local file is hosted by a file://, the browser is not allowing it due to security concerns.

---

I am curious if you use a small plumber router to host your leaflet folder, if it it will work.

Ex:

library(plumber)
pr() %>% 
  pr_static("/", ".") %>%  # "." is the location of the folder containing your `index.html`
  pr_run(port = 8000)

Visit 127.0.0.1:8000/index.html and I hope the leaflet map will display as expected.

[ghost]

I am curious if you use a small plumber router to host your leaflet folder, if it it will work.

Ex:

library(plumber)
pr() %>% 
  pr_static("/", ".") %>%  # "." is the location of the folder containing your `index.html`
  pr_run(port = 8000)

Visit 127.0.0.1:8000/index.html and I hope the leaflet map will display as expected.

In my current directory containing the index.html, when I use your code I get an error:

Was I suppose to use this code within my R-markdown file when building the index.html? I am confused as to where this code fits in the overall procedure.

[schloerke]

Can you try a different port? Looks like 8000 is busy already. Can remove the port argument and it'll find an available port.

This is suppose to be in a regular R session, like you have done.

[ghost]

No success yet:

When visiting 127.0.0.1:7647/index.html I get no map display:

[schloerke]

Last check... Are there any errors in your browser while visiting the website?

Chrome: View > Developer > JavaScript Console

Thank you

[ghost]

What does this <div id="MathJax_Message" style="display: none;"></div> mean? Also I am using Firefox browser. But I tried with Chrome (same) issue: