Embedding a leaflet map on wordpress
During the documentation of the Landslides dataset geolocation post, I started to investigate how to include the maps generated by the leaflet library within this blog “thinkingondata.com” that runs on WordPress.
Far from being a minimal task, it required some research to find the easier way to include the map.
An idea was to generate an image, but that makes us lose all layers of information and the dynamism that is the reason why to use leaflet.
So the question to be answered is how to include our maps with all the layers of information we have added.
The best way to handle this problem is to generate an HTML file (where the map is) and then include it in the media files section of WordPress, and then include the map in our posts through an iframe.
So, the step by step is:
- Generate a map using the leaflet library
- Upload the html file in the media files section into the WordPress
- Embed the html file through an iframe in the post in question.
1. Generate a map
library(leaflet)
library(dplyr)
m <- leaflet() %>%
addTiles() %>% # Add default OpenStreetMap map tiles
addMarkers(lng=-58.381592, lat=-34.603722, popup="Buenos Aires - Argentina")
m %>% addProviderTiles(providers$CartoDB.Positron)In the RStudio viewer we are going to select the option to save as HTML.
2. Upload the html file
- Select in Media > Add New
- select the html file in question
- Press edit
- A new page opens containing the uploaded file
- On that same page press update, in order to save the information.
The file in question can be found at the link < File URL >.
3. Embed the html file through an iframe in the post in question.
<iframe style="width: 100%; height: 120px;"
src="http://www.thinkingondata.com/wp-content/uploads/2018/09/Example-1.html">
</iframe>About Leaflet
Leaflet is one of the most popular open-source JavaScript libraries for interactive maps. This R package makes it easy to integrate and control Leaflet maps in R.