Włączenie mapy ulotek w prezentacji revealjs w R

Question

Próbuję dodać mapę ulotek z płytkami do pliku revealjs_presentation utworzonego w R. Ta mapa renderuje się dobrze w formacie ioslide lub html, ale nie w formacie revealjs_presentation (główne problemy: wszystkie Czcionki są o wiele za duże, a po wybraniu mapy mają dziwne artefakty wokół granic wielokąta. Ponieważ mapa działa dobrze w innych formatach wyjściowych, podejrzewam, że problem związany jest z niekompatybilnością CSS między jawną prezentacją a ulotką.

Aby wyizolować dwa zestawy kodu, zapisałem mapę ulotek za pomocą htmlwidgets. Ta mapa wygląda dobrze, ale wydaje się, że nie ma sposobu, aby następnie osadzić ten lokalny plik HTML w prezentacji za pomocą np. Elementu iframe. Jako że nie jestem ekspertem od CSS, byłbym wdzięczny za wszelkie wskazówki, jak to rozwiązać. Jeśli ktoś wytworzył interaktywną mapę ulotek z wyskakującymi okienkami, która poprawnie renderuje w formacie revealjs_presentation w R, byłbym wdzięczny za zobaczenie części tego kodu. Na co warto, ulotka kod mapa jest:

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

Plik zapisuje poprawnie (na przykład poniższy kod), ale przedstawieniu go w iframe łamie autonomiczny charakter dzianiny pliku html.

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

Answer 1

Jak można się już domyślić, można rozwiązać problem przewymiarowany czcionek, dodając trochę niestandardowego CSS. Powiedzmy, że chcesz naprawić czcionkę dla każdego pop-upa i legendy mapy. Najpierw otwórz nowy plik tekstowy i dodaj:

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

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

Dostosuj względny rozmiar czcionki w razie potrzeby. Zapisz plik jako leafletfont.css (lub cokolwiek chcesz go nazwać) w tym samym katalogu, co plik RMarkdown.

Wszystko, co musisz zrobić, to dodać wywołanie do nowego pliku CSS w przednim kilku prezentacji:

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

czcionki powinien być odpowiedniej wielkości.

P.S. Skąd wiedziałem, aby używać selektorów CSS ".leaflet-popup-content" i ".leaflet-control"? Klikając prawym przyciskiem myszy na odpowiednie elementy mapy - tj. Po renderowaniu w HTML w przeglądarce Chrome - i wybierając "Sprawdź".