如何在R中控制小册子功能弹出窗口的弹出窗口宽度?

时间:2015-03-31 09:56:38

标签: r popup leaflet

我想通过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()
                              ))

我不明白如何控制与弹出窗口相关的选项..

非常感谢您就此问题和最好的问候提供的帮助!

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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

现在,如果只有我可以在我认可的某个地方制作弹出锚!