Quantcast
Channel: Active questions tagged r - Stack Overflow
Viewing all articles
Browse latest Browse all 201867

How to add 3D-Buildings to Leaflet

$
0
0

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)

Viewing all articles
Browse latest Browse all 201867

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>