diff --git a/frontend-js/src/main/js/Configuration.js b/frontend-js/src/main/js/Configuration.js
index 8254c7ae0b3d8934091205cd54967228bb26af87..beadc52c9e654e11957de7f8934dbacf0f27fa0c 100644
--- a/frontend-js/src/main/js/Configuration.js
+++ b/frontend-js/src/main/js/Configuration.js
@@ -120,9 +120,18 @@ Configuration.prototype.getOptions = function () {
   return result;
 };
 
+/**
+ *
+ * @param {string[]} overlayTypes
+ */
 Configuration.prototype.setOverlayTypes = function (overlayTypes) {
   this._overlayTypes = overlayTypes;
 };
+
+/**
+ *
+ * @returns {string[]}
+ */
 Configuration.prototype.getOverlayTypes = function () {
   return this._overlayTypes;
 };
diff --git a/frontend-js/src/main/js/ServerConnector.js b/frontend-js/src/main/js/ServerConnector.js
index bd787b7f03b8e6f45a8c8e1588e3ed2d5a81158d..91a84461e3f9c6080733e95862ab6aecfa2d1097 100644
--- a/frontend-js/src/main/js/ServerConnector.js
+++ b/frontend-js/src/main/js/ServerConnector.js
@@ -1910,6 +1910,7 @@ ServerConnector.addOverlay = function (params) {
     content: overlay.getContent(),
     filename: overlay.getFilename(),
     googleLicenseConsent: overlay.isGoogleLicenseConsent(),
+    type: overlay.getType(),
     fileId: params.fileId
   };
   return self.getProjectId(params.projectId).then(function (result) {
@@ -1920,6 +1921,12 @@ ServerConnector.addOverlay = function (params) {
   });
 };
 
+/**
+ *
+ * @param {string} name
+ * @param {string} content
+ * @returns {Promise}
+ */
 ServerConnector.addOverlayFromString = function (name, content) {
   var fileName = name + ".txt";
   var overlay = new DataOverlay({
diff --git a/frontend-js/src/main/js/gui/AbstractGuiElement.js b/frontend-js/src/main/js/gui/AbstractGuiElement.js
index 529a523dcfc0ef99d165d0cc9c744e0483c788bc..95a72bfd8f964fe589c8d764a06b0d91fbbf89b8 100644
--- a/frontend-js/src/main/js/gui/AbstractGuiElement.js
+++ b/frontend-js/src/main/js/gui/AbstractGuiElement.js
@@ -27,9 +27,9 @@ function AbstractGuiElement(params) {
   var self = this;
 
   self.setElement(params.element);
+  self.setConfiguration(params.configuration);
   self.setProject(params.project);
   self.setMap(params.customMap);
-  self.setConfiguration(params.configuration);
   self.setServerConnector(params.serverConnector);
 
   self._controlElements = [];
diff --git a/frontend-js/src/main/js/gui/AddOverlayDialog.js b/frontend-js/src/main/js/gui/AddOverlayDialog.js
index d49c6a153db8f9436d021c8a4126d5cb3cbc9436..497045042e7987b2dfe9674b8806d69ad4897ec8 100644
--- a/frontend-js/src/main/js/gui/AddOverlayDialog.js
+++ b/frontend-js/src/main/js/gui/AddOverlayDialog.js
@@ -18,6 +18,19 @@ var HttpStatus = require('http-status-codes');
 var Promise = require("bluebird");
 var TextEncoder = require('text-encoding').TextEncoder;
 
+/**
+ *
+ * @param {Object} params
+ * @param {HTMLElement} params.element
+ * @param {CustomMap} params.customMap
+ * @param {Configuration} params.configuration
+ * @param {Project} params.project
+ * @param {ServerConnector} [params.serverConnector]
+ *
+ * @constructor
+ *
+ * @extends AbstractGuiElement
+ */
 function AddOverlayDialog(params) {
   AbstractGuiElement.call(this, params);
   var self = this;
@@ -28,9 +41,12 @@ function AddOverlayDialog(params) {
 AddOverlayDialog.prototype = Object.create(AbstractGuiElement.prototype);
 AddOverlayDialog.prototype.constructor = AddOverlayDialog;
 
+/**
+ *
+ */
 AddOverlayDialog.prototype.createGui = function () {
   var self = this;
-  var guiUtils = new GuiUtils();
+  var guiUtils = new GuiUtils(self.getConfiguration());
   var content = document.createElement("div");
   content.style.width = "100%";
   content.style.height = "100%";
@@ -52,6 +68,24 @@ AddOverlayDialog.prototype.createGui = function () {
   content.appendChild(descriptionInput);
   content.appendChild(guiUtils.createNewLine());
 
+  content.appendChild(guiUtils.createLabel("Type: "));
+  content.appendChild(guiUtils.createNewLine());
+  var types = self.getConfiguration().getOverlayTypes();
+  var typeSelect = Functions.createElement({
+    type: "select",
+    name: "overlay-type",
+    value: types[0]
+  });
+  for (var i = 0; i < types.length; i++) {
+    $(typeSelect).append($('<option>', {
+      value: types[i],
+      text: types[i]
+    }));
+  }
+
+  content.appendChild(typeSelect);
+  content.appendChild(guiUtils.createNewLine());
+
   content.appendChild(guiUtils.createLabel("Upload file: "));
   var fileInput = Functions.createElement({
     type: "input",
@@ -100,6 +134,7 @@ AddOverlayDialog.prototype.processFile = function (file) {
           var overlay = overlayParser.parse(evt.target.result);
           var nameInput = $("[name='overlay-name']", self.getElement())[0];
           var descriptionInput = $("[name='overlay-description']", self.getElement())[0];
+          var typeSelect = $("[name='overlay-type']", self.getElement());
           if (overlay.getName() !== undefined) {
             nameInput.value = overlay.getName();
           } else {
@@ -116,6 +151,9 @@ AddOverlayDialog.prototype.processFile = function (file) {
           if (overlay.getDescription() !== undefined) {
             descriptionInput.value = overlay.getDescription();
           }
+          if (overlay.getType() !== undefined) {
+            typeSelect.val(overlay.getType());
+          }
           resolve(self.getFileContent());
         } catch (error) {
           reject(error);
@@ -155,32 +193,39 @@ AddOverlayDialog.prototype.getFileContent = function () {
   }
 };
 
+/**
+ *
+ * @returns {Promise}
+ */
 AddOverlayDialog.prototype.init = function () {
   return Promise.resolve();
 };
 
+
 AddOverlayDialog.prototype.addOverlay = function () {
   var self = this;
   var nameInput = $("[name='overlay-name']", self.getElement())[0];
   var descriptionInput = $("[name='overlay-description']", self.getElement())[0];
   var filename = $("[name='overlay-file']", self.getElement())[0].value;
+  var type = $("[name='overlay-type']", self.getElement()).val();
   var consent = $("[name='overlay-google-consent']", self.getElement()).is(":checked");
   var overlay = new DataOverlay({
     name: nameInput.value,
     description: descriptionInput.value,
     filename: filename,
-    googleLicenseConsent: consent
+    googleLicenseConsent: consent,
+    type: type
   });
 
   if (filename === undefined || filename === "") {
     filename = "unknown.txt";
   }
   GuiConnector.showProcessing();
-  return ServerConnector.uploadFile({
+  return self.getServerConnector().uploadFile({
     filename: filename,
     content: self.getFileContent()
   }).then(function (file) {
-    return ServerConnector.addOverlay({
+    return self.getServerConnector().addOverlay({
       fileId: file.id,
       overlay: overlay,
       projectId: self.getProject().getProjectId()
diff --git a/frontend-js/src/main/js/gui/admin/EditProjectDialog.js b/frontend-js/src/main/js/gui/admin/EditProjectDialog.js
index 3d5cc604188aa6f5a0d98faca79f3c54b1890dda..4e1127816fd5763d179ea7f7d3d66bce21ae5b04 100644
--- a/frontend-js/src/main/js/gui/admin/EditProjectDialog.js
+++ b/frontend-js/src/main/js/gui/admin/EditProjectDialog.js
@@ -962,7 +962,8 @@ EditProjectDialog.prototype.openAddOverlayDialog = function () {
   self._addOverlayDialog = new AddOverlayDialog({
     project: self.getProject(),
     customMap: null,
-    element: document.createElement("div")
+    element: document.createElement("div"),
+    configuration: self.getConfiguration()
   });
   self._addOverlayDialog.addListener("onAddOverlay", function () {
     return self.refreshOverlays();
diff --git a/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js
index 23d2a7cadd950254f32e95d352d2f500786f0159..7a6942a1f5717649a9d6315bc0cac209373ca2bc 100644
--- a/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js
+++ b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js
@@ -20,6 +20,19 @@ var SubmapPanel = require('./SubmapPanel');
 var Functions = require('../../Functions');
 var logger = require('../../logger');
 
+/**
+ *
+ * @param {Object} params
+ * @param {HTMLElement} params.element
+ * @param {CustomMap} params.customMap
+ * @param {Configuration} params.configuration
+ * @param {Project} [params.project]
+ * @param {ServerConnector} [params.serverConnector]
+ *
+ * @constructor
+ *
+ * @extends AbstractGuiElement
+ */
 function LeftPanel(params) {
   AbstractGuiElement.call(this, params);
   var self = this;
@@ -274,6 +287,7 @@ LeftPanel.prototype.addTab = function (params, tabData) {
   this._panels.push(new params.panelClass({
     element: data.content,
     customMap: self.getMap(),
+    configuration: self.getConfiguration(),
     parent: self
   }));
 
diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
index ad6006a376b58b4ed02ce95909ace8e77cbb471b..d8d37db556afd7e363fad48a152729ba33e74f78 100644
--- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js
@@ -16,11 +16,12 @@ var Promise = require('bluebird');
 /**
  *
  * @param {Object} params
- * @param {Configuration} [params.configuration]
  * @param {HTMLElement} params.element
- * @param {Project} params.project
  * @param {CustomMap} params.customMap
+ * @param {Configuration} [params.configuration]
+ * @param {Project} [params.project]
  * @param params.parent
+ *
  * @constructor
  * @extends Panel
  */
@@ -30,6 +31,9 @@ function OverlayPanel(params) {
   params["helpTip"] = "<p>Overlays tab allows to display or generate custom coloring of elements and interactions in the map.</p>"
     + "<p>General overlays are overlays accessible for every user viewing the content.</p>"
     + "<p>Custom overlays are user-provided overlays, this menu becomes available upon login (see below).</p>";
+  if (params.project === undefined) {
+    params.project = params.customMap.getProject();
+  }
   Panel.call(this, params);
 
   //overflow is defined in minerva-overlay-panel, so remove the one that is already there
@@ -211,8 +215,8 @@ OverlayPanel.prototype.createTableHeader = function (edit) {
 /**
  *
  * @param {DataOverlay} overlay
- * @param {boolean} checked
- * @param {boolean} disabled
+ * @param {boolean} [checked=false]
+ * @param {boolean} [disabled=false]
  * @returns {HTMLElement}
  */
 OverlayPanel.prototype.createOverlayRow = function (overlay, checked, disabled) {
@@ -536,7 +540,8 @@ OverlayPanel.prototype.openAddOverlayDialog = function () {
   self._addOverlayDialog = new AddOverlayDialog({
     project: self.getProject(),
     customMap: self.getMap(),
-    element: document.createElement("div")
+    element: document.createElement("div"),
+    configuration: self.getConfiguration()
   });
   self._addOverlayDialog.addListener("onAddOverlay", function (e) {
     self.getProject().addDataOverlay(e.arg);
diff --git a/frontend-js/src/main/js/map/OverlayParser.js b/frontend-js/src/main/js/map/OverlayParser.js
index 72fc466358ac3bc06fb988402834959eca341687..320c0b936c4e09eedceea040c4c5f88e58eb7541 100644
--- a/frontend-js/src/main/js/map/OverlayParser.js
+++ b/frontend-js/src/main/js/map/OverlayParser.js
@@ -7,6 +7,11 @@ var TextDecoder = require('text-encoding').TextDecoder;
 function OverlayParser() {
 }
 
+/**
+ *
+ * @param {string| Uint8Array|ArrayBuffer} content
+ * @returns {DataOverlay}
+ */
 OverlayParser.prototype.parse = function (content) {
   if (content instanceof Uint8Array || content instanceof ArrayBuffer) {
     content = new TextDecoder("UTF8").decode(content);
diff --git a/frontend-js/src/main/js/minerva.js b/frontend-js/src/main/js/minerva.js
index c9fc776c29db4036bf132dc1a3293162eb346695..2b7be07f8f93e42a3dc059e49030576644297767 100644
--- a/frontend-js/src/main/js/minerva.js
+++ b/frontend-js/src/main/js/minerva.js
@@ -331,7 +331,8 @@ function create(params) {
 
     leftPanel = new LeftPanel({
       element: functions.getElementByClassName(element, "minerva-left-panel"),
-      customMap: customMap
+      customMap: customMap,
+      configuration: params.getConfiguration()
     });
 
     var pluginManager = new PluginManager({
diff --git a/frontend-js/src/test/js/gui/AddOverlayDialog-test.js b/frontend-js/src/test/js/gui/AddOverlayDialog-test.js
index e238c5c36a8df527f130e501022c11f1b25ee935..c823a626721cbb594ba62dc30139dc1e0d652ea4 100644
--- a/frontend-js/src/test/js/gui/AddOverlayDialog-test.js
+++ b/frontend-js/src/test/js/gui/AddOverlayDialog-test.js
@@ -17,7 +17,9 @@ describe('AddOverlayDialog', function () {
       dialog = new AddOverlayDialog({
         element: testDiv,
         project: project,
-        customMap: null
+        customMap: null,
+        configuration: helper.getConfiguration(),
+        serverConnector: ServerConnector
       });
 
       dialog.setFileContent("s1\n");
diff --git a/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js b/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js
index eaf001bb281285a649d62753e1e24a814cc89afb..e36f55db5a9818a299e1d224a32e934e2cd5459f 100644
--- a/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js
+++ b/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js
@@ -9,6 +9,19 @@ var chai = require('chai');
 var assert = chai.assert;
 var logger = require('../../logger');
 
+/**
+ *
+ * @param {CustomMap} map
+ * @returns {OverlayPanel}
+ */
+function createOverlayPanel(map) {
+  return new OverlayPanel({
+    element: testDiv,
+    customMap: map,
+    configuration: helper.getConfiguration()
+  });
+}
+
 describe('OverlayPanel', function () {
 
   it('constructor', function () {
@@ -138,10 +151,7 @@ describe('OverlayPanel', function () {
     it('open', function () {
       var map = helper.createCustomMap();
 
-      var panel = new OverlayPanel({
-        element: testDiv,
-        customMap: map
-      });
+      var panel = createOverlayPanel(map);
 
       return panel.openAddOverlayDialog().then(function () {
         return panel.destroy();
@@ -150,11 +160,7 @@ describe('OverlayPanel', function () {
 
     it('trigger onAddOverlay event handler', function () {
       var map = helper.createCustomMap();
-
-      var panel = new OverlayPanel({
-        element: testDiv,
-        customMap: map
-      });
+      var panel = createOverlayPanel(map);
 
       return panel.init().then(function () {
         return panel.openAddOverlayDialog();
diff --git a/frontend-js/testFiles/apiCalls/projects/sample/overlays/POST_fileId=6792&googleLicenseConsent=false&token=MOCK_TOKEN_ID& b/frontend-js/testFiles/apiCalls/projects/sample/overlays/POST_fileId=6792&googleLicenseConsent=false&type=GENERIC&token=MOCK_TOKEN_ID&
similarity index 100%
rename from frontend-js/testFiles/apiCalls/projects/sample/overlays/POST_fileId=6792&googleLicenseConsent=false&token=MOCK_TOKEN_ID&
rename to frontend-js/testFiles/apiCalls/projects/sample/overlays/POST_fileId=6792&googleLicenseConsent=false&type=GENERIC&token=MOCK_TOKEN_ID&