How to modify scale bar font size in leaflet map

Question

How can the font of scale bar be modified in leaflet? Example below of what I have tried without success:

 library(leaflet)
    library(htmltools)
    
    # Create a basic Leaflet map
    map <- leaflet() %>%
      addTiles() %>%
      setView(lng = -121.2722, lat = 38.1341, zoom = 10)  
    
    # Add a scale bar to the map
    map <- map %>%
      addScaleBar() %>% 
      onRender("
function(el, x) {
  var map = this;
L.control.scale({
    position: 'bottomleft',
    imperial: false,
    onRender: function(options) {
        var scaleContainer = this._container;
        scaleContainer.style.fontSize = '30px' !important; 
    }
}).addTo(map);
}
")  
map

lailaps · Accepted Answer · 2025-04-17 21:37:19Z

With addScaleBar() you already added a scale bar to the map. To edit it, you can use onRender to execute JavaScript after the map-widget is displayed. Then within the JS-Code, first query select all instances of the scale-divs (4)

and then apply the style attribute via scaleDiv.style.fontSize = '30px'; via JS' for-loop structure forEach: it iterates of each element of the .. Each element inside the loop is then called scaleDiv and you can do whatever you want to this div. E.g. use the dot-notation to set the .style.fontSize of the current iterator scaleDiv.

library(leaflet)
library(htmlwidgets)

# Create a basic Leaflet map
leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10)  %>%
  addScaleBar() %>% 
  onRender("
function(el, x) {
  document.querySelectorAll('div.leaflet-control-scale-line').forEach(scaleDiv => {
     scaleDiv.style.fontSize = '30px'; // adjust size
  });
}
")

Notes that is, you maybe should not set it so high because it will not be readable. You could also set the width, but I guess that defeats the purpose of a scale bar.

Collectives™ on Stack Overflow

How to modify scale bar font size in leaflet map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related