Can't display Leaflet HTML through R-Shiny (404 error). How to integrate KML file with rMaps or leaflet-shiny?

Question

I'm having some issues displaying an interactive map in R-Shiny that incorporates a KML file. I installed leaflet-plugins and was able to create an HTML file that displays properly by itself in the browser but not within Shiny. This attempt followed an example here - the code is available if you view source.

Because this initial version does not require the HTML itself to change, I attempted to follow the samples here to include the raw HTML in my page but I receive a 404 error with these as well as when I attempted to include it as an iframe within R-Shiny (following this discussion). I then set up an external facing server for both the KML file and the HTML file and got the same result.

I was able to get a map working without the KML file with leaflet-shiny but I'm frankly not sure how to add the KML file and don't see this in the documentation.

Finally, I tried rMaps which does have a "addKML" method, but I can't get it working with various locations of files on my server (

map1 = Leaflet$new()
map1$setView(c(45.5236, -122.675), 13)
map1$tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
map1$addKML('http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml')
map1

It works without the $addKML line. It might be worth noting that the tilelayer line on example 1 here also resulted in a blank map.

I actually have some possibly similar issues hosting derived title layers that are still unresolved which is one reason I opted for uses KML layers for this demo version of the application, which is why I tagged networking on here as well. I'm using Digital Ocean.

Thank you for any thoughts or pointers you may have.

Answer 1

I think there may be a small issue in the rMaps library. If you inspect the config.yml file https://github.com/ramnathv/rCharts/blob/master/inst/libraries/leaflet/config.yml you will see that for content delevery network (cdn) there is reference to "http://harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/KML.js". This KML reader is a plugin for leaflet from https://github.com/shramov/leaflet-plugins/blob/master/layer/vector/KML.js. When content is delivered locally:

  css: [external/leaflet.css, external/leaflet-rCharts.css, external/legend.css]
  jshead:
    - external/leaflet.js
    - external/leaflet-providers.js
    - external/Control.FullScreen.js

there is no reference to this javascript file. We can fix this:

require(yaml)
leafletLib <- file.path(find.package("rMaps"), "libraries", "leaflet")
rMapsConfig <- yaml.load_file(file.path(leafletLib, "config.yml"))
# add a kml library
kmlLib <- readLines("http://harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/KML.js")
write(kmlLib, file.path(leafletLib, "external", "leaflet-kml.js"))
# add the library to config.yml
rMapsConfig$leaflet$jshead <- union(rMapsConfig$leaflet$jshead , "external/leaflet-kml.js")
write(as.yaml(rMapsConfig), file.path(leafletLib, "config.yml"))

Now the config.yml will contain the necessary link to the KML reader and there is a local copy stored now in external/leaflet-kml.js. Our example still wont work however as we will get a Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml. This can be fixed by moving the resource to the same domain or enabling CORS.

We will need to have this file served locally. We can place it as a temporary measure in the leaflet folder in the rMaps package. When a map is created this folder gets copied to a temporary file:

require(rMaps)
map1 = Leaflet$new()
map1$setView(c(45.5236, -122.675), 13)
map1$tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
map1$addKML('leaflet/placemark.kml')
# temp copy http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml
# to rMaps
sampleKml <- readLines('http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml')
write(sampleKml, file.path(leafletLib, 'placemark.kml'))

# finally try the map
map1

# remove the temp file 
file.remove(file.path(leafletLib, 'placemark.kml'))

UPDATE: There is an addAssets method in rCharts which allows you to add .js files. This allows us to simpilfy things and doesnt require us to write a copy of the js file nor edit the config.yml file.

require(rMaps)
map1 = Leaflet$new()
map1$setView(c(45.5236, -122.675), 13)
map1$tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
map1$addAssets(css = NULL, jshead = 'http://harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/KML.js')
map1$addKML('leaflet/placemark.kml')
leafletLib <- file.path(find.package("rMaps"), "libraries", "leaflet")
sampleKml <- readLines('http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml')
write(sampleKml, file.path(leafletLib, 'placemark.kml'))
# finally try the map
map1

# remove the temp file 
file.remove(file.path(leafletLib, 'placemark.kml'))