showing overlays refactored

it might not work when there are plenty of reaction overlays to see due
to function inside loop issue

frontend-js/src/main/js/map/AbstractCustomMap.js

@@ -567,6 +567,7 @@ AbstractCustomMap.prototype._showSelectedLayout = function(layoutId, index, leng
     if (!self.initialized) {
       logger.debug("Model " + self.getId() + " not initialized");
       resolve();
+      return;
     } else {
       logger.debug("Showing model " + self.getId());
     }
@@ -578,48 +579,30 @@ AbstractCustomMap.prototype._showSelectedLayout = function(layoutId, index, leng
     // end ratio
     var endX = (index + 1) * (1.0 / length);
 
-    var elementsToProcess = 0;
-    var elementsProcessed = 0;
-    var elementProcessedFun = function() {
-      if (elementsProcessed === elementsToProcess) {
-        resolve();
-      }
-    };
+    var layoutAliases;
+    var layoutReactions;
 
     return self.getModel().getLayoutDataById(layoutId).then(function(layout) {
-      var layoutAliases = layout.getAliases();
-
-      elementsToProcess += layoutAliases.length;
-      for (var i = 0; i < layoutAliases.length; i++) {
-
-        var layoutAlias = layoutAliases[i];
-        self.getModel().getAliasById(layoutAlias.getId()).then(function(aliasData) {
-          if (aliasData === null || aliasData === undefined) {
-            throw new Error("Cannot find data for alias: " + layoutAlias.getId());
-          } else {
-            var overlay = AliasOverlay.create(layoutAlias, aliasData, self, startX, endX);
-            self.selectedLayoutOverlays[layoutId].push(overlay);
-          }
-          elementsProcessed++;
-          elementProcessedFun();
-        }, reject);
-      }
-
-      var layoutReactions = layout.getReactions();
-
-      elementsToProcess += layoutReactions.length;
-      for (var j = 0; j < layoutReactions.length; j++) {
-
-        var layoutReaction = layoutReactions[j];
-        self.getModel().getReactionById(layoutReaction.getId()).then(function(reactionData) {
+      layoutAliases = layout.getAliases();
+      layoutReactions = layout.getReactions();
+
+      return Promise.each(layoutAliases,function(layoutAlias,index,length){
+        return self.getModel().getAliasById(layoutAlias.getId()).then(function(aliasData) {
+          var overlay = AliasOverlay.create(layoutAlias, aliasData, self, startX, endX);
+          self.selectedLayoutOverlays[layoutId].push(overlay);
+        });
+      });
+    }).then(function(){
+      return Promise.each(layoutReactions,function(layoutReaction){
+        return self.getModel().getReactionById(layoutReaction.getId()).then(function(reactionData) {
           var reactionOverlay = new ReactionOverlay(layoutReaction, reactionData, self, length === 1);
           self.selectedLayoutOverlays[layoutId].push(reactionOverlay);
-          elementsProcessed++;
-          elementProcessedFun();
-        }, reject);
-      }
-      elementProcessedFun();
-    });
+          reactionOverlay.show();
+        });
+      });
+    }).then(function(){
+      resolve();
+    }).catch(reject);
   });
 };