How do I add a custom scale line in openlayers?

Question

I am developing a geographic web app and want to add a scale line into it. The default openlayers scale line does not fit my design nor does it look professional. So I would like to add a classic scale line like this one for example:

What is the best way to do this? Adding a SVG, get current zoom and calculate the SVGs proper size?

I tried styling the scale line with CSS, that's working, but i can only change its color and so on, while I want to change the whole design.

This is the code in my Map component but all in all its just the classic declaration:

const me = this;

const scalelineControl = new ScaleLine({
    minWidth: 64,
    units: 'metric',
});
me.currentView = new View({
    center: proj.transform(this.mapCenter, 'EPSG:4326', 'EPSG:3857'),
    zoom: this.mapZoom,
    projection: 'EPSG:3857',
});
Vue.prototype.$currentView = me.currentView;
me.map = new Map({
    layers: [
    new TileLayer({
        source: new OsmSource(),
    }),
    new Vector({ source: this.srLayerSource }),
    ],
    view: me.currentView,
    loadTilesWhileAnimating: true,
    controls: [scalelineControl],
});

I am using Vue.js to create the web app. The map gets declared in its component's created() part and is added in mounted(), but that does not really matter in this topic. Just for notice.

Answer 1

Check this open layer document this really helped me