1

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 diventer image description here, but button click event is not firing.

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));
        }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.