Issue: When the map is zoomed out the scale text can overlap the scale bar dimensions (see provided screenshot). This issue is caused by the addition of the following custom style rule;
.lode .mapboxgl-ctrl-scale {
font-size: 1.15em;
}
This style change does improve the scale bar text visibility over the default font-size: 10px; provided by Mapbox, but the control maxWidth should also increase to accommodate the style change. Increasing the maxWidth of the scale control from 80px to 100px fixes this issue.
Issue: When the map is zoomed out the scale text can overlap the scale bar dimensions (see provided screenshot). This issue is caused by the addition of the following custom style rule;
This style change does improve the scale bar text visibility over the default
font-size: 10px;
provided by Mapbox, but the control maxWidth should also increase to accommodate the style change. Increasing the maxWidth of the scale control from 80px to 100px fixes this issue.Current Scale Bar with a max width of 80px![overlapping_scalebar_text](https://user-images.githubusercontent.com/6431161/118284721-b6d24c80-b49e-11eb-976a-7a44a3462126.png)
Updated Scale Bar with a max width of 100px![fixed_scalebar_text](https://user-images.githubusercontent.com/6431161/118285811-d1f18c00-b49f-11eb-8f0f-a574c46073c0.png)