search

CSBP-CPSE / web-mapping-components

Other
2 stars 2 forks source link

Map Scale bar control has overlapping text at larger scales #26

Closed roikle closed 3 years ago

roikle commented 3 years ago

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.

Current Scale Bar with a max width of 80px overlapping_scalebar_text

Updated Scale Bar with a max width of 100px fixed_scalebar_text