createScaleBar(width, scale, suffix) {
    const resolutionScale = this.getScaleForResolution();
    const mapScale =
      resolutionScale < 1
        ? Math.round(1 / resolutionScale).toLocaleString() + ' : 1'
        : '1 : ' + Math.round(resolutionScale).toLocaleString();
    const steps = this.scaleBarSteps_;
    const stepWidth = width / steps;
    const scaleSteps = [this.createMarker('absolute')];
    for (let i = 0; i < steps; ++i) {
      const cls =
        i % 2 === 0 ? 'ol-scale-singlebar-odd' : 'ol-scale-singlebar-even';
      scaleSteps.push(
        '<div>' +
          '<div ' +
          `class="ol-scale-singlebar ${cls}" ` +
          `style="width: ${stepWidth}px;"` +
          '>' +
          '</div>' +
          this.createMarker('relative') +
          // render text every second step, except when only 2 steps
          (i % 2 === 0 || steps === 2
            ? this.createStepText(i, width, false, scale, suffix)
            : '') +
          '</div>',
      );
    }
    // render text at the end
    scaleSteps.push(this.createStepText(steps, width, true, scale, suffix));

    const scaleBarText = this.scaleBarText_
      ? `<div class="ol-scale-text" style="width: ${width}px;">` +
        mapScale +
        '</div>'
      : '';
    return scaleBarText + scaleSteps.join('');
  }
@private
@param {number} width The current width of the scalebar.
@param {number} scale The current scale.
@param {string} suffix The suffix to append to the scale text.
@return {string} The stringified HTML of the scalebar.