Is it possible to customize the position of the searchbox in Leaflet using CSS, specifically when using the Leaflet extra package in Shiny? Here's a simple code example:
library(leaflet)
library(leaflet.extras)
library(shiny)
ui <- fillPage(leafletOutput("mymap"))
server <- function(input, output, session) {
output$mymap <- renderLeaflet({
leaflet() %>%
addProviderTiles(providers$Esri.WorldStreetMap) %>%
addSearchOSM()
})
}
shinyApp(ui, server)
How can we manipulate the searchbox position, such as placing it in the top center?
Upon inspecting the browser, the following element is identified:
<a class="search-button" href="#" title="Search using Google Geocoder" style="outline: none;"></a>
I attempted to adjust the position using CSS:
library(leaflet)
library(leaflet.extras)
library(shiny)
ui <- fillPage(
tags$head(tags$style(
HTML('leaflet-search-button {margin-top: 100px;}
'))
),
leafletOutput("mymap")
)
server <- function(input, output, session) {
output$mymap <- renderLeaflet({
leaflet() %>%
addProviderTiles(providers$Esri.WorldStreetMap) %>%
addSearchOSM()
})
}
shinyApp(ui, server)