Openlayers Custom Control появляется за пределами моей карты

Question

Я создал пользовательский элемент управления со следующим кодом:

//Custom control
function RotateLeft(opt_options) {
    let options = opt_options ? opt_options : {};

    let rotateLeftButton = document.createElement('button');
    rotateLeftButton.setAttribute('title', 'rotate left');
    rotateLeftButton.innerHTML = 'R';

    let handleRotateLeft = function () {
        view.animate({
            rotation: view.getRotation() + (-Math.PI / 2),
        });
    };

    rotateLeftButton.addEventListener('click', handleRotateLeft, {
        passive: true
    });
    rotateLeftButton.addEventListener('touchstart', handleRotateLeft, {
        passive: true
    });

    let element = document.createElement('div');
    element.className = 'ol-rotate-left ol-unselectable ol-control';
    element.appendChild(rotateLeftButton);

    ol.control.Control.call(this, {
        element: element,
        target: options.target,
    });

}
ol.inherits(RotateLeft, ol.control.Control);

, и я запускаю карту следующим образом:

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.OverviewMap(),
        new ol.control.FullScreen(),
        new RotateLeft()
    ]),
    target: 'mapid',
    layers: [mapbox],
    view: new ol.View({
        center: ol.proj.fromLonLat([30.00, 30.00]),
        zoom: 2
    })
});

, и по какой-то причине мой пользовательский элемент управленияпоказывается вне моего div карты, как показано ниже:

Кто-нибудь знает, что я сделал для этого и как я могу расположить кнопку где-нибудь разумно внутрикарта?

Спасибо