8

I have just created a simple interactive map using leaflet package in R. Something like this

leaflet() %>% addTiles()

Now I would like to embed it in my wordpress website.

I clicked on the export button of RStudio Viewer and chosen "Save as web page...", then stored the .html in my local computer.

I tried to embed this map in a post in my WP website by clicking on "Add a media" in the editor of the page and the choosing the .html previously stored. But I get the error:

"1 file could not be uploaded because the file type is not supported."

I tried to open the html file in an editor and copy and paste the (very long, full of coordinates) html code into the html tab of WP page editor. The editor convert this code into

<div id="htmlwidget_container">
<div id="htmlwidget-2390" class="leaflet html-widget" style="width: 100%; height: 400px;"></div> </div>

and I don't see any map in the visual tab. I really don't know how to proceed. Any help will be appreciated. As you have noticed I am completely new to WP and web applications.

Thanks a lot, jacopo

Phil
  • 7,287
  • 3
  • 36
  • 66
Jacopo
  • 153
  • 1
  • 3
  • 10
  • Recommendations for off-site tutorials are considered off-topic for Stack Overflow. Questions that lack specific [reproducible examples](http://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example) are difficult to answer. It would be helpful to be as clear as possible about what you have tried and describe exactly how it didn't work. – MrFlick Feb 02 '17 at 17:11
  • Hi MrFlick, I made some edits based on your comment, I hope it is better now. Thanks – Jacopo Feb 02 '17 at 17:56
  • In order to embed the map, with all the functions in tact, you need to have some kind of container in the wordpress page that is able to accept a fully functioning html web page with its own css and javascript. Try resolving the issue on the wordpress end. Search the wordpress support boards. – sconfluentus Feb 03 '17 at 03:44
  • This is exactly what I'm looking for. I don't know nothing about html but i can make not bad maps in leaflet. I want to find a way to show maps in wordpress (right now I just have a premium access). I could migrate the page to other kind of host. – César Arquero Cabral Nov 14 '18 at 18:29
  • I would have thought the best option would be to create a simple shiny app with the leaflet map, host it on [shinyapps.io](http://www.shinyapps.io/) and then embed the hosted shiny app in and iframe. [Here's a walk through](https://www.brettory.com/2018/02/embedding-a-shiny-app-in-blogdown/) I found. – Will Hore-Lacy Nov 16 '18 at 05:58

4 Answers4

4

U can try to save the widget to a .html file and import this .html file to your media library. 

library(htmlwidgets) 
library(DT) 
a <- datatable(iris) 
saveWidget(a, "datatable-iris-example.html")

Next, import the .html file to your media library. Then, add the shortcode to your post. Here's how to encode it in the page when editing the blog post:

<iframe seamless src="http://www.phillipburger.net/wordpress/wp-
content/uploads/2015/05/datatable-iris-example.html" width="100%" 
height="500"></iframe>

All credits go to Phillip Burger and his post.

Anyone got a better method?

OB83
  • 476
  • 2
  • 10
  • 1
    Trying to do this with a leaflet created in r. The map shows up but markers don't. Has anyone had this issue or know how to resolve? When opening the html file locally the markers are there. – bpheazye May 24 '18 at 17:56
0

I have not qa tested this but... my logic is use the raw HTML widget and add a simple php include line. kinda like this 

<h3>My aweseome R map</h3>
<?php include 'saved_file.html';?>

The concept comes from Static Content CMS concepts where you import so to speak existing pieces.

Jeremiah Stillings
  • 743
  • 1
  • 7
  • 19
0

Steps:

1) Install the plugin which allows embedding extra File Extensions, and check .html in that plugin's options page.

2) now try to upload .html file in WP.

3) embed the uploaded file as <iframe> element, or use plugins like : include-me or include-url or simple-include

T.Todua
  • 53,146
  • 19
  • 236
  • 237
0

I know this post is old but I just cobbled together a way to do this and wanted to share.

I knew I could save my plot as an html file using the same method @OBB3 described above, and I knew that I wanted to embed it on my website using <iframe>, but I could not figure out how to actually host the file on the internet to then point my <iframe> to.

I ended up finding a GitHub solution, which has the added benefit that I can easily change my plot, push those changes, and the plot will be automatically updated on my website:

  1. Create a new repo
  2. Add the .html file of your plot to the repo
  3. Go to Settings > Pages, and under "Source" choose the "main" branch.
  4. Point your iframe to http://username.github.io/repository/myplot (filling in the bold sections with your GitHub username, the name of the repo, and pre-extension name of your .html file, respectively)

Credit goes to Elizabeth Ter Sahakyan's post for teaching me most of the above.

All the interactivity and different elements of my plot have been preserved using this method.

maheen
  • 1