Following changes done :

1. Click anywhere on the map: (current behavior, no change)
    1.1 If there is no active mark on the map, place a pin/marker on the
    map to show the current selected location.
    1.2 If  there  is an active mark on the map, move the current marker
    to the new location. (Remove  the current  pin and  place one on new
    location)
2. Button “Waypoints”:  (changes)
    2.1 If the waypoint list is not  empty, it shall toggle the state of
    showing a list of waypoints and hide the list.
    2.2 If the list  is empty, shall  show an  error  message or show an
    empty list or get disabled.
3. Button “Add WayPoint”: (changes)
    3.1 If there is a selected location (active mark), add the  location
    to the waypoints list and show  the waypoint  list so that  the user
    knows it (also send onWayPointChange Notification if needed).
    3.2 If there  is no active  mark on the map, show a message ask user
    to place a mark on the map first before click the button.
4. Button “Clear”: clear all marks on the map. (new button)
5. Button “Start Animation”/”Stop Animation”: start/stop animation.
   (current behavior, no change)
6. Button “Navigate”:
    6.1 If there is a selected  location, set it as the destination (new
    last waypoint). Calculate and show the route.
    6.2 If there is no selected location, (changes) and
        6.2.1 If  the waypoint is  not empty,  set the last  waypoint as
        destination, calculate and show the route.
        6.2.2 If the waypoint is empty, show a message ask user to set a
        destination.
7. “Places” button. – not used.
8. Need to change  the inscription "Please select a WayPoint" to "Please
   select a place on the map".

Author: BSolonenko

app/controller/NavigationController.js

@@ -58,7 +58,7 @@ SDL.NavigationController = Em.Object.create(
     showWpList: function() {
       if (!this.model.wp && this.model.WayPointDetails.length == 0) {
         SDL.PopUp.create().appendTo('body').popupActivate(
-          'List is empty. Please setup navigation route!'
+          'List is empty. Please add a new WayPoints!'
         );
         return;
       }
@@ -690,16 +690,27 @@ SDL.NavigationController = Em.Object.create(
       if (SDL.NavigationModel.selectedLocationMarker == null ||
           SDL.NavigationModel.selectedLocationMarker.getMap() == null) {
         SDL.PopUp.create().appendTo('body').popupActivate(
-            'Error: Please, select WayPoint'
+            'Error: Please, select a place on the map'
         );
         return;
       }
-      var marker = new google.maps.Marker({
-        position: SDL.NavigationModel.selectedLocationMarker.getPosition(),
-        map: SDL.NavigationController.map
-      });
-      SDL.NavigationModel.WayPointMarkers.push(marker);
-      SDL.NavigationModel.selectedLocationMarker.setMap(null);
+
+      var data = SDL.deepCopy(SDL.NavigationModel.WayPointDetails);
+      var wp = SDL.NavigationController.addWayPointItem(
+        SDL.NavigationModel.selectedLocationMarker.getPosition(), 
+                                "WayPoint " + (data.length + 1), ''
+      );
+      data.push(wp);
+      SDL.NavigationModel.set("WayPointDetails",data);
+      
+      this.model.set("wp", true);
+      if(SDL.NavigationController.isRouteSet){
+        SDL.NavigationController.setRoutes();
+      }
+      else{
+        SDL.NavigationModel.selectedLocationMarker.setMap(null);
+        FFW.Navigation.onWayPointChange(SDL.NavigationModel.WayPointDetails);
+      }
     },
     addWaypointLocation: function(latlng) {
       var res = SDL.NavigationController.getLocationByCoord(
@@ -938,23 +949,37 @@ SDL.NavigationController = Em.Object.create(
         SDL.NavigationModel.toggleProperty('wp');
       }
     },
-    setRoutes: function() {
+    checkRoutes: function(){
       if (SDL.NavigationModel.selectedLocationMarker == null) {
         SDL.PopUp.create().appendTo('body').popupActivate(
-            'Navigation error: Destination point is not set'
+            'Error: Destination point is not set'
         );
-        return;
+        return false;
       }
       if (SDL.NavigationController.isRouteSet == false &&
           SDL.NavigationModel.selectedLocationMarker.getMap() == null) {
-        SDL.PopUp.create().appendTo('body').popupActivate(
-            'Navigation error: Destination point is not selected'
-        );
-        return;
+            var markerCounts = SDL.NavigationModel.WayPointMarkers.length;
+            if(markerCounts == 0){      
+              SDL.PopUp.create().appendTo('body').popupActivate(
+                  'Error: Destination point is not set. Please select the destination point'
+              );
+              return false;
+            }else{
+              var marker = SDL.NavigationModel.WayPointMarkers.pop();
+              SDL.NavigationModel.selectedLocationMarker.setMap(this.map);
+              SDL.NavigationModel.selectedLocationMarker.setPosition(marker.getPosition());
+              marker.setMap(null);
+            }
       }
       if (SDL.NavigationController.isRouteSet &&
           SDL.NavigationModel.selectedLocationMarker.getMap() == null) {
         SDL.NavigationController.clearRoutes();
+        return false;
+      }
+      return true;
+    },
+    setRoutes: function() {
+      if(!SDL.NavigationController.checkRoutes() ){
         return;
       }
 

app/view/navigationView.js

@@ -42,7 +42,7 @@ SDL.NavigationView = Em.ContainerView.create(
       'POIList',
       'WPList',
       'codeEditor',
-      'POIButton',
+      'clearButton',
       'WPButton',
       'AddWP',
       'map',
@@ -133,19 +133,22 @@ SDL.NavigationView = Em.ContainerView.create(
         )
       }
     ),
-    POIButton: SDL.Button.extend(
+    clearButton: SDL.Button.extend(
       {
-        classNameBindings: 'SDL.FuncSwitcher.rev::is-disabled',
-        elementId: 'POIButton',
-        disabledBinding: Em.Binding.oneWay(
-          'SDL.NavigationController.isAnimateStarted'
-        ),
-        classNames: 'POIButton button',
-        text: 'Places',
-        action: 'showPoiList',
-        target: 'SDL.NavigationController'
-      }
-    ),
+      isButtonDisabled: function() {
+        return SDL.NavigationModel.WayPointDetails.length == 0 ||
+               SDL.NavigationController.isAnimateStarted;
+      }.property('SDL.NavigationModel.WayPointDetails',
+                 'SDL.NavigationController.isAnimateStarted'),
+      classNameBindings: 'SDL.FuncSwitcher.rev::is-disabled',
+      elementId: 'clearButton',
+      disabledBinding: 'isButtonDisabled',
+      classNames: 'clearButton button',
+      text: 'Clear',
+      action: 'clearRoutes',
+      target: 'SDL.NavigationController'
+    }
+  ),
     WPButton: SDL.Button.extend(
       {
         isButtonDisabled: function() {
@@ -165,7 +168,7 @@ SDL.NavigationView = Em.ContainerView.create(
     AddWP: SDL.Button.extend(
       {
         classNameBindings: 'SDL.FuncSwitcher.rev::is-disabled',
-        disabledBinding: 'SDL.NavigationController.isRouteSet',
+        disabledBinding: 'SDL.NavigationController.isAnimateStarted',
         elementId: 'AddWP',
         classNames: 'AddWP button',
         text: 'Add waypoint',

css/navigation.css

@@ -48,7 +48,7 @@
     position: absolute;
 }
 
-.POIButton {
+.navigationButton {
     z-index: 1;
     top: 335px;
     left: 20px;
@@ -72,7 +72,7 @@
     text-align: center;
 }
 
-.navigationButton {
+.clearButton {
     z-index: 1;
     bottom: 60px;
     left: 20px;