Mixing
embed R leaflet map in wordpress
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
html r wordpress leaflet rstudio
asked Feb 2 '17 at 17:06
JacopoJacopo
487
add a comment |
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
html r wordpress leaflet rstudio
asked Feb 2 '17 at 17:06
JacopoJacopo
487
Recommendations for off-site tutorials are considered off-topic for Stack Overflow. Questions that lack specific reproducible examples 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 2 '17 at 17:11
Hi MrFlick, I made some edits based on your comment, I hope it is better now. Thanks
– Jacopo
Feb 2 '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 3 '17 at 3: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
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 and then embed the hosted shiny app in and iframe. Here's a walk through I found.
– Will Hore-Lacy
Nov 16 '18 at 5:58
add a comment |
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
html r wordpress leaflet rstudio
asked Feb 2 '17 at 17:06
JacopoJacopo
487
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
html r wordpress leaflet rstudio
html r wordpress leaflet rstudio
asked Feb 2 '17 at 17:06
JacopoJacopo
487
asked Feb 2 '17 at 17:06
JacopoJacopo
487
edited Feb 2 '17 at 17:55
Jacopo
asked Feb 2 '17 at 17:06
JacopoJacopo
487
asked Feb 2 '17 at 17:06
JacopoJacopo
487
asked Feb 2 '17 at 17:06
JacopoJacopo
487
487
Recommendations for off-site tutorials are considered off-topic for Stack Overflow. Questions that lack specific reproducible examples 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 2 '17 at 17:11
Hi MrFlick, I made some edits based on your comment, I hope it is better now. Thanks
– Jacopo
Feb 2 '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 3 '17 at 3: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
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 and then embed the hosted shiny app in and iframe. Here's a walk through I found.
– Will Hore-Lacy
Nov 16 '18 at 5:58
add a comment |
Recommendations for off-site tutorials are considered off-topic for Stack Overflow. Questions that lack specific reproducible examples 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 2 '17 at 17:11
Hi MrFlick, I made some edits based on your comment, I hope it is better now. Thanks
– Jacopo
Feb 2 '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 3 '17 at 3: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
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 and then embed the hosted shiny app in and iframe. Here's a walk through I found.
– Will Hore-Lacy
Nov 16 '18 at 5:58
Recommendations for off-site tutorials are considered off-topic for Stack Overflow. Questions that lack specific reproducible examples 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 2 '17 at 17:11
Recommendations for off-site tutorials are considered off-topic for Stack Overflow. Questions that lack specific reproducible examples 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 2 '17 at 17:11
Hi MrFlick, I made some edits based on your comment, I hope it is better now. Thanks
– Jacopo
Feb 2 '17 at 17:56
Hi MrFlick, I made some edits based on your comment, I hope it is better now. Thanks
– Jacopo
Feb 2 '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 3 '17 at 3:44
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 3 '17 at 3: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
Nov 14 '18 at 18:29
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
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 and then embed the hosted shiny app in and iframe. Here's a walk through I found.
– Will Hore-Lacy
Nov 16 '18 at 5:58
I would have thought the best option would be to create a simple shiny app with the leaflet map, host it on shinyapps.io and then embed the hosted shiny app in and iframe. Here's a walk through I found.
– Will Hore-Lacy
Nov 16 '18 at 5:58
add a comment |
3 Answers
3
active
oldest
votes
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?
answered Jun 8 '17 at 13:22
OB83OB83
31118
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
add a comment |
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.
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
add a comment |
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
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42008179%2fembed-r-leaflet-map-in-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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?
answered Jun 8 '17 at 13:22
OB83OB83
31118
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
add a comment |
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?
answered Jun 8 '17 at 13:22
OB83OB83
31118
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
add a comment |
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?
answered Jun 8 '17 at 13:22
OB83OB83
31118
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?
answered Jun 8 '17 at 13:22
OB83OB83
31118
answered Jun 8 '17 at 13:22
OB83OB83
31118
answered Jun 8 '17 at 13:22
OB83OB83
31118
answered Jun 8 '17 at 13:22
OB83OB83
31118
31118
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
add a comment |
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
1
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
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
add a comment |
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.
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
add a comment |
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.
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
add a comment |
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.
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
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.
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
answered Nov 21 '18 at 4:05
Jeremiah StillingsJeremiah Stillings
4861315
4861315
add a comment |
add a comment |
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
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
add a comment |
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
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
add a comment |
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
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
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
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
answered Nov 21 '18 at 10:45
T.ToduaT.Todua
30.4k12132131
30.4k12132131
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f42008179%2fembed-r-leaflet-map-in-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Recommendations for off-site tutorials are considered off-topic for Stack Overflow. Questions that lack specific reproducible examples 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 2 '17 at 17:11
Hi MrFlick, I made some edits based on your comment, I hope it is better now. Thanks
– Jacopo
Feb 2 '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 3 '17 at 3: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
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 and then embed the hosted shiny app in and iframe. Here's a walk through I found.
– Will Hore-Lacy
Nov 16 '18 at 5:58