Incorporare la mappa di Leaflet nella presentazione di revealjs all'interno di R

Question

Sto provando ad aggiungere una mappa di Leaflet con tile a una representjs_presentation creata in R. Questa mappa viene visualizzata correttamente nel formato ioslide o html, ma non nel formato revealjs_presentation (problemi principali: tutti i caratteri sono troppo grandi e la mappa ha strani artefatti attorno ai confini dei poligoni quando selezionata). Poiché la mappa funziona bene in altri formati di output, sospetto che il problema abbia a che fare con un qualche tipo di incompatibilità CSS tra revealjs_presentation e volantino.

Per isolare i due set di codice, ho salvato la mappa del volantino utilizzando htmlwidgets. Questa mappa sembra soddisfacente, ma sembra che non ci sia modo di incorporare questo file html locale all'interno della presentazione usando, ad esempio, un iframe. Dato che non sono un esperto di CSS, apprezzerei qualsiasi guida su come risolvere questo problema. Se qualcuno ha prodotto una mappa illustrativa interattiva con popup che viene visualizzata correttamente nel formato revealjs_presentation in R, sarei grato di vedere una parte di quel codice. Per quello che vale, il codice mappa opuscolo è:

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') 

Questo file consente di risparmiare in modo corretto (per esempio il codice qui sotto), ma fa riferimento a esso in un iframe rompe la natura autonoma del file HTML a maglia.

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

Answer 1

Come avrete già intuito, è possibile risolvere il problema dei caratteri di grandi dimensioni includendo un po 'di CSS personalizzato. Diciamo che vuoi correggere il carattere per i popup e la legenda della mappa. In primo luogo, aprire un nuovo file di testo e aggiungere il seguente:

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

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

Regolare la dimensione del carattere relativo, se necessario. Salva il file come leafletfont.css (o come vuoi chiamarlo) nella stessa directory del tuo file RMarkdown.

Tutto quello che dovete fare ora è aggiungere una chiamata al nuovo file CSS nella parte anteriore-materia della presentazione:

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

I font dovrebbero ora essere di dimensioni adeguate.

P.S. Come sapevo usare i selettori CSS ".leaflet-popup-content" e ".leaflet-control"? Facendo clic con il pulsante destro sugli elementi pertinenti della mappa, ad esempio, una volta eseguito il rendering in HTML nel browser Chrome, e scegliendo "Ispeziona".