2015-03-31 86 views
4

我想通過R來控制傳單功能彈出窗口的寬度,我該怎麼做?如何控制R中傳單功能彈出窗口的彈出窗口寬度?

output$HomeMap <- renderLeaflet(leaflet() %>% 
           addTiles() %>% 
           setView(1.93, 41.48, zoom = 3) %>% 
           addPolygons(data = subset(world, name %in% datasourceInput()), 
              color = datasourceColor(), 
              weight = 1, 
              popup = datasourcePopups() 
          )) 

我不明白如何控制相關的彈出的選項..

提前感謝您在這個問題上和問候的幫助!

+0

您是否曾經爲此找到過解決方案?我試圖找出如何增加R中的傳單地圖的彈出框的寬度,但我還沒有運氣... – KMcL 2016-03-22 17:15:18

回答

2

我在創建我現在正在處理的一系列地圖時遇到了類似的問題。我希望在html/css/javascripted頁面上完成的任何格式都是在引號內進行的,我使用了雙引號示例:"<br>"來創建換行符並開始下一行的下一條信息。

爲了下令,我使用了一組表格......我有16行的文本,並希望使用最後一行的PNG圖像。它的工作原理,但圖像使文本在上面的彈出窗口的一側縮放......背景沒有按比例放大。

所以我做了一些與代碼玩耍,沖刷淨,然後插入這行代碼在我的彈出式變量的頂部:

myPopUp<- paste("<style> div.leaflet-popup-content {width:auto !important;}</style>", 
myvariable, "some copy to print", another variable) 

確保整個彈出窗口內paste函數,現在彈出窗口會自動調整爲內容的大小。 這確實意味着您需要注意您的副本長度並適當調整彈出窗口中的圖像大小。

我有我的設置來從292個人口普查區之一拉出16個值和圖表,然後放入正確的數據和緩存的圖像,然後重新縮放,並且工作完美無缺。您可能想嘗試一下。

這是魔碼:"<style> div.leaflet-popup-content {width:auto !important;}</style>"

這是它的外觀the popup sized relative to the content

現在,如果我能讓彈出錨的地方,我是贊成的一致!

+0

偉大的解決方案。您還可以使用「不透明度」來添加一些透明度,以便在彈出窗口下不會完全丟失上下文。請參閱https://css-tricks.com/almanac/properties/o/opacity/。如果你願意,很樂意演示。 – timelyportfolio 2016-05-05 12:46:49

+0

這解決了我的問題! – KMcL 2016-06-08 22:21:48

2

@ bethanyP的答案適用於所有情況。我認爲一些額外的細節可能會有所幫助。我在線評論了每一步。

library(leaflet) 

# example from https://rstudio.github.io/leaflet/popups.html 
content <- paste(sep = "<br/>", 
       "<b><a href='http://www.samurainoodle.com'>Samurai Noodle</a></b>", 
       "606 5th Ave. S", 
       "Seattle, WA 98138" 
) 

leaflet() %>% addTiles() %>% 
    addPopups(-122.327298, 47.597131, content, 
      options = popupOptions(closeButton = FALSE) 
) 

# according to ?popupOptions can specify min/maxWidth 
# set min and max width the to force a width 
leaflet() %>% addTiles() %>% 
    addPopups(
    -122.327298, 47.597131, 
    content, 
    options = popupOptions(
     closeButton = FALSE, 
     minWidth = 300, 
     maxWidth = 300 
    ) 

# on the other hand, it appears that we only have maxHeight 
# so height cannot be controlled in the same way 
leaflet() %>% addTiles() %>% 
    addPopups(
    -122.327298, 47.597131, 
    content, 
    options = popupOptions(
     closeButton = FALSE, 
     maxHeight = 20 
    ) 
) 

# let's extend the example to show how we can use 
# htmltools to add CSS to control our popups 

# could also use the approach suggested in 
# the other answer, but I think this is more 
# fitting with typical HTML/JS convention 

lf <- leaflet() %>% addTiles() %>% 
    addPopups(
    -122.327298, 47.597131, 
    content, 
    options = popupOptions(
     closeButton = FALSE, 
     # not necessary but adding a className 
     # can help in terms of specificity 
     # especially if you have multiple popups 
     # with different styling 
     className = "myspecial-popup" 
    ) 
) 

library(htmltools) 
browsable(
    tagList(
    tags$head(
     # more specific is better 
     tags$style(
     'div.myspecial-popup div.leaflet-popup-content-wrapper { 
      height: 400px; 
      opacity: .5; 
     }' 
    ) 
    ), 
    lf 
) 
)