diff --git a/src/Mapbender/DataManagerBundle/Element/DataManager.php b/src/Mapbender/DataManagerBundle/Element/DataManager.php
index e9ba3322..d35b4663 100644
--- a/src/Mapbender/DataManagerBundle/Element/DataManager.php
+++ b/src/Mapbender/DataManagerBundle/Element/DataManager.php
@@ -44,7 +44,7 @@ public static function getClassDescription()
 
     public function getWidgetName(Element $element)
     {
-        return 'mapbender.mbDataManager';
+        return 'MbDataManager';
     }
 
     public static function getDefaultConfiguration()
@@ -73,7 +73,7 @@ public function getRequiredAssets(Element $element)
                 '@MapbenderDataManagerBundle/Resources/public/DialogFactory.js',
                 '../vendor/blueimp/jquery-file-upload/js/jquery.fileupload.js',
                 '@MapbenderDataManagerBundle/Resources/public/TableRenderer.js',
-                '@MapbenderDataManagerBundle/Resources/public/dataManager.element.js',
+                '@MapbenderDataManagerBundle/Resources/public/MbDataManager.js',
             ),
             'trans' => array(
                 'mb.data-manager.*',
diff --git a/src/Mapbender/DataManagerBundle/Resources/public/dataManager.element.js b/src/Mapbender/DataManagerBundle/Resources/public/MbDataManager.js
similarity index 64%
rename from src/Mapbender/DataManagerBundle/Resources/public/dataManager.element.js
rename to src/Mapbender/DataManagerBundle/Resources/public/MbDataManager.js
index e74e3e15..b6f2b9d0 100644
--- a/src/Mapbender/DataManagerBundle/Resources/public/dataManager.element.js
+++ b/src/Mapbender/DataManagerBundle/Resources/public/MbDataManager.js
@@ -1,87 +1,43 @@
-(function($) {
-    /**
-     * @typedef {Object} DataManagerItem
-     */
-    /**
-     * @typedef {Object} DataStoreConfig
-     * @property {String} id
-     * @property {String} uniqueId
-     */
-    /**
-     * @typedef {Object} DataManagerSchemaConfig
-     * @property {String} schemaName identifier for schema
-     * @property {Array<String>} [combine]
-     * @property {DataStoreConfig} dataStore
-     * @property {boolean} allowEdit
-     * @property {boolean} allowCreate
-     * @property {boolean} allowDelete
-     * @property {boolean} allowRefresh
-     * @property {String} label
-     * @property {Array<*>} formItems
-     * @property {Object} popup
-     * @property {String} popup.title
-     * @property {String} popup.width
-     * @property {*} table
-     */
-    /**
-     * @typedef {Object} DataManagagerBaseEventData
-     * @property {Object} item
-     * @property {String} itemId
-     * @property {DataManagerSchemaConfig} schema
-     * @property {*} originator sending widget instance
-     */
-    /**
-     * @typedef {DataManagagerBaseEventData} DataManagerDeletedEventData
-     * @property {String} schemaName
-     * @property {Object} feature digitizer / bc amenity
-     */
-    /**
-     * @typedef {DataManagagerBaseEventData} DataManagagerSaveEventData
-     * @property {(String|null)} originalId null for newly saved item
-     * @property {String} uniqueIdKey legacy: name of attribute on item that contains id
-     * @property {String} schemaName identifier for schema
-     * @property {String} scheme legacy (ambiguous): alias for schemaName
-     */
-
-    $.widget("mapbender.mbDataManager", {
-        options: {
-            /** @type {Object<String, DataManagerSchemaConfig>} */
-            schemes: {}
-        },
-        /** @type {(DataManagerSchemaConfig|null)} */
-        currentSettings: null,
-        toolsetTemplate_: null,
-        tableButtonsTemplate_: null,
-        fetchXhr: null,
-        $loadingIndicator_: null,
-        /** @type {Promise|null} */
-        grantsRequest_: null,
-
-        _create: function() {
-            if (Array.isArray(this.options.schemes) || !Object.keys(this.options.schemes).length) {
-                throw new Error("Missing schema configuration");
+(function() {
+
+    class MbDataManager extends MapbenderElement {
+        constructor(configuration, $element) {
+            super(configuration, $element);
+
+            this.currentSettings = null;
+            this.toolsetTemplate_ = null;
+            this.tableButtonsTemplate_ = null;
+            this.fetchXhr = null;
+            this.$loadingIndicator_ = null;
+            this.grantsRequest_ = null;
+            this.formRenderer_ = null;
+            this.dialogFactory_ = null;
+            this.tableRenderer = null;
+            this.currentPopup = null;
+
+            if (Array.isArray(this.options.schemes) || !Object.keys(this.options.schemes || {}).length) {
+                throw new Error('Missing schema configuration');
             }
             this.elementUrl = [
                 Mapbender.configuration.application.urls.element,
-                this.element.attr('id'),
-                ''  // produce trailing slash
+                this.$element.attr('id'),
+                '' // produce trailing slash
             ].join('/');
-            this.$loadingIndicator_ = $('.loading-indicator', this.element);
-            var $accordionHeader = this.element.parentsUntil('.sidePane', '.container-accordion').prev('.accordion');
+            this.$loadingIndicator_ = $('.loading-indicator', this.$element);
+            const $accordionHeader = this.$element.parentsUntil('.sidePane', '.container-accordion').prev('.accordion');
             if ($accordionHeader.length) {
                 this.$loadingIndicator_.remove();
                 $accordionHeader
                     .addClass('clearfix')
-                    .prepend(this.$loadingIndicator_.css({float: 'right', opacity: 0.0}))
-                ;
+                    .prepend(this.$loadingIndicator_.css({ float: 'right', opacity: 0.0 }));
             }
-            var self = this;
+            const self = this;
             this.grantsRequest_ = $.getJSON([this.elementUrl, 'grants'].join(''));
             this.grantsRequest_.then((function(mergeWith) {
                 return function(allGrants) {
-                    var schemaNames = Object.keys(allGrants);
-                    for (var i = 0; i < schemaNames.length; ++i) {
-                        var schemaName = schemaNames[i];
+                    const schemaNames = Object.keys(allGrants);
+                    for (let i = 0; i < schemaNames.length; ++i) {
+                        const schemaName = schemaNames[i];
                         if (allGrants[schemaName] === false) {
                             delete mergeWith[schemaName];
                         } else {
@@ -94,209 +50,220 @@
             this.grantsRequest_.then(function() {
                 self.updateSchemaSelector_();
             });
-            this.tableButtonsTemplate_ = $('.-tpl-table-buttons', this.element).remove().css('display', '').html();
-            this.toolsetTemplate_ = $('.-tpl-toolset', this.element).remove().css('display', '').html();
+            this.tableButtonsTemplate_ = $('.-tpl-table-buttons', this.$element).remove().css('display', '').html();
+            this.toolsetTemplate_ = $('.-tpl-toolset', this.$element).remove().css('display', '').html();
             this.formRenderer_ = this._createFormRenderer();
             this.dialogFactory_ = Mapbender.DataManager.DialogFactory;
-            var schemaNames = Object.keys(this.options.schemes);
-            for (var s = 0; s < schemaNames.length; ++s) {
-                var schemaName = schemaNames[s];
-                var schema = this.options.schemes[schemaName];
+            const schemaNames = Object.keys(this.options.schemes);
+            for (let s = 0; s < schemaNames.length; ++s) {
+                const schemaName = schemaNames[s];
+                const schema = this.options.schemes[schemaName];
                 if (!schema.combine) {
-                    var fileConfigs = this._getDataStoreFromSchema(schema).files || [];
-                    var schemaBaseUrl = [this.elementUrl, schemaName, '/'].join('');
+                    const fileConfigs = this._getDataStoreFromSchema(schema).files || [];
+                    const schemaBaseUrl = [this.elementUrl, schemaName, '/'].join('');
                     this.formRenderer_.prepareItems(schema.formItems || [], schemaBaseUrl, fileConfigs);
                 }
             }
             this.tableRenderer = this._createTableRenderer();
             this._initializeEvents();
             this._afterCreate();
-        },
-        _createFormRenderer: function() {
+        }
+
+        _createFormRenderer() {
             return new Mapbender.DataManager.FormRenderer();
-        },
-        _createTableRenderer: function() {
+        }
+
+        _createTableRenderer() {
             return new Mapbender.DataManager.TableRenderer(this, this.tableButtonsTemplate_);
-        },
-        /**
-         * @private
-         */
-        updateSchemaSelector_: function() {
-            var self = this;
-            var $select = $('select.-fn-schema-selector', this.element);
-            var schemaNames = Object.keys(this.options.schemes);
-            var visible = schemaNames.filter(function(schemaName) {
+        }
+
+        updateSchemaSelector_() {
+            const self = this;
+            const $select = $('select.-fn-schema-selector', this.$element);
+            const schemaNames = Object.keys(this.options.schemes);
+            const visible = schemaNames.filter(function(schemaName) {
                 return self.options.schemes[schemaName].listed;
             });
-
             if (visible.length === 1) {
                 $select.hide();
-                var singleScheme = this.options.schemes[visible[0]];
-                var title = singleScheme.label || singleScheme.schemaName;
+                const singleScheme = this.options.schemes[visible[0]];
+                const title = singleScheme.label || singleScheme.schemaName;
                 if (title) {
                     $select.before($('<h3 class="title"/>').text(title));
                 }
             }
-            // build select options
             $select.empty();
-            for (var i = 0; i < visible.length; ++i) {
-                var schemaConfig = this.options.schemes[visible[i]];
-                var option = $("<option/>");
+            for (let i = 0; i < visible.length; ++i) {
+                const schemaConfig = this.options.schemes[visible[i]];
+                const option = $('<option/>');
                 option.val(schemaConfig.schemaName).text(schemaConfig.label);
                 option.data('schema', schemaConfig);
                 $select.append(option);
             }
-        },
-        getItemSchema: function(item) {
+        }
+
+        getItemSchema(item) {
             return this.options.schemes[item.schemaName];
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig|String} schema
          * @return {Array<DataManagerSchemaConfig>}
          */
-        expandCombination: function(schema) {
-            var expanded = [];
-            var schema0 = (typeof schema === 'string') && this.options.schemes[schema] || schema;
+        expandCombination(schema) {
+            const expanded = [];
+            const schema0 = (typeof schema === 'string') && this.options.schemes[schema] || schema;
             if (!schema0.combine) {
                 expanded.push(schema0);
             } else {
-                for (var i = 0; i < schema0.combine.length; ++i) {
-                    var subschemaName = schema0.combine[i];
-                    // Schema may have been pruned after loading grants
+                for (let i = 0; i < schema0.combine.length; ++i) {
+                    const subschemaName = schema0.combine[i];
                     if (this.options.schemes[subschemaName]) {
                         expanded.push(this.options.schemes[subschemaName]);
                     }
                 }
             }
             return expanded;
-        },
+        }
+
         /**
          * Unraveled from _create for child class actions after initialization, but
          * before triggering ready event and loading the first set of data.
          * @private
          */
-        _afterCreate: function() {
+        _afterCreate() {
             this._start();
-        },
+        }
+
         /**
          * Loads and displays data from initially selected schema.
          * Unraveled from _create for child classes need to act after our initialization,
          * but before loading the first set of data.
          * @private
          */
-        _start: function() {
-            this._trigger('ready');
+        _start() {
+            Mapbender.elementRegistry.markReady(this.$element.attr('id'));
             if (!this.skipInitialData_()) {
                 // Use schema change event, it does everything we need
-                $('.-fn-schema-selector', this.element).trigger('change');
+                $('.-fn-schema-selector', this.$element).trigger('change');
             }
-        },
-        skipInitialData_: function() {
-            return !!this.element.parents('.contentPane').length;
-        },
-        _initializeEvents: function() {
-            var self = this;
-            $('.-fn-schema-selector', this.element).on('change', function() {
+        }
+
+        skipInitialData_() {
+            return !!this.$element.parents('.contentPane').length;
+        }
+
+        _initializeEvents() {
+            const self = this;
+            $('.-fn-schema-selector', this.$element).on('change', function() {
                 self._onSchemaSelectorChange();
             });
-            this.element.on('click', '.-fn-edit-data', function() {
-                var $tr = $(this).closest('tr');
+            this.$element.on('click', '.-fn-edit-data', function() {
+                const $tr = $(this).closest('tr');
                 self._openEditDialog($tr.data('schema'), $tr.data('item'));
             });
-            this.element.on('click', '.-fn-delete', function() {
-                var $tr = $(this).closest('tr');
+            this.$element.on('click', '.-fn-delete', function() {
+                const $tr = $(this).closest('tr');
                 self.removeData($tr.data('schema'), $tr.data('item'));
             });
-            this.element.on('click', '.-fn-refresh', function() {
+            this.$element.on('click', '.-fn-refresh', function() {
                 self._getData(self._getCurrentSchema());
             });
-            this.element.on('click', '.-fn-create-item', function() {
+            this.$element.on('click', '.-fn-create-item', function() {
                 self._createItem(self._getCurrentSchema());
             });
-        },
+        }
+
         /**
          * Mapbender sidepane interaction API
          */
-        hide: function() {
+        hide() {
             this._closeCurrentPopup();
-        },
+        }
+
         /**
          * @todo Digitizer: use .featureType attribute instead of .dataStore (otherwise equivalent)
          * @param {DataManagerSchemaConfig} schema
          * @return {DataStoreConfig}
          */
-        _getDataStoreFromSchema: function(schema) {
+        _getDataStoreFromSchema(schema) {
             return schema.dataStore;
-        },
-        _closeCurrentPopup: function() {
+        }
+
+        _closeCurrentPopup() {
             if (this.currentPopup) {
                 if (this.currentPopup.dialog('instance')) {
                     this.currentPopup.dialog('destroy');
                 }
                 this.currentPopup = null;
             }
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @private
          */
-        _activateSchema: function(schema) {
+        _activateSchema(schema) {
             if (this.currentSettings) {
                 this._deactivateSchema(this.currentSettings);
                 this.currentSettings = null;
             }
             this.currentSettings = schema;
             this._updateToolset(schema);
-            $('.data-container', this.element)
+            $('.data-container', this.$element)
                 .empty()
                 .append(this.tableRenderer.render(schema))
             ;
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @private
          */
-        _deactivateSchema: function(schema) {
+        _deactivateSchema(schema) {
             this._closeCurrentPopup();
-        },
-        _getCurrentSchema: function () {
-            const $select = $('.-fn-schema-selector', this.element);
+        }
+
+        _getCurrentSchema() {
+            const $select = $('.-fn-schema-selector', this.$element);
             const option = $('option:selected', $select);
             if (option.data('schema')) return option.data('schema');
             const schemaKeys = Object.keys(this.options['schemes']);
             if (schemaKeys.length === 0) {
-                Mapbender.error('Configuration error: Element ' + this.element.attr('id') + ' has no schema defined');
+                Mapbender.error('Configuration error: Element ' + this.$element.attr('id') + ' has no schema defined');
                 throw new Error('No schema defined');
             }
             const firstSchemaKey = schemaKeys[0];
-            return this.options["schemes"][firstSchemaKey];
-        },
-        _onSchemaSelectorChange: function() {
-            var schemaNew = this._getCurrentSchema();
+            return this.options['schemes'][firstSchemaKey];
+        }
+
+        _onSchemaSelectorChange() {
+            const schemaNew = this._getCurrentSchema();
             this._activateSchema(schemaNew);
             this._getData(schemaNew);
-        },
+        }
+
         /**
          * @param {jQuery} $container
          * @param {DataManagerSchemaConfig} schema
          * @private
          */
-        _updateToolset: function(schema) {
-            $('.toolset', this.element).replaceWith(this.toolsetTemplate_);
-            var $toolset = $('.toolset', this.element);
+        _updateToolset(schema) {
+            $('.toolset', this.$element).replaceWith(this.toolsetTemplate_);
+            const $toolset = $('.toolset', this.$element);
             let allowRefresh = schema.allowRefresh;
             if (schema.combine) {
-                // Combination schema cannot create items
                 $('.-fn-create-item', $toolset).remove();
-                var subSchemas = this.expandCombination(schema);
-                for (var s = 0; s < subSchemas.length; ++s) {
+                const subSchemas = this.expandCombination(schema);
+                for (let s = 0; s < subSchemas.length; ++s) {
                     allowRefresh = allowRefresh || subSchemas[s].allowRefresh;
                 }
             }
             if (!allowRefresh) {
                 $('.-fn-refresh', $toolset).remove();
             }
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @param {Object} dataItem
@@ -304,23 +271,24 @@
          * @return {Promise}
          * @private
          */
-        _saveItem: function(schema, dataItem, newValues) {
-            var self = this;
-            var params = {
+        _saveItem(schema, dataItem, newValues) {
+            const self = this;
+            const params = {
                 schema: schema.schemaName
             };
-            var id = this._getUniqueItemId(dataItem);
+            const id = this._getUniqueItemId(dataItem);
             if (id) {
                 params.id = id;
             }
-            var submitData = this._getSaveRequestData(schema, dataItem, newValues);
+            const submitData = this._getSaveRequestData(schema, dataItem, newValues);
             return this.postJSON('save?' + $.param(params), submitData)
                 .then(function(response) {
                     self._afterSave(schema, dataItem, id, response);
                     return response;
                 })
             ;
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @param {Object} dataItem
@@ -328,11 +296,12 @@
          * @return {{dataItem: *}}
          * @private
          */
-        _getSaveRequestData: function(schema, dataItem, newValues) {
+        _getSaveRequestData(schema, dataItem, newValues) {
             return {
                 properties: Object.assign({}, this._getItemData(dataItem), newValues || {})
             };
-        },
+        }
+
         /**
          * Produces event after item has been saved on the server.
          * New items have a null originalId. Updated items have a non-empty originalId.
@@ -342,9 +311,8 @@
          * @param {(String|null)} originalId
          * @private
          */
-        _saveEvent: function(schema, dataItem, originalId) {
-            /** @var {DataManagagerSaveEventData} eventData */
-            var eventData = {
+        _saveEvent(schema, dataItem, originalId) {
+            const eventData = {
                 item: dataItem,
                 itemId: this._getUniqueItemId(dataItem),
                 originalId: originalId,
@@ -354,8 +322,9 @@
                 scheme: schema.schemaName,
                 originator: this
             };
-            this.element.trigger('data.manager.item.saved', eventData);
-        },
+            this.$element.trigger('data.manager.item.saved', eventData);
+        }
+
         /**
          * Called after item has been stored on the server.
          * New items have a null originalId. Updated items have a non-empty originalId.
@@ -366,7 +335,7 @@
          * @param {Object} responseData
          * @private
          */
-        _afterSave: function(schema, dataItem, originalId, responseData) {
+        _afterSave(schema, dataItem, originalId, responseData) {
             if (responseData.dataItem) {
                 this._replaceItemData(schema, dataItem, responseData.dataItem);
             }
@@ -378,30 +347,32 @@
             }
             this._saveEvent(schema, dataItem, originalId);
             $.notify(Mapbender.trans('mb.data.store.save.successfully'), 'info');
-        },
-        _updateCalculatedText: function ($elements, data) {
+        }
+
+        _updateCalculatedText($elements, data) {
             $elements.each((index, element) => {
                 const expression = $(element).attr('data-expression');
-                const content = function (data) {
+                const content = (function(data_) {
                     return eval(expression);
-                }(data);
-
+                })(data);
                 if ($(element).attr('data-html-expression')) {
                     $(element).html(content);
                 } else {
                     $(element).text(content);
                 }
             });
-        },
+        }
+
         /**
          * @param {jQuery} $form
          * @return {Object|boolean} false on any invalid form inputs
          * @private
          */
-        _getFormData: function($form) {
-            var valid = Mapbender.DataManager.FormUtil.validateForm($form);
+        _getFormData($form) {
+            const valid = Mapbender.DataManager.FormUtil.validateForm($form);
             return valid && Mapbender.DataManager.FormUtil.extractValues($form, true);
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @param {jQuery} $scope
@@ -409,27 +380,28 @@
          * @return {boolean|Promise}
          * @private
          */
-        _submitFormData: function(schema, $scope, dataItem) {
-            var formData = this._getFormData($scope);
-
+        _submitFormData(schema, $scope, dataItem) {
+            const formData = this._getFormData($scope);
             if (formData) {
-                var uniqueIdAttribute = this._getUniqueItemIdProperty(schema);
+                const uniqueIdAttribute = this._getUniqueItemIdProperty(schema);
                 if (typeof formData[uniqueIdAttribute] !== 'undefined') {
-                    console.warn("Form contains an input field for the object id", schema);
+                    console.warn('Form contains an input field for the object id', schema);
                 }
                 delete formData[uniqueIdAttribute];
                 return this._saveItem(schema, dataItem, formData);
             } else {
                 return false;
             }
-        },
+        }
+
         /**
          * Gets persistent data properties of the item
          * @return {Object}
          */
-        _getItemData: function(dataItem) {
+        _getItemData(dataItem) {
             return dataItem.properties;
-        },
+        }
+
         /**
          * Places updated data (from form or otherwise) back into the item
          *
@@ -438,9 +410,10 @@
          * @param {Object} newValues
          * @private
          */
-        _replaceItemData: function(schema, dataItem, newValues) {
+        _replaceItemData(schema, dataItem, newValues) {
             Object.assign(dataItem.properties, newValues.properties);
-        },
+        }
+
         /**
          * Open edit feature dialog
          *
@@ -448,12 +421,11 @@
          * @param {Object} dataItem
          * @private
          */
-        _openEditDialog: function(schema, dataItem) {
-            var widget = this;
+        _openEditDialog(schema, dataItem) {
+            const widget = this;
             this._closeCurrentPopup();
-            var itemValues = this._getItemData(dataItem);
-
-            var dialog = $("<div/>");
+            const itemValues = this._getItemData(dataItem);
+            const dialog = $('<div/>');
             dialog.data('item', dataItem);
             dialog.data('schema', schema);
             dialog.attr('data-item-id', this._getUniqueItemId(dataItem));
@@ -461,34 +433,31 @@
             if (!schema.allowEdit) {
                 $('.-fn-delete-attachment', dialog).remove();
             }
-            var dialogOptions = this._getEditDialogPopupConfig(schema, dataItem);
+            const dialogOptions = this._getEditDialogPopupConfig(schema, dataItem);
             if (!$('> .ui-tabs', dialog).length) {
                 dialog.addClass('content-padding');
             }
             this.dialogFactory_.dialog(dialog, dialogOptions);
             widget.currentPopup = dialog;
             Mapbender.DataManager.FormUtil.setValues(dialog, itemValues);
-            var schemaBaseUrl = [this.elementUrl, schema.schemaName, '/'].join('');
+            const schemaBaseUrl = [this.elementUrl, schema.schemaName, '/'].join('');
             this.formRenderer_.updateFileInputs(dialog, schemaBaseUrl, itemValues);
             // Legacy custom vis-ui event shenanigans
             $('.-js-custom-events[name]', dialog).each(function() {
-                $(this).trigger('filled', {data: itemValues, value: itemValues[$(this).attr('name')]});
+                $(this).trigger('filled', { data: itemValues, value: itemValues[$(this).attr('name')] });
             });
-
             this._updateCalculatedText($('.-fn-calculated-text', dialog), itemValues);
-
             dialog.on('click', '.mb-3 .-fn-copytoclipboard', function() {
-                var $input = $(':input', $(this).closest('.mb-3'));
+                const $input = $(':input', $(this).closest('.mb-3'));
                 Mapbender.DataManager.FormUtil.copyToClipboard($input);
             });
             this.formRenderer_.initializeWidgets(dialog, schemaBaseUrl);
-
             dialog.one('dialogclose', function() {
                 widget._cancelForm(schema, dataItem);
             });
-
             return dialog;
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @param {Object} dataItem
@@ -496,15 +465,15 @@
          * @see https://api.jqueryui.com/1.12/dialog/
          * @private
          */
-        _getEditDialogPopupConfig: function(schema, dataItem) {
-            var width = schema.popup.width;
+        _getEditDialogPopupConfig(schema, dataItem) {
+            let width = schema.popup.width;
             // NOTE: unlike width, which allows CSS units, minWidth option is expected to be a pure pixel number
-            var minWidth = 550;
+            let minWidth = 550;
             if (/\d+px/.test(width || '')) {
-                minWidth = parseInt(width.replace(/px$/, '')) || minWidth
+                minWidth = parseInt(width.replace(/px$/, '')) || minWidth;
             }
             return {
-                position:  schema.popup.position || {},
+                position: schema.popup.position || {},
                 modal: schema.popup.modal || false,
                 title: schema.popup.title || Mapbender.trans('mb.data-manager.details_title'),
                 width: schema.popup.width,
@@ -514,7 +483,8 @@
                 },
                 buttons: this._getEditDialogButtons(schema, dataItem)
             };
-        },
+        }
+
         /**
          *
          * @param {DataManagerSchemaConfig} schema
@@ -522,17 +492,16 @@
          * @return {Array<Object>}
          * @private
          */
-        _getEditDialogButtons: function(schema, dataItem, overrideAllowSave) {
-            var buttons = [];
-            var widget = this;
+        _getEditDialogButtons(schema, dataItem, overrideAllowSave) {
+            const buttons = [];
+            const widget = this;
             if (schema.allowEdit || overrideAllowSave) {
                 buttons.push({
                     text: Mapbender.trans('mb.actions.save'),
-                    title: Mapbender.trans('mb.data-manager.actions.save_tooltip'),
                     'class': 'btn btn-primary',
                     click: function() {
-                        var $scope = $(this).closest('.ui-dialog-content');
-                        var saved = widget._submitFormData(schema, $scope, dataItem);
+                        const $scope = $(this).closest('.ui-dialog-content');
+                        const saved = widget._submitFormData(schema, $scope, dataItem);
                         if (saved) {
                             saved.then(function() {
                                 widget._closeCurrentPopup();
@@ -552,8 +521,8 @@
                     }
                 });
             }
-            var closeText = buttons.length && 'mb.actions.cancel' || 'mb.actions.close';
-            var closeTooltip = buttons.length && 'mb.data-manager.actions.cancel_tooltip' || 'mb.data-manager.actions.close_tooltip';
+            const closeText = buttons.length && 'mb.actions.cancel' || 'mb.actions.close';
+            const closeTooltip = buttons.length && 'mb.data-manager.actions.cancel_tooltip' || 'mb.data-manager.actions.close_tooltip';
             buttons.push({
                 text: Mapbender.trans(closeText),
                 title: Mapbender.trans(closeTooltip),
@@ -563,45 +532,49 @@
                 }
             });
             return buttons;
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @private
          */
-        _createItem: function(schema) {
+        _createItem(schema) {
             this._openEditDialog(schema, {
                 id: null,
                 schemaName: schema.schemaName,
                 properties: {}
             });
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @param {Object} dataItem
          * @private
          */
-        _cancelForm: function(schema, dataItem) {
+        _cancelForm(schema, dataItem) {
             this._closeCurrentPopup();
-            // @todo Digitizer: discard geometry modifications / discard entire item if it's new
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @return {Object}
          */
-        _getSelectRequestParams: function(schema) {
+        _getSelectRequestParams(schema) {
             return {
                 schema: schema.schemaName
             };
-        },
+        }
+
         /**
          * Loads data items with explicit request params, without side effects.
          *
          * @param {Object} params
          * @returns {jqXHR} resolves with prepared items
          */
-        loadItems: function(params) {
+        loadItems(params) {
             return $.getJSON([this.elementUrl, 'select'].join(''), params);
-        },
+        }
+
         /**
          * Loads data items, and replaces current table (Digitizer: and map layer contents).
          * Aborts previous pending item request.
@@ -611,15 +584,15 @@
          * @returns {Promise} resolves with prepared items
          * @private
          */
-        _getData: function(schema) {
-            var widget = this;
+        _getData(schema) {
+            const widget = this;
             if (this.fetchXhr) {
                 this.fetchXhr.abort();
                 this.fetchXhr = null;
             }
             this._closeCurrentPopup();
-            this.$loadingIndicator_.css({opacity: 1});
-            this.fetchXhr = this.decorateXhr_(this.loadItems(this._getSelectRequestParams(schema)), this.$loadingIndicator_)
+            this.$loadingIndicator_.css({ opacity: 1 });
+            this.fetchXhr = this.decorateXhr_(this.loadItems(this._getSelectRequestParams(schema)), this.$loadingIndicator_);
             return this.fetchXhr
                 .always(function() {
                     widget.fetchXhr = null;
@@ -632,33 +605,34 @@
                 .then(function(preparedItems) {
                     widget.tableRenderer.replaceRows(preparedItems);
                     return preparedItems;
-                })
-            ;
-        },
+                });
+        }
+
         /**
          * Transforms data item server response data to internally used item structure.
          * @param {Object} data
          * @return {*}
          * @private
          */
-        _prepareDataItem: function(data) {
+        _prepareDataItem(data) {
             // Trivial in data-manager. Use plain object directly.
             return data;
-        },
+        }
+
         /**
          * Remove data item
          *
          * @param {DataManagerSchemaConfig} schema
          * @param {Object} dataItem
          */
-        removeData: function(schema, dataItem) {
-            var widget = this;
-            var id = this._getUniqueItemId(dataItem);
+        removeData(schema, dataItem) {
+            const widget = this;
+            const id = this._getUniqueItemId(dataItem);
             if (!id) {
                 throw new Error("Can't delete item without id from server");
             }
             this.confirmDialog(Mapbender.trans('mb.data.store.remove.confirm.text')).then(function() {
-                var params ={
+                const params = {
                     schema: schema.schemaName,
                     id: id
                 };
@@ -668,7 +642,8 @@
                     widget._afterRemove(schema, dataItem, id);
                 });
             });
-        },
+        }
+
         /**
          * Produces event after item has been deleted server-side
          *
@@ -677,14 +652,13 @@
          * @param id
          * @private
          */
-        _deleteEvent: function(schema, dataItem, id) {
+        _deleteEvent(schema, dataItem, id) {
             // Quirky jquery ui event. Triggers a 'mbdatamanagerremove' on this.element. Limited legacy data payload.
-            this._trigger('removed', null, {
+            this._trigger('removed', {
                 schema: schema,
                 feature: dataItem
             });
-            /** @type {DataManagerDeletedEventData} */
-            var eventData = {
+            const eventData = {
                 schema: schema,
                 schemaName: schema.schemaName,
                 item: dataItem,
@@ -697,8 +671,9 @@
 
             // Listeners should prefer data.manager.item.deleted because a) it is much easier to search for non-magic, explicit
             // event names in project code; b) it contains more data
-            this.element.trigger('data.manager.item.deleted', eventData);
-        },
+            this.$element.trigger('data.manager.item.deleted', eventData);
+        }
+
         /**
          * Called after item has been deleted from the server
          *
@@ -707,31 +682,33 @@
          * @param {String} id
          * @private
          */
-        _afterRemove: function(schema, dataItem, id) {
+        _afterRemove(schema, dataItem, id) {
             this.tableRenderer.removeRow(dataItem);
             this._deleteEvent(schema, dataItem, id);
             $.notify(Mapbender.trans('mb.data.store.remove.successfully'), 'info');
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @return {String}
          * @private
          */
-        _getUniqueItemIdProperty: function(schema) {
-            // @todo: this default should be server provided
+        _getUniqueItemIdProperty(schema) {
             return this._getDataStoreFromSchema(schema).uniqueId || 'id';
-        },
+        }
+
         /**
          * @param {DataManagerSchemaConfig} schema
          * @param {Object} item
          * @return {(String|null)}
          * @private
          */
-        _getUniqueItemId: function(item) {
+        _getUniqueItemId(item) {
             return item.id || null;
-        },
-        postJSON: function(uri, data, options) {
-            var options_ = {
+        }
+
+        postJSON(uri, data, options) {
+            const options_ = {
                 url: this.elementUrl + uri,
                 method: 'POST',
                 contentType: 'application/json; charset=utf-8',
@@ -741,49 +718,54 @@
             if (data && !options_.data) {
                 options_.data = JSON.stringify(data);
             }
-            this.$loadingIndicator_.css({opacity: 1});
+            this.$loadingIndicator_.css({ opacity: 1 });
             return this.decorateXhr_($.ajax(options_), this.$loadingIndicator_);
-        },
-        decorateXhr_: function(jqXhr, $loadingIndicator) {
+        }
+
+        decorateXhr_(jqXhr, $loadingIndicator) {
             if ($loadingIndicator) {
                 jqXhr.always(function() {
-                    $loadingIndicator.css({opacity: 0});
+                    $loadingIndicator.css({ opacity: 0 });
                 });
             }
             jqXhr.fail(this._onAjaxError);
             return jqXhr;
-        },
-        _onAjaxError: function(xhr) {
+        }
+
+        _onAjaxError(xhr) {
             if (xhr.statusText === 'abort') {
                 return;
             }
-            var errorMessage = Mapbender.trans('mb.data.store.api.query.error-message');
-            var responseErrorMessage = Mapbender.trans('mb.data.store.'+xhr.responseJSON.message);
+            let errorMessage = Mapbender.trans('mb.data.store.api.query.error-message');
+            let responseErrorMessage = Mapbender.trans('mb.data.store.'+xhr.responseJSON.message);
             console.error(errorMessage, xhr);
             if (xhr.responseJSON && xhr.responseJSON.message) {
-                errorMessage = [errorMessage, responseErrorMessage].join(":\n");
+                errorMessage = [errorMessage, responseErrorMessage].join(':\n');
             }
             $.notify(errorMessage, {
                 autoHide: false
             });
-        },
-        getEnabledSchemaFunctionCodes: function(schema) {
-            var codes = ['-fn-edit-data'];
+        }
+
+        getEnabledSchemaFunctionCodes(schema) {
+            const codes = ['-fn-edit-data'];
             if (schema.allowDelete) {
                 codes.push('-fn-delete');
             }
             return codes;
-        },
+        }
+
         /**
          * Promise-based confirmation dialog utility.
          * @param {String} title
          * @return {Promise}
          * @static
          */
-        confirmDialog: function confirmDialog(title) {
+        confirmDialog(title) {
             return this.dialogFactory_.confirm(title);
-        },
-        __dummy: null
-    });
+        }
+    }
 
-})(jQuery);
+    window.Mapbender.Element = window.Mapbender.Element || {};
+    window.Mapbender.Element.MbDataManager = MbDataManager;
+})();
diff --git a/src/Mapbender/DataManagerBundle/Resources/public/TableRenderer.js b/src/Mapbender/DataManagerBundle/Resources/public/TableRenderer.js
index 8dee3a01..18a955de 100644
--- a/src/Mapbender/DataManagerBundle/Resources/public/TableRenderer.js
+++ b/src/Mapbender/DataManagerBundle/Resources/public/TableRenderer.js
@@ -25,7 +25,7 @@
      */
     Mapbender.DataManager.TableRenderer = function TableRenderer(owner, buttonsTemplate) {
         this.owner = owner;
-        this.scope = owner.element.get(0);
+        this.scope = owner.$element.get(0);
         this.buttonsTemplate = buttonsTemplate;
         this.buttonMarkupCache_ = {};
     }
diff --git a/src/Mapbender/DigitizerBundle/Element/Digitizer.php b/src/Mapbender/DigitizerBundle/Element/Digitizer.php
index 03df17ee..150117c9 100644
--- a/src/Mapbender/DigitizerBundle/Element/Digitizer.php
+++ b/src/Mapbender/DigitizerBundle/Element/Digitizer.php
@@ -26,7 +26,7 @@ public static function getClassDescription()
 
     public function getWidgetName(Element $element)
     {
-        return 'mapbender.mbDigitizer';
+        return 'MbDigitizer';
     }
 
     public function getView(Element $element)
@@ -50,7 +50,7 @@ public function getRequiredAssets(Element $element)
         return array(
             'js' => array_merge($dataManagerAssets["js"], array(
                 "@MapbenderDigitizerBundle/Resources/public/ol6-compat.js",
-                "@MapbenderDigitizerBundle/Resources/public/mapbender.element.digitizer.js",
+                "@MapbenderDigitizerBundle/Resources/public/MbDigitizer.js",
                 "@MapbenderDigitizerBundle/Resources/public/toolset.js",
                 "@MapbenderDigitizerBundle/Resources/public/FeatureRenderer.js",
                 '@MapbenderDigitizerBundle/Resources/public/FeatureEditor.js',
diff --git a/src/Mapbender/DigitizerBundle/Resources/public/mapbender.element.digitizer.js b/src/Mapbender/DigitizerBundle/Resources/public/MbDigitizer.js
similarity index 60%
rename from src/Mapbender/DigitizerBundle/Resources/public/mapbender.element.digitizer.js
rename to src/Mapbender/DigitizerBundle/Resources/public/MbDigitizer.js
index b56bb534..328aee5e 100644
--- a/src/Mapbender/DigitizerBundle/Resources/public/mapbender.element.digitizer.js
+++ b/src/Mapbender/DigitizerBundle/Resources/public/MbDigitizer.js
@@ -1,73 +1,75 @@
-(function ($) {
-    "use strict";
-
-    $.fn.dataTable.ext.errMode = 'throw';
-
-    $.widget("mapbender.mbDigitizer", $.mapbender.mbDataManager, {
-
-        options: {
-            schemes: {}
-        },
-        mbMap: null,
-        printClient: null,
-        active: false,
-        controlFactory: null,
-        activeTool_: null,
-        selectControl: null,
-        highlightControl: null,
-        excludedFromHighlighting_: [],
-        featureEditor: null,
-        renderer: null,
-        extentSearchFlags_: {},
-        queuedRefresh_: {},
-
-        _create: function () {
+(function() {
+
+    class MbDigitizer extends Mapbender.Element.MbDataManager {
+
+        constructor(configuration, $element) {
+            super(configuration, $element);
+
+            $.fn.dataTable.ext.errMode = 'throw';
+            this.mbMap = null;
+            this.printClient = null;
+            this.active = false;
+            this.controlFactory = null;
+            this.activeTool_ = null;
+            this.selectControl = null;
+            this.highlightControl = null;
+            this.excludedFromHighlighting_ = [];
+            this.featureEditor = null;
+            this.renderer = null;
+            this.extentSearchFlags_ = {};
+            this.queuedRefresh_ = {};
             // NOTE: Arrays / Objects in ui widget prototype are shared
             // between instances. Separate them
             this.excludedFromHighlighting_ = [];
             this.extentSearchFlags_ = {};
             this.queuedRefresh_ = {};
             this.toolsetRenderer = this._createToolsetRenderer();
-            this._super();
-            var widget = this;
             this.styleEditor = this._createStyleEditor();
             this.wktFormat_ = new ol.format.WKT();
-            $.when(Mapbender.elementRegistry.waitReady('.mb-element-map'), this.grantsRequest_).then(function(mbMap, _) {
-                widget.mbMap = mbMap;
-                widget.setup();
+            $.when(Mapbender.elementRegistry.waitReady('.mb-element-map'), this.grantsRequest_).then((mbMap, _) => {
+                this.mbMap = mbMap;
+                this.setup();
                 // Let data manager base method trigger "ready" event and start loading data
-                widget._start();
-                widget.registerMapEvents_();
+                this._start();
+                this.registerMapEvents_();
             });
-        },
-        _createTableRenderer: function() {
+        }
+
+        _createTableRenderer() {
             return new Mapbender.Digitizer.TableRenderer(this, this.tableButtonsTemplate_);
-        },
-        _createToolsetRenderer: function() {
+        }
+
+        _createToolsetRenderer() {
             return new Mapbender.Digitizer.Toolset(this);
-        },
-        _createStyleEditor: function() {
+        }
+
+        _createStyleEditor() {
             return new Mapbender.Digitizer.FeatureStyleEditor(this, this.dialogFactory_);
-        },
-        createStyleAdapter: function() {
+        }
+
+        createStyleAdapter() {
             return new Mapbender.Digitizer.StyleAdapter(this.options.fallbackStyle);
-        },
-        _createRenderer: function(olMap) {
+        }
+
+        _createRenderer(olMap) {
             return new Mapbender.Digitizer.FeatureRenderer(this, olMap);
-        },
-        _createFeatureEditor: function(olMap) {
+        }
+
+        _createFeatureEditor(olMap) {
             return new Mapbender.Digitizer.FeatureEditor(this, olMap);
-        },
-        _afterCreate: function() {
+        }
+
+        _afterCreate() {
             // Invoked only by data manager _create
             // do nothing; deliberately do NOT call parent method
-        },
-        setup: function() {
-            var self = this;
+        }
+
+        setup() {
+            const self = this;
             Mapbender.elementRegistry.waitCreated('.mb-element-printclient').then(function (printClient) {
                 self.printClient = printClient;
             });
-            var olMap = this.mbMap.getModel().olMap;
+            const olMap = this.mbMap.getModel().olMap;
             this.contextMenu = this._createContextMenu(olMap);
             this.renderer = this._createRenderer(olMap);
             this.selectControl = this.createSelectControl_();
@@ -75,24 +77,25 @@
             this.featureEditor = this._createFeatureEditor(olMap);
             olMap.addInteraction(this.selectControl);
             olMap.addInteraction(this.highlightControl);
-            var initialSchema = this._getCurrentSchema();
+            const initialSchema = this._getCurrentSchema();
             // @todo ml: evaluate displayPermanent
             this.renderer.toggleSchema(initialSchema, initialSchema.displayOnInactive && initialSchema.displayPermanent);
-        },
-        skipInitialData_: function() {
+        }
+
+        skipInitialData_() {
             // Digitizer only: allow permanently invisible "headless" Digitizer to load / render features normally
             return false;
-        },
-        registerMapEvents_: function() {
-            var self = this;
-            var olMap = this.mbMap.getModel().olMap;
+        }
+
+        registerMapEvents_() {
+            const self = this;
+            const olMap = this.mbMap.getModel().olMap;
             olMap.on(ol.MapEventType.MOVEEND, function() {
                 // Don't react at all if currently editing feature attributes
                 if (self.currentPopup || self.activeTool_) {
                     return;
                 }
-
-                var schema = self._getCurrentSchema();
+                const schema = self._getCurrentSchema();
                 if (self.extentSearchFlags_[schema.schemaName]) {
                     if (self.active || schema.displayOnInactive) {
                         self._getData(schema);
@@ -100,7 +103,6 @@
                         self.queuedRefresh_[schema.schemaName] = true;
                     }
                 }
-
                 // @todo ml: filter table rows for min/max resolution (not just on moveend, but always)
                 if (false) {
                     var layer = self.getSchemaLayer(schema);
@@ -112,8 +114,8 @@
             });
             this.mbMap.element.on('mbmapsrschanged', function(event, data) {
                 self.featureEditor.pause();
-                self.renderer.forAllFeatures(/** @param {ol.Feature} feature */function(feature) {
-                    var geometry = feature.getGeometry();
+                self.renderer.forAllFeatures(function(feature) {
+                    const geometry = feature.getGeometry();
                     if (geometry) {
                         geometry.transform(data.from, data.to);
                     }
@@ -123,32 +125,39 @@
                 });
                 self.featureEditor.resume();
             });
-        },
+        }
+
         // reveal / hide = automatic sidepane integration API
-        reveal: function() {
+        reveal() {
             this.activate();
-        },
-        hide: function() {
+        }
+
+        hide() {
             this.deactivate();
-        },
-        _createContextMenu: function(olMap) {
+        }
+
+        _createContextMenu(olMap) {
             return new Mapbender.Digitizer.MapContextMenu(olMap, this);
-        },
-        _initializeEvents: function() {
-            this._super();
+        }
+
+        _initializeEvents() {
+            super._initializeEvents();
+            if (!this.toolsetRenderer) {
+                this.toolsetRenderer = this._createToolsetRenderer();
+            }
             this.toolsetRenderer.registerEvents();
-            var self = this;
-            this.element.on('click', '.-fn-toggle-tool[data-toolname]', function() {
-                var $button = $(this);
-                var toolName = $button.attr('data-toolname');
-                var schema = $button.data('schema');
-                var oldState = $button.hasClass('active');
-                var newState = !oldState;
+            const self = this;
+            this.$element.on('click', '.-fn-toggle-tool[data-toolname]', function() {
+                const $button = $(this);
+                const toolName = $button.attr('data-toolname');
+                const schema = $button.data('schema');
+                const oldState = $button.hasClass('active');
+                const newState = !oldState;
                 if (newState) {
-                    var $activeOthers = $button.siblings('.-fn-toggle-tool.active').not($button);
+                    const $activeOthers = $button.siblings('.-fn-toggle-tool.active').not($button);
                     $activeOthers.each(function() {
-                        var $other = $(this);
-                        var otherSchema = $other.data('schema');
+                        const $other = $(this);
+                        const otherSchema = $other.data('schema');
                         self._toggleDrawingTool(otherSchema, $other.attr('data-toolname'), false);
                     });
                     $activeOthers.removeClass('active');
@@ -156,24 +165,25 @@
                 $button.toggleClass('active', newState);
                 self._toggleDrawingTool(schema, toolName, newState);
             });
-            this.element.on('change', 'input[name="current-extent"]', function() {
-                var schema = self._getCurrentSchema();
+            this.$element.on('change', 'input[name="current-extent"]', function() {
+                const schema = self._getCurrentSchema();
                 self.extentSearchFlags_[schema.schemaName] = $(this).prop('checked');
                 self._getData(schema);
             });
-            this.element.on('click', '.-fn-save-all', function() {
+            this.$element.on('click', '.-fn-save-all', function() {
                 self.updateMultiple(self.getSaveAllCandidates_());
             });
-        },
-        activate: function() {
+        }
+
+        activate() {
             if (!this.active) {
                 this.selectControl.setActive(true);
                 this.highlightControl.setActive(true);
-                var currentSchema = this._getCurrentSchema();
+                const currentSchema = this._getCurrentSchema();
                 this._toggleSchemaInteractions(currentSchema, true);
-                var schemaNames = Object.keys(this.options.schemes);
-                for (var s = 0; s < schemaNames.length; ++s) {
-                    var schema = this.options.schemes[schemaNames[s]];
+                const schemaNames = Object.keys(this.options.schemes);
+                for (let s = 0; s < schemaNames.length; ++s) {
+                    const schema = this.options.schemes[schemaNames[s]];
                     this.renderer.toggleSchema(schema, schema === currentSchema || schema.displayPermanent);
                 }
                 this.renderer.toggleSchema(currentSchema, true);
@@ -182,85 +192,95 @@
                     this._getData(currentSchema);
                 }
             }
-        },
-        deactivate: function() {
+        }
+
+        deactivate() {
             this.selectControl.setActive(false);
             this.highlightControl.setActive(false);
-            var currentSchema = this._getCurrentSchema();
+            const currentSchema = this._getCurrentSchema();
             this._deactivateCommon(currentSchema);
-            var schemaNames = Object.keys(this.options.schemes);
-            for (var s = 0; s < schemaNames.length; ++s) {
-                var schema = this.options.schemes[schemaNames[s]];
+            const schemaNames = Object.keys(this.options.schemes);
+            for (let s = 0; s < schemaNames.length; ++s) {
+                const schema = this.options.schemes[schemaNames[s]];
                 this.renderer.toggleSchema(schema, schema === currentSchema && schema.displayOnInactive);
             }
             this._closeCurrentPopup();
             this.active = false;
-        },
-        _closeCurrentPopup: function() {
+        }
+
+        _closeCurrentPopup() {
             if (this.currentPopup) {
-                var feature = this.currentPopup.data('item');
-                var itemSchema = this.currentPopup.data('schema');
+                const feature = this.currentPopup.data('item');
+                const itemSchema = this.currentPopup.data('schema');
                 if (!feature.getId()) {
                     this.renderer.removeFeature(itemSchema, feature);
                 }
             }
-            return this._superApply(arguments);
-        },
-        _activateSchema: function(schema) {
-            this._super(schema);
+            return super._closeCurrentPopup();
+        }
+
+        _activateSchema(schema) {
+            super._activateSchema(schema);
             this._toggleSchemaInteractions(schema, true);
             this.renderer.toggleSchema(schema, this.active || schema.displayOnInactive);
-        },
-        _toggleDrawingTool: function(schema, toolName, state) {
+        }
+
+        _toggleDrawingTool(schema, toolName, state) {
             if (!state && 'modifyFeature' === toolName) {
                 this.featureEditor.setEditFeature(null);
-                this.clearHighlightExclude_()
+                this.clearHighlightExclude_();
             }
             this.featureEditor.toggleTool(toolName, schema, state);
-            this.activeTool_ = state && {name: toolName, schema: schema} || null;
+            this.activeTool_ = state && { name: toolName, schema: schema } || null;
             this.resumeContextMenu_();
-        },
-        resumeContextMenu_: function() {
-            var contextMenuAllowed = ['modifyFeature', 'moveFeature'];
+        }
+
+        resumeContextMenu_() {
+            const contextMenuAllowed = ['modifyFeature', 'moveFeature'];
             this.contextMenu.setActive(!this.activeTool_ || -1 !== contextMenuAllowed.indexOf(this.activeTool_.name));
-        },
-        commitGeometry: function(schema, feature) {
-            feature.set("oldGeometry", feature.getGeometry().clone());
+        }
+
+        commitGeometry(schema, feature) {
+            feature.set('oldGeometry', feature.getGeometry().clone());
             feature.set('dirty', !this._getUniqueItemId(feature));
-        },
-        revertGeometry: function(feature) {
+        }
+
+        revertGeometry(feature) {
             feature.setGeometry(feature.get('oldGeometry').clone());
             feature.set('dirty', false);
-        },
+        }
+
         /**
          * Called by both _deactivateSchema (schema selector switch) and deactivate (sidepane interaction)
          *
          * @param schema
          * @private
          */
-        _deactivateCommon: function(schema) {
+        _deactivateCommon(schema) {
             this.featureEditor.setEditFeature(null);
             this.selectControl.getFeatures().clear();
             this._toggleSchemaInteractions(schema, false);
             if (schema === this._getCurrentSchema()) {
-                $('.-fn-toggle-tool', this.element).removeClass('active');
+                $('.-fn-toggle-tool', this.$element).removeClass('active');
                 this.clearHighlightExclude_();
             }
-        },
+        }
+
         /**
          * Called on schema selector change with the old schema
          * @param {Object} schema
          * @private
          */
-        _deactivateSchema: function(schema) {
-            this._super(schema);
+        _deactivateSchema(schema) {
+            super._deactivateSchema(schema);
             this._deactivateCommon(schema);
             this.renderer.toggleSchema(schema, schema.displayPermanent);
-        },
-        _toggleSchemaInteractions: function(schema, state) {
-            var subSchemas = this.expandCombination(schema);
-            var allowFeatureEditing = false;
-            for (var s = 0; s < subSchemas.length; ++s) {
+        }
+
+        _toggleSchemaInteractions(schema, state) {
+            const subSchemas = this.expandCombination(schema);
+            let allowFeatureEditing = false;
+            for (let s = 0; s < subSchemas.length; ++s) {
                 allowFeatureEditing = allowFeatureEditing || state && subSchemas[s].allowDigitize;
             }
             if (!state && this.activeTool_) {
@@ -269,14 +289,16 @@
             }
             this.featureEditor.setActive(allowFeatureEditing);
             this.contextMenu.setActive(state);
-        },
-        _getDataStoreFromSchema: function(schema) {
+        }
+
+        _getDataStoreFromSchema(schema) {
             // Digitizer schema config aliases "dataStore" (upstream) as "featureType"
             return schema.featureType;
-        },
-        _updateToolset: function(schema) {
-            this._super(schema);
-            var $toolset = $('.toolset', this.element);
+        }
+
+        _updateToolset(schema) {
+            super._updateToolset(schema);
+            const $toolset = $('.toolset', this.$element);
             if (typeof (this.extentSearchFlags_[schema.schemaName]) === 'undefined') {
                 this.extentSearchFlags_[schema.schemaName] = schema.searchType === 'currentExtent';
             }
@@ -289,34 +311,34 @@
             // Unlinke DataManager, all item creation happens with a drawing tool,
             // and doesn't work when using pure form entry
             $('.-fn-create-item', $toolset).remove();
-            var keepVisChange = false, keepSaveAll = false;
-            var subSchemas = this.expandCombination(schema);
-            for (var s = 0; s < subSchemas.length; ++s) {
+            let keepVisChange = false, keepSaveAll = false;
+            const subSchemas = this.expandCombination(schema);
+            for (let s = 0; s < subSchemas.length; ++s) {
                 keepVisChange = keepVisChange || subSchemas[s].allowChangeVisibility;
                 keepSaveAll = keepSaveAll || (subSchemas[s].allowDigitize && subSchemas[s].allowEdit);
                 if (keepVisChange && keepSaveAll) {
                     break;
                 }
             }
-
             if (!keepVisChange) {
-                $('.-fn-visibility-all', $toolset).remove();
+                  $('.-fn-visibility-all', $toolset).remove();
             }
             if (!keepSaveAll) {
-                $('.-fn-save-all', $toolset).remove();
+                  $('.-fn-save-all', $toolset).remove();
             }
-            var $geometryToolGroup = $('.-js-drawing-tools', $toolset);
+            const $geometryToolGroup = $('.-js-drawing-tools', $toolset);
             $geometryToolGroup.empty().append(this.toolsetRenderer.renderGeometryToolButtons(schema));
-        },
-        _openEditDialog: function(schema, feature) {
+        }
+
+        _openEditDialog(schema, feature) {
             // Make feature visible in table when editing was started
             // from map click or context menu.
             // NOTE: newly created features are not in the table and cannot be paged to
-            var tr = feature.get('table-row');
+            const tr = feature.get('table-row');
             if (tr) {
                 this.tableRenderer.showRow(tr);
             }
-            var dialog = this._super(schema, feature);
+            const dialog = super._openEditDialog(schema, feature);
             // Disable context menu interactions with other features only if the current item is new
             // Exiting the form by switching to a different feature would leave the new, unsaved feature in limbo
             if (!this._getUniqueItemId(feature)) {
@@ -327,16 +349,16 @@
                 this.featureEditor.pause();
             }
             return dialog;
-        },
-        _getEditDialogButtons: function(schema, feature) {
-            var self = this;
-            var buttons = [];
+        }
+
+        _getEditDialogButtons(schema, feature) {
+            const self = this;
+            const buttons = [];
             if (schema.copy && schema.copy.enable && this._getUniqueItemId(feature)) {
                 buttons.push({
                     text: Mapbender.trans('mb.digitizer.feature.clone.title'),
                     title: Mapbender.trans('mb.digitizer.feature.clone.tooltip'),
-                    class: 'btn btn-light',
-                    click: function() {
+                    class: 'btn btn-light', click() {
                         self.cloneFeature(schema, feature);
                     }
                 });
@@ -345,82 +367,85 @@
                 buttons.push({
                     text: Mapbender.trans('mb.digitizer.feature.style.change'),
                     title: Mapbender.trans('mb.digitizer.feature.style.change_tooltip'),
-                    class: 'btn btn-light',
-                    click: function() {
+                    class: 'btn btn-light', click() {
                         self.openStyleEditor(schema, feature);
                     }
                 });
             }
             if (schema.printable && this.printClient) {
-                var printClient = this.printClient;
+                const printClient = this.printClient;
                 buttons.push({
                     text: Mapbender.trans('mb.digitizer.feature.print'),
                     title: Mapbender.trans('mb.digitizer.feature.print_tooltip'),
-                    class: 'btn btn-light',
-                    click: function() {
-                        var data = self._getItemData(feature);
-                        var templates = (schema.featureType.print || {}).templates || null;
-                        printClient.printDigitizerFeature(data, schema, templates);
-                    }
+                    class: 'btn btn-light', click() {
+                        const data = self._getItemData(feature);
+                        const templates = (schema.featureType.print || {}).templates || null;
+                        printClient.printDigitizerFeature(data, schema, templates); }
                 });
             }
             const overrideShowSaveButton = !this._getUniqueItemId(feature) && schema.allowCreate;
-            buttons.push.apply(buttons, this._super(schema, feature, overrideShowSaveButton));
+            buttons.push.apply(buttons, super._getEditDialogButtons(schema, feature, overrideShowSaveButton));
             return buttons;
-        },
-        _getItemData: function(feature) {
+        }
+
+        _getItemData(feature) {
             // NOTE: 'data' property may not exist if feature has just been newly created by an editing tool
             if (!feature.get('data')) {
                 feature.set('data', {});
             }
             return feature.get('data');
-        },
-        _getSelectRequestParams: function(schema) {
-            var params = Object.assign({}, this._super(schema), {
+        }
+
+        _getSelectRequestParams(schema) {
+            const params = Object.assign({}, super._getSelectRequestParams(schema), {
                 srid: this.getCurrentSrid()
             });
             if (this.extentSearchFlags_[schema.schemaName]) {
                 params['extent'] = this.mbMap.getModel().getCurrentExtentArray().join(',');
             }
             return params;
-        },
-        _afterRemove: function(schema, feature, id) {
+        }
+
+        _afterRemove(schema, feature, id) {
             this.renderer.removeFeature(schema, feature);
-            this._super(schema, feature, id);
+            super._afterRemove(schema, feature, id);
             this.toolsetRenderer.resume();
             if (schema.allowDigitize) {
                 this.featureEditor.resume();
             }
             this.resumeContextMenu_();
             this.checkSourceRefresh_(schema);
-        },
+        }
 
-        _prepareDataItem: function(itemData) {
-            var feature = this.wktFormat_.readFeatureFromText(itemData.geometry);
+        _prepareDataItem(itemData) {
+            const feature = this.wktFormat_.readFeatureFromText(itemData.geometry);
             feature.set('data', itemData.properties || {});
             feature.set('schemaName', itemData.schemaName);
-            var itemSchema = this.options.schemes[itemData.schemaName];
+            const itemSchema = this.options.schemes[itemData.schemaName];
             feature.set('uniqueIdProperty', this._getUniqueItemIdProperty(itemSchema));
-            var id = this._generateNamespacedId(itemSchema, feature);
-            var existingFeature = this.renderer.getFeatureById(id, itemSchema);
+            const id = this._generateNamespacedId(itemSchema, feature);
+            const existingFeature = this.renderer.getFeatureById(id, itemSchema);
             if (existingFeature && existingFeature.get('dirty')) {
                 // Keep & reuse existing feature that has been modified in the current session
-                return existingFeature;
+                existingFeature;
             } else {
                 feature.setId(id);
                 this.commitGeometry(itemSchema, feature);
                 this.renderer.initializeFeature(itemSchema, feature);
                 return feature;
             }
-        },
-        _getUniqueItemId: function(feature) {
+        }
+
+        _getUniqueItemId(feature) {
             return (feature.get('data') || {})[feature.get('uniqueIdProperty')] || null;
-        },
-        getItemSchema: function(feature) {
+        }
+
+        getItemSchema(feature) {
             return this.options.schemes[feature.get('schemaName')];
-        },
-        getEnabledSchemaFunctionCodes: function(schema) {
-            var codes = this._superApply(arguments);
+        }
+
+        getEnabledSchemaFunctionCodes(schema) {
+            let codes = super.getEnabledSchemaFunctionCodes(schema);
             codes = codes.concat([
                 schema.allowDigitize && schema.allowEdit && '-fn-save',
                 schema.copy && schema.copy.enable && '-fn-copy',
@@ -428,13 +453,15 @@
                 schema.allowChangeVisibility && '-fn-toggle-visibility'
             ]);
             return codes.filter(function(x) { return !!x; });
-        },
-        initializeNewFeature: function(itemSchema, feature) {
+        }
+
+        initializeNewFeature(itemSchema, feature) {
             feature.set('schemaName', itemSchema.schemaName);
             feature.set('uniqueIdProperty', this._getUniqueItemIdProperty(itemSchema));
             this.renderer.initializeFeature(itemSchema, feature);
             feature.set('dirty', true);
-        },
+        }
+
         /**
          * Return a globally unique feature id (unique even if features from multiple schemas appear on the same layer)
          *
@@ -443,17 +470,17 @@
          * @return {string}
          * @private
          */
-        _generateNamespacedId: function(schema, feature, index = null) {
-            return [this.element.attr('id'), schema.schemaName, this._getUniqueItemId(feature), ...(index !== null ? [index] : [])].join('-');
-        },
-        _afterSave: function(schema, feature, originalId, responseData) {
+        _generateNamespacedId(schema, feature, index = null) {
+            return [this.$element.attr('id'), schema.schemaName, this._getUniqueItemId(feature), ...(index !== null ? [index] : [])].join('-');
+        }
+
+        _afterSave(schema, feature, originalId, responseData) {
             // unravel dm-incompatible response format
             // Geometry may have been modified (made valid, transformed twice) on server roundtrip
             // => update to reflect server-side geometry exactly
-            var geometry = this.wktFormat_.readGeometryFromText(responseData.dataItem.geometry);
+            const geometry = this.wktFormat_.readGeometryFromText(responseData.dataItem.geometry);
             feature.setGeometry(geometry);
-
-            this._super(schema, feature, originalId, {
+            super._afterSave(schema, feature, originalId, {
                 dataItem: responseData.dataItem.properties
             });
             if (!feature.getId()) {
@@ -465,29 +492,31 @@
                 this.featureEditor.setEditFeature(null);
                 if (!schema.continueDrawingAfterSave && this.activeTool_) {
                     this._toggleDrawingTool(schema, this.activeTool_.name, false);
-                    $('.-fn-toggle-tool', this.element).removeClass('active');
+                    $('.-fn-toggle-tool', this.$element).removeClass('active');
                 }
                 this.featureEditor.resume();
             }
             this.toolsetRenderer.resume();
             this.resumeContextMenu_();
             this.checkSourceRefresh_(schema);
-            this.adjustStyle(schema,feature);
-        },
+            this.adjustStyle(schema, feature);
+        }
 
-        _getData: function(schema) {
+        _getData(schema) {
             this.queuedRefresh_[schema.schemaName] = false;
-            var self = this;
-            return this._super(schema).then(function(features) {
+            const self = this;
+            const promise = super._getData ? super._getData(schema) : $.Deferred().resolve([]).promise();
+            return promise.then(function(features) {
                 self.queuedRefresh_[schema.schemaName] = false;
                 self.renderer.replaceFeatures(schema, features);
                 return features;
             });
-        },
-        _cancelForm: function(schema, feature) {
-            this._super(schema, feature);
+        }
+
+        _cancelForm(schema, feature) {
+            super._cancelForm(schema, feature);
             // NOTE: this also detects cloned features (via new copy functionality) as new
-            var isNew = !this._getUniqueItemId(feature);
+            const isNew = !this._getUniqueItemId(feature);
             if (isNew) {
                 this.renderer.removeFeature(schema, feature);
             }
@@ -496,30 +525,32 @@
                 this.featureEditor.resume();
             }
             this.resumeContextMenu_();
-        },
-        _replaceItemData: function(schema, feature, newValues) {
+        }
+
+        _replaceItemData(schema, feature, newValues) {
             // NOTE: 'data' is a regular mutable data Object (see _prpareDataItem)
             Object.assign(feature.get('data'), newValues);
-        },
-        _getSaveRequestData: function(schema, dataItem, newValues) {
-            return Object.assign(this._superApply(arguments), {
+        }
+
+        _getSaveRequestData(schema, dataItem, newValues) {
+            return Object.assign(super._getSaveRequestData(schema, dataItem, newValues), {
                 geometry: this.wktFormat_.writeGeometryText(dataItem.getGeometry()),
                 srid: this.getCurrentSrid()
             });
-        },
-        updateMultiple: function(features) {
-            var postData = {
+        }
+
+        updateMultiple(features) {
+            const postData = {
                 srid: this.getCurrentSrid(),
-                // generate mapping of id => properties and geometry
                 features: []
             };
-            var featureMap = {};
-            var continueDrawing = false;
-            for (var i = 0; i < features.length; ++i) {
-                var feature = features[i];
-                var itemSchema = this.getItemSchema(feature);
+            const featureMap = {};
+            let continueDrawing = false;
+            for (let i = 0; i < features.length; ++i) {
+                const feature = features[i];
+                const itemSchema = this.getItemSchema(feature);
                 continueDrawing = continueDrawing || itemSchema.continueDrawingAfterSave;
-                var mapId = this._generateNamespacedId(itemSchema, feature, i);
+                const mapId = this._generateNamespacedId(itemSchema, feature, i);
                 featureMap[mapId] = feature;
                 postData.features.push({
                     schemaName: itemSchema.schemaName,
@@ -529,16 +560,15 @@
                     geometry: this.wktFormat_.writeGeometryText(feature.getGeometry())
                 });
             }
-            var widget = this;
-            var promise = this.postJSON('update-multiple', postData)
+            const widget = this;
+            const promise = this.postJSON ? this.postJSON('update-multiple', postData)
                 .then(function(response) {
-                    var savedItems = response.saved;
-                    for (var i = 0; i < savedItems.length; ++i) {
-                        var savedItem = savedItems[i];
-                        var itemSchema = widget.options.schemes[savedItem.schemaName];
-                        var feature = featureMap[savedItem.uniqueId];
-
-                        var geometry = widget.wktFormat_.readGeometryFromText(savedItem.geometry);
+                    const savedItems = response.saved;
+                    for (let i = 0; i < savedItems.length; ++i) {
+                        const savedItem = savedItems[i];
+                        const itemSchema = widget.options.schemes[savedItem.schemaName];
+                        const feature = featureMap[savedItem.uniqueId];
+                        const geometry = widget.wktFormat_.readGeometryFromText(savedItem.geometry);
                         feature.setGeometry(geometry);
                         widget._replaceItemData(itemSchema, feature, savedItem.properties || {});
                         feature.set('dirty', false);
@@ -547,71 +577,72 @@
                         widget._saveEvent(itemSchema, feature, widget._getUniqueItemId(feature));
                     }
                     $.notify(Mapbender.trans('mb.data.store.save.successfully'), 'info');
-                })
-            ;
+                }) : $.Deferred().resolve().promise();
             // @todo ml: find a reasonable continueDrawingAfterSave policy for combination schema
             if (!continueDrawing) {
-                promise.always(function() {
-                    if (widget.activeTool_) {
-                        widget._toggleDrawingTool(widget.activeTool_.schema, widget.activeTool_.name, false);
-                    }
-                    $('.-fn-toggle-tool', widget.element).removeClass('active');
-                });
-            }
-
+              promise.always(() => {
+                  if (widget.activeTool_) {
+                      widget._toggleDrawingTool(widget.activeTool_.schema, widget.activeTool_.name, false);
+                  }
+                  $('.-fn-toggle-tool', widget.$element).removeClass('active'); });
+           }
             return promise;
-        },
-        updateSaveAll: function() {
-            var $saveAllButton = $('.-fn-save-all', this.element);
-            var candidates = $saveAllButton.length && this.getSaveAllCandidates_() || [];
+        }
+
+        updateSaveAll() {
+            const $saveAllButton = $('.-fn-save-all', this.$element);
+            const candidates = $saveAllButton.length && this.getSaveAllCandidates_() || [];
             $saveAllButton.prop('disabled', !candidates.length);
             if (candidates.length) {
-                $saveAllButton.removeClass('btn-outline-primary');
-                $saveAllButton.addClass('btn-primary');
+                $saveAllButton.removeClass('btn-outline-primary').addClass('btn-primary');
             } else {
-                $saveAllButton.removeClass('btn-primary');
-                $saveAllButton.addClass('btn-outline-primary');
+                $saveAllButton.removeClass('btn-primary').addClass('btn-outline-primary');
             }
-        },
-        getSaveAllCandidates_: function() {
-            var self = this;
+        }
+
+        getSaveAllCandidates_() {
+            const self = this;
             return this.renderer.filterFeatures(this._getCurrentSchema(), function(feature) {
                 return self._getUniqueItemId(feature)
                     && feature.get('dirty')
                     && self.getItemSchema(feature).allowDigitize;
             });
-        },
+        }
+
         /**
          * @param {*} schema
          * @returns {Array<ol.layer.Vector>}
          */
-        getSnappingLayers: function(schema) {
+        getSnappingLayers(schema) {
             let olMap = this.mbMap.getModel().olMap;
             let layers = olMap.getAllLayers().filter(layer => layer instanceof ol.layer.Vector);
             return this.getSchemaLayers(schema).concat(layers);
-        },
+        }
+
         /**
          * @param {*} schema
          * @returns {Array<ol.layer.Vector>}
          */
-        getSchemaLayers: function(schema) {
+        getSchemaLayers(schema) {
             return this.renderer.getLayers(schema);
-        },
+        }
+
         /**
          * @param {*} schema
          * @returns {ol.layer.Vector|undefined}
          * @deprecated use getSchemaLayers for proper multi-layer support
          */
-        getSchemaLayer: function(schema) {
+        getSchemaLayer(schema) {
             if (schema.combine) {
-                throw new Error("Cannot get single layer for combination schema");
+                throw new Error('Cannot get single layer for combination schema');
             }
             return this.getSchemaLayers(schema)[0];
-        },
-        cloneFeature: function(schema, feature) {
-            var newFeature = feature.clone();
-            var copyDefaults = schema.copy.data || {};
-            var newAttributes = {};
+        }
+
+        cloneFeature(schema, feature) {
+            const newFeature = feature.clone();
+            const copyDefaults = schema.copy.data || {};
+            const newAttributes = {};
             if (schema.copy.overwriteValuesWithDefault) {
                 Object.assign(newAttributes, feature.get('data'), copyDefaults);
             } else {
@@ -620,31 +651,29 @@
             // clear id
             newAttributes[schema.featureType.uniqueId] = null;
             // @todo: Detect the first text-type attribute and prefix it with "Copy of"
-            //        Digitizer has no direct knowledge of data columns and types
-            //        All we have are table column and form item configuration
+            // Digitizer has no direct knowledge of data columns and types
+            // All we have are table column and form item configuration
             newFeature.set('data', newAttributes);
-
             // Offset new geometry by ~3% the current (projected) viewport
             // This keeps the cloned geometry distinctly visible at any zoom level
-            var extent = this.mbMap.getModel().getCurrentExtent();
+            const extent = this.mbMap.getModel().getCurrentExtent();
             if (!schema.copy.deactivateOffset) {
-                var cloneOffset = {
+                const cloneOffset = {
                     h: Math.abs((extent.right - extent.left) / 32.),
                     v: Math.abs((extent.top - extent.bottom) / 32.)
                 };
                 newFeature.getGeometry().translate(cloneOffset.h, cloneOffset.v);
             }
             newFeature.set('dirty', true);
-
             this.renderer.addFeatures([newFeature]);
-
             this._openEditDialog(schema, newFeature);
-        },
+        }
+
         /**
          * @param {ol.Feature|null} feature
          */
-        onFeatureClick: function(feature) {
-            var itemSchema = this.getItemSchema(feature);
+        onFeatureClick(feature) {
+            const itemSchema = this.getItemSchema(feature);
             if (feature && !this.activeTool_) {
                 this._openEditDialog(itemSchema, feature);
             } else if (!this.currentPopup && 'modifyFeature' === this.activeTool_.name) {
@@ -658,37 +687,38 @@
                     this.featureEditor.setEditFeature(null);
                 }
                 this.selectControl.getFeatures().clear();
-                var tr = feature && feature.get('table-row');
+                const tr = feature && feature.get('table-row');
                 if (tr) {
                     this.tableRenderer.showRow(tr);
                 }
             }
-        },
+        }
+
         /**
          * @return {number}
          */
-        getCurrentSrid: function() {
+        getCurrentSrid() {
             return parseInt(this.mbMap.getModel().getCurrentProjectionCode().replace(/^\w+:/, ''));
-        },
-        openStyleEditor: function(schema, feature) {
-            var self = this;
-            var styleConfig = feature.get('customStyleConfig');
+        }
+
+        openStyleEditor(schema, feature) {
+            const self = this;
+            let styleConfig = feature.get('customStyleConfig');
             if (!styleConfig) {
-                var defaults = this.getInitialCustomStyle_(schema, feature);
+                const defaults = this.getInitialCustomStyle_(schema, feature);
                 // Resolve any placeholders ...
                 styleConfig = this.renderer.resolveStyleConfigPlaceholders(defaults, feature);
                 // ... but allow label placeholder (editable as text)
                 styleConfig.label = defaults.label || '';
             }
-
             this.styleEditor.openEditor(schema, feature, styleConfig).then(function(values) {
-                var styleFieldData = JSON.stringify(values);
+                const styleFieldData = JSON.stringify(values);
                 function always() {
                     feature.get('data')[schema.featureType.styleField] = styleFieldData;
                     self.renderer.customStyleFeature_(feature);
                 }
                 if (self._getUniqueItemId(feature)) {
-                    var formData = {};
+                    const formData = {};
                     formData[schema.featureType.styleField] = styleFieldData;
                     self._saveItem(schema, feature, formData).then(function() {
                         always();
@@ -697,87 +727,89 @@
                     always();
                 }
             });
-        },
-        zoomToFeature: function(schema, feature) {
+        }
+
+        zoomToFeature(schema, feature) {
             Mapbender.Model.zoomToFeature(feature, { buffer: schema.zoomBuffer || 10 });
-        },
-        _getEditDialogPopupConfig: function(schema, dataItem) {
-            var options = this._superApply(arguments);
+        }
+
+        _getEditDialogPopupConfig(schema, dataItem) {
+            const options = super._getEditDialogPopupConfig(schema, dataItem);
             if (!(schema.popup || {}).title && schema.allowEdit) {
                 options.title = Mapbender.trans('mb.digitizer.edit.attributes');
             }
             return options;
-        },
-        createSelectControl_: function() {
-            var self = this;
-            var selectControl = new ol.interaction.Select({
-                condition: ol.events.condition.singleClick,
-                layers: function(layer) {
-                    var schema = self._getCurrentSchema();
-                    var activeLayers = schema && self.getSchemaLayers(schema) || [];
-                    return -1 !== activeLayers.indexOf(layer);
-                },
-                style: null
-            });
+        }
 
-            selectControl.on('select', function (event) {
-                // Prevent interaction from filtering out the same feature if we click on it again before doing
-                // anything else.
-                /** @see https://github.com/openlayers/openlayers/blob/v6.4.3/src/ol/interaction/Select.js#L469 */
-                this.features_.clear();
-                self.onFeatureClick(event.selected[0] || null);
-            });
-            return selectControl;
-        },
-        createHighlightControl_: function() {
-            var self = this;
-            var highlightControl = new ol.interaction.Select({
-                condition: ol.events.condition.pointerMove,
-                layers: function(layer) {
-                    var schema = self._getCurrentSchema();
-                    var activeLayers = schema && self.getSchemaLayers(schema) || [];
+        createSelectControl_() {
+          const self = this;
+          const selectControl = new ol.interaction.Select({
+              condition: ol.events.condition.singleClick,
+              layers(layer) {
+                  const schema = self._getCurrentSchema();
+                  const activeLayers = schema && self.getSchemaLayers(schema) || [];
+                  return -1 !== activeLayers.indexOf(layer);
+              },
+              style: null
+          });
+          selectControl.on('select', function (event) {
+              // Prevent interaction from filtering out the same feature if we click on it again before doing
+              // anything else.
+              /** @see https://github.com/openlayers/openlayers/blob/v6.4.3/src/ol/interaction/Select.js#L469 */
+              this.features_.clear();
+              self.onFeatureClick(event.selected[0] || null);
+          });
+          return selectControl;
+        }
+
+        createHighlightControl_() {
+            const self = this;
+            const highlightControl = new ol.interaction.Select({
+                condition: ol.events.condition.pointerMove, layers(layer) {
+                    const schema = self._getCurrentSchema();
+                    const activeLayers = schema && self.getSchemaLayers(schema) || [];
                     return -1 !== activeLayers.indexOf(layer);
                 },
-                filter: function(feature) {
+                filter(feature) {
                     return -1 === self.excludedFromHighlighting_.indexOf(feature);
                 }
-            });
+              });
+              highlightControl.on('select', function (e) {
+              e.deselected.forEach(function(feature) {
+                  // Avoid excessive property updates to reduce layer re-rendering
+                  if (feature.get('hover')) {
+                      feature.set('hover', false);
+                  }
+              });
+              e.selected.forEach(function(feature) {
+                  // Avoid excessive property updates to reduce layer re-rendering
+                  // Styling for editing / hidden states takes priority over hover,
+                  // allowing a sake skip of the hover style update
+                  if (!feature.get('editing') || !feature.get('hidden')) {
+                      feature.set('hover', true);
+                  }
+              });
+          });
+          return highlightControl;
+        }
 
-            highlightControl.on('select', function (e) {
-                e.deselected.forEach(function(feature) {
-                    // Avoid excessive property updates to reduce layer re-rendering
-                    if (feature.get('hover')) {
-                        feature.set('hover', false);
-                    }
-                });
-                e.selected.forEach(function(feature) {
-                    // Avoid excessive property updates to reduce layer re-rendering
-                    // Styling for editing / hidden states takes priority over hover,
-                    // allowing a sake skip of the hover style update
-                    if (!feature.get('editing') || !feature.get('hidden')) {
-                        feature.set('hover', true);
-                    }
-                });
-            });
-            return highlightControl;
-        },
-        clearHighlightExclude_: function() {
+        clearHighlightExclude_() {
             this.excludedFromHighlighting_.splice(0, this.excludedFromHighlighting_.length);
-        },
-        checkSourceRefresh_: function(schema) {
-            var sourceIds = schema.refreshLayersAfterFeatureSave || [];
+        }
+
+        checkSourceRefresh_(schema) {
+            let sourceIds = schema.refreshLayersAfterFeatureSave || [];
             if (sourceIds && !Array.isArray(sourceIds)) {
                 sourceIds = [sourceIds];
             }
-            for (var i = 0; i < sourceIds.length; ++i) {
-                var source = this.mbMap.getModel().getSourceById(sourceIds[i]);
+            for (let i = 0; i < sourceIds.length; ++i) {
+                let source = this.mbMap.getModel().getSourceById(sourceIds[i]);
                 if (!source) {
                     if (!this.mbMap.getModel().findSourceAndLayerIdByName) {
-                        console.warn("Method findSourceAndLayerIdByName not available - consider Mapbender upgrade");
+                        console.warn('Method findSourceAndLayerIdByName not available - consider Mapbender upgrade');
                     } else {
                         let ids = this.mbMap.getModel().findSourceAndLayerIdByName(sourceIds[i]);
-                        let sourceId = ids.sourceId;
-                        source = sourceId && this.mbMap.getModel().getSourceById(sourceId);
+                        let sourceId = ids.sourceId; source = sourceId && this.mbMap.getModel().getSourceById(sourceId);
                     }
                 }
                 if (source) {
@@ -787,19 +819,21 @@
                         source.addParams({_OLSALT: Math.random()});
                     }
                 } else {
-                    console.warn("Could not find source with id " + sourceIds[i] + " for refresh");
+                    console.warn('Could not find source with id ' + sourceIds[i] + ' for refresh');
                 }
             }
-        },
-        getInitialCustomStyle_: function(schema, feature) {
+        }
+
+        getInitialCustomStyle_(schema, feature) {
             return schema.styles.default;
-        },
+        }
 
         // Empty method for overriding purpose
-        adjustStyle: function(schema, feature) {
+        adjustStyle(schema, feature) {
 
-        },
-        __formatting_dummy: null
-    });
+        }
+    }
 
-})(jQuery);
+    window.Mapbender.Element = window.Mapbender.Element || {};
+    window.Mapbender.Element.MbDigitizer = MbDigitizer;
+})();
diff --git a/src/Mapbender/DigitizerBundle/Resources/public/toolset.js b/src/Mapbender/DigitizerBundle/Resources/public/toolset.js
index df6cbac7..287f90e9 100644
--- a/src/Mapbender/DigitizerBundle/Resources/public/toolset.js
+++ b/src/Mapbender/DigitizerBundle/Resources/public/toolset.js
@@ -46,11 +46,11 @@
         },
         pause: function() {
             // @todo: reintegrate with FeatureEditor :)
-            $('button.-fn-toggle-tool', this.owner.element).prop('disabled', true);
+            $('button.-fn-toggle-tool', this.owner.$element).prop('disabled', true);
         },
         resume: function() {
             // @todo: reintegrate with FeatureEditor :)
-            $('button.-fn-toggle-tool', this.owner.element).prop('disabled', false);
+            $('button.-fn-toggle-tool', this.owner.$element).prop('disabled', false);
         },
         getDefaultGeometryToolNames: function(schema) {
             return this.getValidToolNames(schema);
@@ -118,7 +118,7 @@
         },
         registerEvents: function() {
             var widget = this.owner;
-            widget.element.on('click', '.-fn-visibility-all', function() {
+            widget.$element.on('click', '.-fn-visibility-all', function() {
                 var state = !!$(this).attr('data-visibility');
                 widget.renderer.forAllSchemaFeatures(widget._getCurrentSchema(), function (feature) {
                     if (widget.getItemSchema(feature).allowChangeVisibility) {