Ошибка "this.createRegistry не является функцией" при попытке добавить слой Geojson на карту

Question

Следуя главе 3 "Освоение открытого слоя 3", я добавляю слой Geojson в дерево слоев на карте с помощью API 5. Код в книге:

 var layerTree = function (options) {
    'use strict';
    if (!(this instanceof layerTree)) {
        throw new Error('layerTree must be constructed with the new keyword.');
    } else if (typeof options === 'object' && options.map && options.target) {
        if (!(options.map instanceof ol.Map)) {
            throw new Error('Please provide a valid OpenLayers 3 map object.');
        }
        this.map = options.map;
        var containerDiv = document.getElementById(options.target);
        if (containerDiv === null || containerDiv.nodeType !== 1) {
            throw new Error('Please provide a valid element id.');
        }
        this.messages = document.getElementById(options.messages) || document.createElement('span');
        var controlDiv = document.createElement('div');
        controlDiv.className = 'layertree-buttons';
        controlDiv.appendChild(this.createButton('addwms', 'Add WMS Layer', 'addlayer'));
        controlDiv.appendChild(this.createButton('addwfs', 'Add WFS Layer', 'addlayer'));
        controlDiv.appendChild(this.createButton('addvector', 'Add Vector Layer', 'addlayer'));
        containerDiv.appendChild(controlDiv);
        this.layerContainer = document.createElement('div');
        this.layerContainer.className = 'layercontainer';
        containerDiv.appendChild(this.layerContainer);
        var idCounter = 0;
        this.createRegistry = function (layer, buffer) {
            layer.set('id', 'layer_' + idCounter);
            idCounter += 1;
            var layerDiv = document.createElement('div');
            layerDiv.className = buffer ? 'layer ol-unselectable buffering' : 'layer ol-unselectable';
            layerDiv.title = layer.get('name') || 'Unnamed Layer';
            layerDiv.id = layer.get('id');
            var layerSpan = document.createElement('span');
            layerSpan.textContent = layerDiv.title;
            layerDiv.appendChild(layerSpan);
            this.layerContainer.insertBefore(layerDiv, this.layerContainer.firstChild);
            return this;
        };
        this.map.getLayers().on('add', function (evt) {
            if (evt.element instanceof ol.layer.Vector) {
                this.createRegistry(evt.element, true);
            } else {
                this.createRegistry(evt.element);
            }
        }, this);
    } else {
        throw new Error('Invalid parameter(s) provided.');
    }
};

Мой код:

var layerTree = function(options) {
        'use strict';
        if(!(this instanceof layerTree)) {
            throw new Error('layerTree must be constructed with the new keyword.');
            } else if (typeof options === 'object' && options.map && options.target) {
            if (!(options.map instanceof Map)) {
                throw new Error('Please provide a valid OpenLayers 3 map object.');
            }
            this.map = options.map;
            var containerDiv = document.getElementById(options.target);
            if (containerDiv === null || containerDiv.nodeType !== 1) {
                throw new Error('Please provide a valid element id.');
            }
            this.messages = document.getElementById(options.messages) || document.createElement('span');
            var controlDiv = document.createElement('div');
            controlDiv.className = 'layertree-buttons';
            controlDiv.appendChild(this.createButton('addwms', 'Add WMS Layer', 'addlayer'));
            controlDiv.appendChild(this.createButton('addwfs', 'Add WFS Layer', 'addlayer'));
            controlDiv.appendChild(this.createButton('addvector', 'Add Vector Layer', 'addlayer'));
            containerDiv.appendChild(controlDiv);
            this.layerContainer = document.createElement('div');
            this.layerContainer.className = 'layercontainer';
            containerDiv.appendChild(this.layerContainer);
            var idCounter = 0;
            this.createRegistry = function(layer, buffer) {
                layer.set('id', 'layer_' + idCounter);
                idCounter += 1;
                var layerDiv = document.createElement('div');
                layerDiv.className = buffer ? 'layer ol-unselectable buffering' : 'layer ol-unselectable';
                layerDiv.title = layer.get('title') || 'Unnamed Layer';
                layerDiv.id = layer.get('id');
                var layerSpan = document.createElement('span');
                layerSpan.textContent = layerDiv.title;
                layerDiv.appendChild(layerSpan);
                this.layerContainer.insertBefore(layerDiv, this.layerContainer.firstChild);
                return this;
            };
            this.map.getLayers().on('add', function (evt) {
                if (evt.element instanceof VectorLayer) {
                    this.createRegistry(evt.element, true);
                } else {
                    this.createRegistry(evt.element);
                }
            }, this);
            } else {
            throw new Error('Invalid parameter(s) provided.');
        }
    };

Моя ошибка: сообщение об ошибке

код отладки

Пожалуйста, помогите мне решить эту проблему? В чем разница между "evt.element instanceof ol.layer.Vector" и "evt.element instanceof VectorLayer"? Спасибо