0

I'm creating a Shiny APP with a interactive Leaflet map with markers. And I noticed that some elements of the app look/fit better with a lower browser zoom level. So i've found on another question (This one) a CSS snippet to change the browser's default zoom level on launch.

However, using this method produces a bug where the marker's labels don't show on their exact position but with an offset, the popups on the other hand seem to be fine.

This problem occurs when using CSS to change default browser zoom level, but not then changing zoom level manually (using "CTRL" + "+" or "CTRL" + "-", given that you start the APP without the CSS part).

This is how the labels are showing: Marker labels offset

Here's a reproducible example:

library(shiny)
library(leaflet)

##DATA##
dat <- head(quakes,100)
dat$latitude <- as.numeric(dat$lat)
dat$longitude <- as.numeric(dat$long)

##UI##
ui <- fluidPage(
  tags$head(tags$style("
               body {
              -moz-transform: scale(0.9, 0.9); /* Moz-browsers */
              zoom: 0.9; /* Other non-webkit browsers */
              zoom: 90%; /* Webkit browsers */
              }
              ")),
  leafletOutput("mymap",height = 600)
)

##SERVER##
server <- function(input, output, session) {
  
  output$mymap <- renderLeaflet({
    leaflet(options = leafletOptions(maxZoom = 18)) %>% addTiles() %>%
      addMarkers(lat = ~ latitude,
                 lng = ~ longitude,
                 data = dat,
                 label = 'This are labels',
                 popup = 'This are popups')
  })
}

shinyApp(ui = ui, server = server)

It's there a workaround for this or another method to change browser zoom level that doesn't give this problem? Or could it be just a browser problem? (I'm using Google Chrome)

Thanks!

0 Answers0