I am trying to include the OSMBuildings plugin of leaflet into a shiny App. The buildings appear, but they are placed behind the basemap.
You can see the buildings if you zoom in/out or if you remove the line with addTiles() %>%
.
Interestingly when addTiles()
is removed, zooming doesnt work anymore, but tilting works. With the Basemap tilting doesnt work anymore.
So:
- How can I put the buildings on top of the OSM-Tiles?
- How can the buildings layer be zoomed in/out, rescaled and disappear at certain zoom levels?
library(shiny)
library(htmlwidgets)
library(leaflet)
ui <- fluidPage(
tags$head(tags$link(href = "https://cdn.osmbuildings.org/4.0.0/OSMBuildings.css")),
tags$head(tags$script(src = "https://cdn.osmbuildings.org/4.0.0/OSMBuildings.js")),
leafletOutput("map")
)
server <- function(input, output, session) {
output$map <- renderLeaflet({
leaflet() %>%
addTiles() %>%
setView(lat = 52.52000, 13.41000, zoom = 15) %>%
onRender("function(el, x) {
var osmb = new OSMBuildings({
container: 'map',
position: { latitude: 52.52000, longitude: 13.41000 },
tilt: 30,
minZoom: 14,
maxZoom: 20,
zoom: 15
})
osmb.addGeoJSONTiles('http://{s}.data.osmbuildings.org/0.2/anonymous/tile/{z}/{x}/{y}.json', {
fixedZoom: 15,
minZoom: 14,
maxZoom: 20
});
}"
)
})
}
shinyApp(ui, server)