2016-03-13 39 views
7

Tôi đang cố gắng thêm một bản đồ Leaflet với các ô được hiển thị trong R. Bản đồ này hiển thị tốt ở định dạng ioslide hoặc html, nhưng không có định dạng revealjs_presentation (vấn đề chính: tất cả phông chữ quá lớn và bản đồ có các đồ tạo tác lạ xung quanh các ranh giới đa giác khi được chọn). Bởi vì bản đồ hoạt động tốt ở các định dạng đầu ra khác, tôi nghi ngờ vấn đề phải làm với một số loại không tương thích CSS giữa revealjs_presentation và tờ rơi.Kết hợp bản đồ Leaflet trong bản trình bày của các bản trình bày trong R

Để tách riêng hai bộ mã, tôi đã lưu bản đồ tờ rơi bằng cách sử dụng htmlwidgets. Bản đồ này có vẻ ổn nhưng có vẻ như không có cách nào để nhúng tệp html cục bộ này trong bản trình bày bằng cách sử dụng, ví dụ: iframe. Vì tôi không phải là chuyên gia về CSS, tôi đánh giá cao bất kỳ hướng dẫn nào về cách sắp xếp điều này. Nếu ai đó đã tạo ra một bản đồ tờ rơi tương tác với các quảng cáo hiển thị chính xác trong định dạng revealjs_presentation trong R Tôi sẽ biết ơn khi thấy một số phần của mã đó. Đối với những gì nó có giá trị, mã bản đồ tờ rơi là:

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

tập tin này tiết kiệm một cách chính xác (ví dụ mã bên dưới) nhưng tham khảo nó trong một iframe phá vỡ tính chất khép kín của tập tin html dệt kim.

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

Trả lời

3

Như bạn đã đoán, bạn có thể khắc phục vấn đề phông chữ quá khổ bằng cách bao gồm một chút CSS tùy chỉnh. Giả sử bạn muốn sửa phông chữ cho bất kỳ cửa sổ bật lên nào và chú giải bản đồ. Trước tiên, hãy mở một tệp văn bản mới và thêm thông tin sau:

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

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

Điều chỉnh kích thước phông chữ tương đối khi cần. Lưu tệp dưới dạng leafletfont.css (hoặc bất kỳ thứ gì bạn muốn gọi nó) trong cùng thư mục với tệp RMarkdown của bạn.

Tất cả bạn cần làm bây giờ là thêm một cuộc gọi đến file CSS mới ở phía trước-vấn đề của bài trình bày của bạn: Giờ đây,

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

phông chữ của bạn nên được một cách thích hợp kích thước.

P.S. Làm cách nào tôi biết sử dụng bộ chọn CSS ".leaflet-popup-content" và ".leaflet-control"? Bằng cách nhấp chuột phải vào các yếu tố có liên quan của bản đồ - tức là sau khi được hiển thị trong HTML trong trình duyệt Chrome của tôi - và chọn "Kiểm tra".

Các vấn đề liên quan