diff --git a/frontend-js/src/main/js/map/AbstractCustomMap.js b/frontend-js/src/main/js/map/AbstractCustomMap.js
index 3dbddf92b2aa40c03d7303a103d6b3bd636bc339..a1743a194524f317b8c2e8c8acc664bc3d19476e 100644
--- a/frontend-js/src/main/js/map/AbstractCustomMap.js
+++ b/frontend-js/src/main/js/map/AbstractCustomMap.js
@@ -372,11 +372,8 @@ AbstractCustomMap.prototype._showSelectedDataOverlay = function (overlayId, inde
     }).then(function () {
       return Promise.each(overlayAliases, function (overlayAlias) {
         if (overlayAlias.getModelId() === self.getId()) {
-          var surface;
-          var element;
           return self.getModel().getAliasById(overlayAlias.getId()).then(function (aliasData) {
-            element = new IdentifiedElement(aliasData);
-            return AliasSurface.create({
+            var surface = new AliasSurface({
               overlayAlias: overlayAlias,
               alias: aliasData,
               map: self,
@@ -388,8 +385,6 @@ AbstractCustomMap.prototype._showSelectedDataOverlay = function (overlayId, inde
                 return self.getTopMap().callListeners("onBioEntityClick", element);
               }]
             });
-          }).then(function (result) {
-            surface = result;
             self.selectedLayoutOverlays[overlayId].push(surface);
             return surface.show();
           });
@@ -542,8 +537,8 @@ AbstractCustomMap.prototype._refreshInfoWindows = function () {
 /**
  * Opens {@link ReactionInfoWindow} for given reaction identifier.
  *
- * @param reaction {Reaction}
- * @param marker {Marker}
+ * @param {Reaction} reaction
+ * @param {Marker} [marker]
  */
 AbstractCustomMap.prototype._openInfoWindowForReaction = function (reaction, marker) {
   var infoWindow = this.getReactionInfoWindowById(reaction.getId());
diff --git a/frontend-js/src/main/js/map/data/MapModel.js b/frontend-js/src/main/js/map/data/MapModel.js
index 7edae2a1012de098ee6f18b591328b06517253e1..88a40f3794fa091e80fb19c801305091ab2dc734 100644
--- a/frontend-js/src/main/js/map/data/MapModel.js
+++ b/frontend-js/src/main/js/map/data/MapModel.js
@@ -100,7 +100,7 @@ MapModel.prototype.getAliases = function (params) {
  *
  * @param id
  *          identifier of the {@link Alias}
- * @returns {@link Alias} by identifier
+ * @returns {Promise<Alias>} by identifier
  */
 MapModel.prototype.getAliasById = function (id, complete) {
   var self = this;
diff --git a/frontend-js/src/main/js/map/marker/AbstractMarker.js b/frontend-js/src/main/js/map/marker/AbstractMarker.js
index f6bf87603fe2571564d6b3b8fb0c4be4db9c5e12..48af2463f147d3284270d43f7fdae7bd35233d74 100644
--- a/frontend-js/src/main/js/map/marker/AbstractMarker.js
+++ b/frontend-js/src/main/js/map/marker/AbstractMarker.js
@@ -13,7 +13,7 @@ var ObjectWithListeners = require('../../ObjectWithListeners');
  *
  * @param {IdentifiedElement} params.element
  * @param {AbstractCustomMap} params.map
- * @param {function|function[]} params.onclick
+ * @param {function|function[]} [params.onClick]
  * @constructor
  */
 function AbstractMarker(params) {
diff --git a/frontend-js/src/main/js/map/marker/AliasMarker.js b/frontend-js/src/main/js/map/marker/AliasMarker.js
index 0e31a05b7c037029f82b78be98717619afe5d34c..7186290000c78c821ad50fef9ae0d7634033505e 100644
--- a/frontend-js/src/main/js/map/marker/AliasMarker.js
+++ b/frontend-js/src/main/js/map/marker/AliasMarker.js
@@ -12,7 +12,7 @@ var logger = require('../../logger');
  *
  * @param {IdentifiedElement} params.element
  * @param {AbstractCustomMap} params.map
- * @param {function|function[]} params.onclick
+ * @param {function|function[]} [params.onClick]
  * @constructor
  * @extends AbstractMarker
  */
diff --git a/frontend-js/src/main/js/map/marker/MarkerSurfaceCollection.js b/frontend-js/src/main/js/map/marker/MarkerSurfaceCollection.js
index 5612d13d009f78c3e6e1126db7e19e7aea308efb..d73c5e1e04b01dc43395bcec2acf5baf2a2aa56a 100644
--- a/frontend-js/src/main/js/map/marker/MarkerSurfaceCollection.js
+++ b/frontend-js/src/main/js/map/marker/MarkerSurfaceCollection.js
@@ -192,14 +192,27 @@ MarkerSurfaceCollection.prototype.createSurfaceForDbOverlay = function (element,
     return self.getMap().getTopMap().callListeners("onBioEntityClick", element);
   }];
   if (element.getType() === "ALIAS") {
-    return AliasSurface.createFromIdentifiedElement({
-      element: element,
-      map: map,
-      onClick: onclickFunctions
-    }).then(function (surface) {
-      result = surface;
+    return map.getModel().getAliasById(element.getId()).then(function (alias) {
+      result = new AliasSurface({
+        alias: alias,
+        map: map,
+        onClick: onclickFunctions,
+        color: element.getColor(),
+        fillOpacity: element.getOpacity(),
+        strokeWeight: element.getLineWeight(),
+        strokeColor: element.getLineColor(),
+        strokeOpacity: element.getLineOpacity()
+      });
       self.putSurface({element: element, overlay: dbOverlay}, result);
-      return result;
+      if (self.getMap().isInitialized()) {
+        return result.init().then(function () {
+          return result.show();
+        }).then(function () {
+          return result;
+        });
+      } else {
+        return result;
+      }
     });
   } else if (element.getType() === "REACTION") {
     return map.getModel().getReactionById(element.getId()).then(function (reactionData) {
@@ -214,7 +227,7 @@ MarkerSurfaceCollection.prototype.createSurfaceForDbOverlay = function (element,
       if (self.getMap().isInitialized()) {
         return result.init().then(function () {
           return result.show();
-        }).then(function(){
+        }).then(function () {
           return result;
         });
       } else {
diff --git a/frontend-js/src/main/js/map/surface/AliasSurface.js b/frontend-js/src/main/js/map/surface/AliasSurface.js
index ae0f1c23690b4d220dd0abb309a976c87485f78f..eb26323c4a76e1f78429ef68e426a6fc4d5e7d97 100644
--- a/frontend-js/src/main/js/map/surface/AliasSurface.js
+++ b/frontend-js/src/main/js/map/surface/AliasSurface.js
@@ -16,11 +16,22 @@ var Point = require('../canvas/Point');
  * Class representing overlay of the alias on the map relevant for a specific
  * layout.
  *
+ * @param {LayoutAlias} [params.overlayAlias] - {@link LayoutAlias} for which overlay is created
+ * @param {number} [params.startX] - this is the ratio on OX axis that should be use as a
+ *          starting point of the overlay. For instance when there are three
+ *          overlays to visualize then
+ *          <ul>
+ *          <li>the first layout have startX=0.0; endX=0.33333</li>
+ *          <li>second layout have startX=0.33333; endX=0.66666</li>
+ *          <li>the last layout have startX=0.66666; endX=1.0</li>
+ *          </ul>
+ * @param {number} [params.endX] this is the ratio on OX axis that should be use as a
+ *          starting point of the overlay
+
  * @param {IdentifiedElement} [params.element]
  * @param {Alias} params.alias
  * @param {AbstractCustomMap} params.map
- * @param {Rectangle} params.gmapObj
- * @param {function|function[]} params.onClick
+ * @param {function|function[]} [params.onClick]
  * @constructor
  * @extends AbstractSurfaceElement
  */
@@ -28,8 +39,15 @@ function AliasSurface(params) {
   // call super constructor
   AbstractSurfaceElement.call(this, params);
 
-  // google map object associated with the alias
-  this.addMapCanvasObject(params.gmapObj);
+  this.setOverlayData(params.overlayAlias);
+  this.setStartX(params.startX);
+  this.setEndX(params.endX);
+
+  this.setColor(params.color);
+  this.setFillOpacity(params.opacity);
+  this.setStrokeWeight(params.strokeWeight);
+  this.setStrokeColor(params.strokeColor);
+  this.setStrokeOpacity(params.strokeOpacity);
 
   // original data
   this.setBioEntity(params.alias);
@@ -44,6 +62,10 @@ AliasSurface.prototype.constructor = AliasSurface;
  * @param {string} color
  */
 AliasSurface.prototype.setColor = function (color) {
+  if (color === undefined) {
+    color = "#FF0000";
+  }
+
   this._color = color;
   var mapCanvasObjects = this.getMapCanvasObjects();
   for (var i = 0; i < mapCanvasObjects.length; i++) {
@@ -53,6 +75,75 @@ AliasSurface.prototype.setColor = function (color) {
   }
 };
 
+/**
+ *
+ * @param {number} opacity
+ */
+AliasSurface.prototype.setFillOpacity = function (opacity) {
+  this._fillOpacity = opacity;
+};
+
+/**
+ *
+ * @returns {number|undefined}
+ */
+AliasSurface.prototype.getFillOpacity = function () {
+  return this._fillOpacity;
+};
+
+/**
+ *
+ * @param {number} weight
+ */
+AliasSurface.prototype.setStrokeWeight = function (weight) {
+  if (weight === undefined) {
+    weight = 1;
+  }
+  this._strokeWeight = weight;
+};
+
+/**
+ *
+ * @returns {number}
+ */
+AliasSurface.prototype.getStrokeWeight = function () {
+  return this._strokeWeight;
+};
+
+/**
+ *
+ * @param {string} color
+ */
+AliasSurface.prototype.setStrokeColor = function (color) {
+  if (color === undefined) {
+    color = "#000000";
+  }
+  this._strokeColor = color;
+};
+
+/**
+ *
+ * @returns {string}
+ */
+AliasSurface.prototype.getStrokeColor = function () {
+  return this._strokeColor;
+};
+
+/**
+ *
+ * @param {number} opacity
+ */
+AliasSurface.prototype.setStrokeOpacity = function (opacity) {
+  if (opacity === undefined) {
+    opacity = 1;
+  }
+  this._strokeOpacity = opacity;
+};
+
+AliasSurface.prototype.getStrokeOpacity = function () {
+  return this._strokeOpacity;
+};
+
 /**
  * Function used to recalculate boundaries of the {@link AliasSurface}.
  * Boundaries define how big part of original alias is taken by this layout
@@ -73,32 +164,16 @@ AliasSurface.prototype.setBoundsForAlias = function (startX, endX) {
 };
 
 /**
- * Creates {@link AliasSurface}.
  *
- * @param {Object} params
- *          dict containing set of information required for surface creation
- * @param {LayoutAlias} params.overlayAlias - {@link LayoutAlias} for which overlay is created
- * @param {Alias} params.alias - {@link Alias data} of the alias
- * @param {AbstractCustomMap} params.map - {@link AbstractCustomMap} where overlay should be placed
- * @param {number} params.startX - this is the ratio on OX axis that should be use as a
- *          starting point of the overlay. For instance when there are three
- *          overlays to visualize then
- *          <ul>
- *          <li>the first layout have startX=0.0; endX=0.33333</li>
- *          <li>second layout have startX=0.33333; endX=0.66666</li>
- *          <li>the last layout have startX=0.66666; endX=1.0</li>
- *          </ul>
- * @param {number} params.endX this is the ratio on OX axis that should be use as a
- *          starting point of the overlay
- * @param {function|function[]} params.onClick
- * @returns {AliasSurface}
+ * @returns {Bluebird<any>}
  */
-AliasSurface.create = function (params) {
-  var overlayAlias = params.overlayAlias;
-  var alias = params.alias;
-  var map = params.map;
-  var startX = params.startX;
-  var endX = params.endX;
+AliasSurface.prototype.init = function () {
+  var self = this;
+  var overlayData = self.getOverlayData();
+  var alias = self.getBioEntity();
+  var map = self.getCustomMap();
+  var startX = self.getStartX();
+  var endX = self.getEndX();
 
   var pointA = new Point(alias.getX() + startX * alias.getWidth(), alias.getY());
   var pointB = new Point(alias.getX() + endX * alias.getWidth(), alias.getY() + alias.getHeight());
@@ -106,82 +181,79 @@ AliasSurface.create = function (params) {
   var bounds = new Bounds(pointA, pointB);
   var fillOpacity;
   return ServerConnector.getConfigurationParam(ConfigurationType.OVERLAY_OPACITY).then(function (result) {
-    fillOpacity = result;
-    return functions.overlayToColor(overlayAlias);
+    fillOpacity = self.getFillOpacity();
+    if (fillOpacity === undefined) {
+      fillOpacity = result;
+    }
+    if (overlayData !== undefined) {
+      return functions.overlayToColor(overlayData);
+    } else {
+      return "#FF0000";
+    }
   }).then(function (color) {
-    var rectangle = map.getMapCanvas().createRectangle({
+    self.addMapCanvasObject(map.getMapCanvas().createRectangle({
       fillOpacity: fillOpacity,
-      strokeWeight: 1,
+      strokeColor: self.getStrokeColor(),
+      strokeOpacity: self.getStrokeOpacity(),
+      strokeWeight: self.getStrokeWeight(),
       fillColor: color,
       bounds: bounds
-    });
-    return new AliasSurface({
-      map: map,
-      gmapObj: rectangle,
-      alias: alias,
-      onClick: params.onClick
-    });
+    }));
   });
 };
 
 /**
  *
- * @param {IdentifiedElement} params.element
- * @param {AbstractCustomMap} params.map
- * @param {function|function[]} params.onClick
+ * @returns {LayoutAlias}
+ */
+AliasSurface.prototype.getOverlayData = function () {
+  return this._overlayData;
+};
+
+/**
  *
- * @returns {Bluebird<AliasSurface>}
+ * @param {LayoutAlias} overlayData
  */
-AliasSurface.createFromIdentifiedElement = function (params) {
-  var element = params.element;
-  var map = params.map;
-  var model = map.getProject().getModelById(element.getModelId());
-  var fillOpacity;
-  return ServerConnector.getConfigurationParam(ConfigurationType.OVERLAY_OPACITY).then(function (result) {
-    fillOpacity = result;
-    return model.getByIdentifiedElement(element);
-  }).then(function (alias) {
-    var pointA = new Point(alias.getX(), alias.getY());
-    var pointB = new Point(alias.getX() + alias.getWidth(), alias.getY() + alias.getHeight());
+AliasSurface.prototype.setOverlayData = function (overlayData) {
+  this._overlayData = overlayData;
+};
 
-    var bounds = new Bounds(pointA, pointB);
+/**
+ *
+ * @returns {number}
+ */
+AliasSurface.prototype.getStartX = function () {
+  return this._startX;
+};
 
-    var color = "#FF0000";
-    if (element.getColor() !== undefined) {
-      color = element.getColor();
-    }
-    if (element.getOpacity() !== undefined) {
-      fillOpacity = element.getOpacity();
-    }
-    var strokeWeight = 1;
-    if (element.getLineWeight() !== undefined) {
-      strokeWeight = element.getLineWeight();
-    }
-    var strokeColor = "#000000";
-    if (element.getLineColor() !== undefined) {
-      strokeColor = element.getLineColor();
-    }
-    var strokeOpacity = 1;
-    if (element.getLineOpacity() !== undefined) {
-      strokeOpacity = element.getLineOpacity();
-    }
+/**
+ *
+ * @param {number} startX
+ */
+AliasSurface.prototype.setStartX = function (startX) {
+  if (startX === undefined) {
+    startX = 0;
+  }
+  this._startX = startX;
+};
 
-    var rectangle = map.getMapCanvas().createRectangle({
-      bounds: bounds,
-      fillOpacity: fillOpacity,
-      fillColor: color,
-      strokeColor: strokeColor,
-      strokeOpacity: strokeOpacity,
-      strokeWeight: strokeWeight
-    });
+/**
+ *
+ * @returns {number}
+ */
+AliasSurface.prototype.getEndX = function () {
+  return this._endX;
+};
 
-    return new AliasSurface({
-      gmapObj: rectangle,
-      map: map,
-      onClick: params.onClick,
-      alias: alias
-    });
-  });
+/**
+ *
+ * @param {number} endX
+ */
+AliasSurface.prototype.setEndX = function (endX) {
+  if (endX === undefined) {
+    endX = 0;
+  }
+  this._endX = endX;
 };
 
 
diff --git a/frontend-js/src/main/js/map/surface/ReactionSurface.js b/frontend-js/src/main/js/map/surface/ReactionSurface.js
index f868a7dedd0f9cb7c507f39882101286a33516af..2ad5117f0989537bc496f2e89196da9feedd969b 100644
--- a/frontend-js/src/main/js/map/surface/ReactionSurface.js
+++ b/frontend-js/src/main/js/map/surface/ReactionSurface.js
@@ -17,7 +17,7 @@ var IdentifiedElement = require('../data/IdentifiedElement');
  *
  * @param {IdentifiedElement} [params.element]
  * @param {AbstractCustomMap} params.map
- * @param {function|function[]} params.onClick
+ * @param {function|function[]} [params.onClick]
  * @param {Reaction} params.reaction
  * @param {LayoutReaction} [params.layoutReaction]
  * @param {boolean} params.customized
diff --git a/frontend-js/src/test/js/helper.js b/frontend-js/src/test/js/helper.js
index 83a035daa089a636970e21b42f24738c6d40254f..61ac98ac572b069bb9b8965d9823c3509704ec45 100644
--- a/frontend-js/src/test/js/helper.js
+++ b/frontend-js/src/test/js/helper.js
@@ -218,6 +218,11 @@ Helper.prototype.createLayoutAlias = function (alias) {
   });
 };
 
+/**
+ *
+ * @param {Reaction} reaction
+ * @returns {LayoutReaction}
+ */
 Helper.prototype.createLayoutReaction = function (reaction) {
   var reactionId;
   var modelId;
@@ -251,6 +256,12 @@ Helper.prototype.createIdentifiedElement = function (element) {
   return new IdentifiedElement(element);
 };
 
+/**
+ *
+ * @param {AbstractCustomMap|MapModel} map
+ * @param {boolean} [complete]
+ * @returns {Reaction}
+ */
 Helper.prototype.createReaction = function (map, complete) {
   var mapId = null;
   if (map !== undefined) {
diff --git a/frontend-js/src/test/js/map/AbstractCustomMap-test.js b/frontend-js/src/test/js/map/AbstractCustomMap-test.js
index b29a3bcf33bf786c12b97e138ac5a2aa5c7581a4..de87cdc59188d3bc24d0abffc6c8bc4d6867f65b 100644
--- a/frontend-js/src/test/js/map/AbstractCustomMap-test.js
+++ b/frontend-js/src/test/js/map/AbstractCustomMap-test.js
@@ -117,18 +117,17 @@ describe('AbstractCustomMap', function () {
         map: map,
         element: ie
       });
-      var markers;
-      return AliasSurface.create({
+      var surface = new AliasSurface({
         overlayAlias: helper.createLayoutAlias(alias),
         alias: alias,
         map: map,
         startX: 1,
         endX: 2
-      }).then(function (surface) {
-        markers = [marker, surface];
+      });
+      var markers = [marker, surface];
+      return surface.init().then(function () {
         return marker.init();
       }).then(function () {
-
         var center = map.getCenter();
         map.fitBounds(markers);
         var center2 = map.getCenter();
diff --git a/frontend-js/src/test/js/map/marker/AliasMarker-test.js b/frontend-js/src/test/js/map/marker/AliasMarker-test.js
index c0c617ef6d54623480f1698cb329847936fb6623..29ce5e52d017bd9bc424b19eeb0d0bd09a249b2c 100644
--- a/frontend-js/src/test/js/map/marker/AliasMarker-test.js
+++ b/frontend-js/src/test/js/map/marker/AliasMarker-test.js
@@ -48,14 +48,20 @@ describe('AliasMarker', function () {
       map: map
     });
     var icon = "test.png";
-    marker.addIcon("test.png");
-    assert.equal(icon, marker.getIcon());
-    marker.addIcon("test.png");
-    assert.equal(icon, marker.getIcon());
-    marker.removeIcon("test.png");
-    assert.equal(icon, marker.getIcon());
-    marker.removeIcon("test.png");
-    assert.equal(undefined, marker.getIcon());
+    return marker.init().then(function () {
+      return marker.addIcon("test.png");
+    }).then(function () {
+      assert.equal(icon, marker.getIcon());
+      return marker.addIcon("test.png");
+    }).then(function () {
+      assert.equal(icon, marker.getIcon());
+      return marker.removeIcon("test.png");
+    }).then(function () {
+      assert.equal(icon, marker.getIcon());
+      return marker.removeIcon("test.png");
+    }).then(function () {
+      assert.equal(undefined, marker.getIcon());
+    });
   });
 
   it("click on marker", function () {
diff --git a/frontend-js/src/test/js/map/surface/AliasSurface-test.js b/frontend-js/src/test/js/map/surface/AliasSurface-test.js
index 723e6832dac5ac66731e391c113fa6955dfcfa50..5658cfd95042e91916aed4e6863c48e7a78b9d08 100644
--- a/frontend-js/src/test/js/map/surface/AliasSurface-test.js
+++ b/frontend-js/src/test/js/map/surface/AliasSurface-test.js
@@ -4,88 +4,64 @@ require("../../mocha-config");
 var logger = require('../../logger');
 
 var AliasSurface = require('../../../../main/js/map/surface/AliasSurface');
-var IdentifiedElement = require('../../../../main/js/map/data/IdentifiedElement');
 var ServerConnector = require('../../ServerConnector-mock');
 
 var assert = require('assert');
 
 describe('AliasSurface', function () {
-  it("constructor", function () {
+  it("init", function () {
     var map = helper.createCustomMap();
     var alias = helper.createAlias(map);
     var layoutAlias = helper.createLayoutAlias(alias);
 
-    return AliasSurface.create({
+    var result = new AliasSurface({
       overlayAlias: layoutAlias,
       alias: alias,
       map: map,
       startX: 1,
       endX: 2
-    }).then(function (result) {
-      assert.ok(result instanceof AliasSurface);
-      assert.equal(logger.getWarnings.length, 0);
-      assert.ok(result.getIdentifiedElement());
     });
-  });
-
-  it("createFromIdentifiedElement", function () {
-    var map;
-    var alias;
-    return ServerConnector.getProject().then(function (project) {
-      map = helper.createCustomMap(project);
-      return map.getModel().getAliasById(329171);
-    }).then(function (result) {
-      alias = result;
-      var identifiedElement = new IdentifiedElement(alias);
-
-      return AliasSurface.createFromIdentifiedElement({
-        element: identifiedElement,
-        map: map
-      });
-    }).then(function (result) {
-      assert.ok(result instanceof AliasSurface);
+    return result.init().then(function () {
       assert.equal(logger.getWarnings.length, 0);
       assert.ok(result.getIdentifiedElement());
     });
   });
+
   describe("setBoundsForAlias", function () {
-    it("from createFromIdentifiedElement", function () {
+    it("from simple element", function () {
       var map;
-      var alias;
+      var alias, surface;
       return ServerConnector.getProject().then(function (project) {
         map = helper.createCustomMap(project);
         return map.getModel().getAliasById(329171);
       }).then(function (result) {
         alias = result;
-        var identifiedElement = new IdentifiedElement(alias);
-
-        return AliasSurface.createFromIdentifiedElement({
-          element: identifiedElement,
+        surface = new AliasSurface({
+          alias: result,
           map: map
         });
-      }).then(function (result) {
-        var bounds = result.getBounds();
-        result.setBoundsForAlias(1, 3);
-        var bounds2 = result.getBounds();
+        return surface.init();
+      }).then(function () {
+        var bounds = surface.getBounds();
+        surface.setBoundsForAlias(1, 3);
+        var bounds2 = surface.getBounds();
         assert.equal(bounds.getRightBottom().y, bounds2.getRightBottom().y);
         assert.ok(bounds.getRightBottom().x !== bounds2.getRightBottom().x);
       });
     });
 
-    it("from create", function () {
+    it("from element with data overlay", function () {
       var map = helper.createCustomMap();
       var alias = helper.createAlias(map);
-      var surface;
-
-      return AliasSurface.create({
+      var surface = new AliasSurface({
         overlayAlias: helper.createLayoutAlias(alias),
         alias: alias,
         map: map,
         startX: 1,
         endX: 2
-      }).then(function (result) {
-        surface = result;
-        return result.setBoundsForAlias(0, 1);
+      });
+      return surface.init().then(function () {
+        return surface.setBoundsForAlias(0, 1);
       }).then(function () {
         assert.ok(surface.getBounds());
       });
@@ -95,28 +71,26 @@ describe('AliasSurface', function () {
   describe('click', function () {
     it("default", function () {
       var map;
-      var alias;
+      var alias, surface;
       var clicked = false;
       return ServerConnector.getProject().then(function (project) {
         map = helper.createCustomMap(project);
         return map.getModel().getAliasById(329171);
       }).then(function (result) {
         alias = result;
-        var identifiedElement = new IdentifiedElement(alias);
-        return AliasSurface.createFromIdentifiedElement({
-          element: identifiedElement,
+        surface = new AliasSurface({
+          alias: result,
           map: map,
           onClick: function () {
             clicked = true;
           }
         });
-      }).then(function (result) {
-        return result.onClickHandler();
+        return surface.init();
+      }).then(function () {
+        return surface.onClickHandler();
       }).then(function () {
         assert.ok(clicked);
       });
     });
-
   });
-
 });
diff --git a/frontend-js/src/test/js/map/surface/ReactionSurface-test.js b/frontend-js/src/test/js/map/surface/ReactionSurface-test.js
index 957393063bd91333dc69f270d52c1f0ac2083d37..cbe48656eb8fe90534d71937949e4f634dd412df 100644
--- a/frontend-js/src/test/js/map/surface/ReactionSurface-test.js
+++ b/frontend-js/src/test/js/map/surface/ReactionSurface-test.js
@@ -2,6 +2,7 @@
 
 require("../../mocha-config");
 var ReactionSurface = require('../../../../main/js/map/surface/ReactionSurface');
+// noinspection JSUnusedLocalSymbols
 var ServerConnector = require('../../ServerConnector-mock');
 
 var assert = require('assert');
@@ -67,17 +68,21 @@ describe('ReactionSurface', function () {
       customized: false
     });
     return reactionOverlay.init().then(function () {
-      reactionOverlay.show();
+      return reactionOverlay.show();
+    }).then(function () {
       assert.equal(reactionOverlay.isShown(), true);
-      reactionOverlay.hide();
+      return reactionOverlay.hide();
+    }).then(function () {
       assert.equal(reactionOverlay.isShown(), false);
 
-      reactionOverlay.show();
+      return reactionOverlay.show();
+    }).then(function () {
       assert.ok(reactionOverlay.isShown());
 
       assert.equal(logger.getWarnings().length, 0);
 
-      reactionOverlay.show();
+      return reactionOverlay.show();
+    }).then(function () {
       assert.ok(reactionOverlay.isShown());
       assert.equal(logger.getWarnings().length, 1);
     });
@@ -112,7 +117,7 @@ describe('ReactionSurface', function () {
       end: {
         x: 100,
         y: 100
-      },
+      }
     }, "#000000", 3, map);
 
     assert.ok(line);