Include a sheet map in an openjs presentation in R

Question

I am trying to add a leaflet map with tiles to the drop-down view created in R. This map is perfectly displayed in ioslide or html format, but not in opensjs_presentation format (main problems: all fonts are too large and the map has strange artifacts around the borders of the polygon when choosing). Since the map works well in other output formats, I suspect that the problem is due to some CSS incompatibility between showjs_presentation and leaflets.

To isolate the two sets of code, I saved the booklet map using htmlwidgets. This map looks great, but it seems impossible to embed this local html file in the presentation using, for example, iframe. Since I am not a CSS expert, I would appreciate any guidance on sorting it. If someone created an interactive map of booklets with pop-ups that display correctly in opensjs_presentation format in R, I would appreciate some parts of this code. What does it cost, booklet card code:

leaflet(x) %>% addPolygons(popup = popup, weight = 0.7, fillColor = ~pal(quintf), color = 'white', fillOpacity = 1, opacity = 1, smoothFactor = 0.8) %>% addLegend(pal = pal, values = x$quintf, title = "CXI Activity", position = 'bottom right') 

This file is saved correctly (for example, the code below), but the link to it in the iframe violates the autonomous nature of the associated html file.

 saveWidget(m, file="map.html") 

Answer 1

As you might have guessed, you can fix the problem with a large font size by including some custom CSS. Say you want to fix the font for pop-ups and map legends. First open a new text file and add the following:

 .reveal section .leaflet-popup-content { font: 20px; } .reveal section .leaflet-control { font: 24px; } 

Adjust the relative font size if necessary. Save the file as leafletfont.css (or whatever you want to name) in the same directory as the RMarkdown file.

All you have to do is add a new CSS file call first of all to your presentation:

 --- title: "Habits" author: John Doe date: March 22, 2005 output: revealjs::revealjs_presentation css: leafletfont.css --- 

Your fonts should now be appropriate.

PS How did I know to use the CSS selector ".leaflet-popup-content" and ".leaflet-control"? By right-clicking on the corresponding map elements, i.e. After it has been displayed in HTML in the Chrome browser, and selecting "Inspect."