OpenLayers setMap function is removing controls I have added

Question

I'm trying to extent Ol.Control with my own controls, like this:

class ZoomHistory extends ol.control.Control {
    constructor(opt_options) {
        var options = opt_options || {};        
        var controlDiv = document.createElement('div');
        controlDiv.className = options.className || 'btn-group mr-2';

        var backButton = document.createElement('button');
        backButton.className = options.backClassName || 'm-btn btn btn-secondary';
        backButton.textContent = options.backLabel || '';
        backButton.title = options.backTipLabel || 'Previous view';
        backButton.addEventListener('click', function (evt) {
            var history = _this.get('history');
            var index = _this.get('index');
            if (index > 0) {
                _this.setProperties({
                    shouldSave: false,
                    index: index - 1
                });
                _this.getMap().getView().setProperties(history[index - 1]);
            }
        });
        backButton.disabled = true;

        var img = document.createElement('img');
        img.src = '../images/zoom-last.png';
        img.alt = "Previous view";
        backButton.appendChild(img);

        controlDiv.appendChild(backButton);

        super({
            element: controlDiv,
            target: options.target
        });
        var _this = this;

        _this.setProperties({
            history: [],
            index: -1,
            maxSize: options.maxSize || 50,
            eventId: null,
            shouldSave: true
        });

        _this.on('change:index', function () {
            if (this.get('index') === 0) {
                backButton.disabled = true;
            } else {
                backButton.disabled = false;
            }
            if (this.get('history').length - 1 === this.get('index')) {
                nextButton.disabled = true;
            } else {
                nextButton.disabled = false;
            }
        });

    }
    setMap(map) {      
        if (map === null) {
            ol.Observable.unByKey(this.get('eventId'));
        } else {
            this.set('eventId', map.on('moveend', function (evt) {
                if (this.get('shouldSave')) {
                    var history = this.get('history');
                    var index = this.get('index');
                    history.splice(index + 1, history.length - index - 1);
                    if (history.length === this.get('maxSize')) {
                        history.splice(0, 1);
                    } else {
                        index += 1;
                    }
                    history.push(map.getView().getProperties());
                    this.set('index', index);
                } else {
                    this.set('shouldSave', true);
                }
            }, this));
        }
    }
}

When I add this control in the map, it is not adding the control(backButton)

var map = new ol.Map({
    target: 'm_gmap_1',
    controls: [       
        new GSPrint({ target: 'map_controls' }),
        new ZoomHistory({ target: 'map_controls' })
    ],

but when I comment setMap(map) function in ZoomHistory class, the controls(backbutton) is getting added inside map_controls div, but button click event is not firing.

Answer 1

I have fixed this by adding this line in setMap() ,

  ol.control.Control.prototype.setMap.call(this, map);


 setMap(map) {  
        ol.control.Control.prototype.setMap.call(this, map);
        if (map === null) {
            ol.Observable.unByKey(this.get('eventId'));
        } else {
            this.set('eventId', map.on('moveend', function (evt) {
                if (this.get('shouldSave')) {
                    var history = this.get('history');
                    var index = this.get('index');
                    history.splice(index + 1, history.length - index - 1);
                    if (history.length === this.get('maxSize')) {
                        history.splice(0, 1);
                    } else {
                        index += 1;
                    }
                    history.push(map.getView().getProperties());
                    this.set('index', index);
                } else {
                    this.set('shouldSave', true);
                }
            }, this));
        }
    }