2017-08-25 136 views
0

我有以下闪亮的应用:https://ahmadmobin.shinyapps.io/Understanding_STOP/[R单张搜索功能

的“位置”选项卡下,我有一个单张地图。我想将搜索栏移到左侧。如果可能的话,我想也想addResetMapButton()但它是没有必要的。

这里是我的R代码里面:

output$mymap <- renderLeaflet({ 
leaflet(Locations) %>% 
addTiles() %>% 
addCircleMarkers(color = Locations$color,clusterOptions= markerClusterOptions, 
       label=~Official_Name_of_Agency, popup=~geoAddress, group='Locations') %>% 
addLegend(labels = c("AA", "CHC", "FHT", "NPLC"), colors = c("black", "purple", "blue", "yellow")) %>% 
addProviderTiles(providers$Stamen.TonerLite, 
    options = providerTileOptions(noWrap = TRUE)) %>% 
addSearchOSM(options = searchOSMOptions()) 

回答

0

可以style your apps with CSS to make custom changes to your app

对于搜索栏,你正在寻找的选择是:

#mymap > div.leaflet-control-container > div.leaflet-top.leaflet-right > div.leaflet-control-search.leaflet-control 

您可以使用三种不同的方式改变其立场(根据上面的链接)。我的首选方式如下,特别是如果您正在考虑进行更多自定义更改。

  • 在你闪亮的应用程序目录下创建一个名为www子目录,

    创建在移动搜索栏的位置的文本文件的样式规则,你可以计算你想要的确切位置,但你可以使用这样的(本实施例中只是改变了margin-left属性的元素移动到左侧。

    #mymap > div.leaflet-control-container > div.leaflet-top.leaflet-right > div.leaflet-control-search.leaflet-control{margin-left: 10px important;} 
    

    文件保存为style.csswww的子目录内,

    添加标签,就可以ui.R内随时随地可以包括地图具有呈现部分:

    tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "style.css"))

+0

嗨eclark,感谢找回。请参阅下面的回复。周末愉快! –

+0

它似乎并没有工作: style.css file #mymap> div.leaflet-control-container> div.leaflet-top.leaflet-right> div.leaflet-control-search.leaflet-control {margin -left:10px important;} UI: tabItem(tabName =“fourth”, tags $ head(tags = $ link(rel =“stylesheet”,type =“text/css”,href =“style.css “)), leafletOutput(”mymap“,height = 700) ), –