Первый вариант маршрутов

ground/controllers/IndexController.php

@@ -9,7 +9,7 @@ class IndexController extends Controller
 	static function actionIndex()
 	{
         self::addScript('/js/jquery-2.1.0.min.js');
-        self::addScript('http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU&mode=release');
+        self::addScript('http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru-RU&mode=release');
         self::addScript('/js/main.js?ver='.App::getConfig('version'));
         self::addScript('/js/bootstrap.min.js');
         self::addStyle('/css/style.css?ver='.App::getConfig('version'));

ground/views/indexTemplate.php

@@ -1,4 +1,11 @@
 <div id="map"></div>
+<div id="routeWindow" class="popover fade in" style="display: none; position: absolute; top: 50px; right: 7px; left: auto;">
+	<h3 class="popover-title">Мой маршрут</h3>
+	<div class="popover-content">
+		<ul id="wayPoints"></ul>
+		<button class="btn btn-default" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
+	</div>
+</div>
 <div id="footer">
     <table width="100%">
         <tr>
@@ -14,7 +21,7 @@
                 &nbsp;
             </td>
             <td>
-<!--                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>-->
+                <button class="btn btn-default" type="button" onclick="$('#routeWindow').toggle(200)"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>
                 <button class="btn btn-default" type="button" onclick="showMeOnTheMap()"><span class="glyphicon glyphicon-screenshot"></span> Я на карте</button>
             </td>
             <td class="text-right">

public/js/main.js

@@ -53,19 +53,16 @@ function init() {
     myMap.geoObjects.add(im);
 }
 
-function getPoints()
+function constructPoint(data)
 {
-    $.ajax({
+    id = data['id'];
-        url: "/json/points/",
-        success: function(data){
-            for(var k in data) {
-                id = data[k]['id'];
     points[id] = new ymaps.Placemark(
-                    [data[k]['lat'], data[k]['lng']], {
+        [data['lat'], data['lng']], {
-                        hintContent: data[k]['name'],
+            hintContent: data['name'],
             id: id
-                    },{
+        },
-                        iconImageHref: data[k]['categoryIcon'],
+        {
+            iconImageHref: data['categoryIcon'],
             iconImageSize: [32, 37],
             iconImageOffset: [-16, -33],
             openEmptyBalloon: true,
@@ -75,7 +72,17 @@ function getPoints()
     points[id].events.add('click', function (e) {
         showInfo(e.get('target').properties.get('id'));
     });
-                myMap.geoObjects.add(points[id]);
+
+    return points[id];
+}
+
+function getPoints()
+{
+    $.ajax({
+        url: "/json/points/",
+        success: function(data){
+            for(var k in data) {
+                myMap.geoObjects.add(constructPoint(data[k]));
             }
         }
     });
@@ -94,6 +101,9 @@ function showInfo(id)
                 description = '<div class="infoCard">' +
                         '<h3>' + data.name + '</h3>' +
                         '<img src="' + data.img + '" />' +
+                        '<button type="button" class="btn btn-default btn-xs" onclick="addToRoute(' + id + ')">' +
+                        '<span class="glyphicon glyphicon-plus"></span> Добавить в маршрут' +
+                        '</button><br/>' +
                         data.description +
                         ' <a href="' + data.source + '" target="blank">Подробнее...</a></div>'
                 points[id].properties.set('balloonContent', description);
@@ -161,30 +171,20 @@ function addPoint()
             lng: $('#addPointLng').val()
         },
         success: function(data) {
-            id = data;
+            balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false});
-            points[id] = new ymaps.Placemark(
-                    [$('#addPointLat').val(), $('#addPointLng').val()], {
-                hintContent: $('#addPointName').val(),
-                id: id
-            }, {
-                iconImageHref: categories[$('#addPointCategoryId').val()].icon,
-                iconImageSize: [32, 37],
-                iconImageOffset: [-16, -33],
-                openEmptyBalloon: true,
-                balloonCloseButton: false
-            });
-
-            points[id].events.add('click', function(e) {
-                showInfo(e.get('target').properties.get('id'));
-            });
-
-            var balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false});
             setTimeout(function() {
                 balloon.close();
             }, 3000);
 
+            obj = {};
+            obj.id = data;
+            obj.name = $('#addPointName').val();
+            obj.lat = $('#addPointLat').val();
+            obj.lng = $('#addPointLng').val();
+            obj.categoryIcon = categories[$('#addPointCategoryId').val()].icon;
+
             setTimeout(function(){
-                myMap.geoObjects.add(points[id]);
+                myMap.geoObjects.add(constructPoint(obj));
             }, 3000);
 
             $('#addPointModal').modal('hide');
@@ -219,3 +219,35 @@ function addPoint()
         }
     });
 }
+
+function buildRoute()
+{
+    wayPoints = Array();
+
+    $('#wayPoints li').each(function(i, el)
+    {
+        wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates());
+    });
+
+    ymaps.route(wayPoints, {
+        mapStateAutoApply: true
+    }).then(function(route) {
+//        console.log(route.getPaths());
+        route.options.set({
+            // в балуне выводим только информацию о времени движения с учетом пробок
+            balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
+            strokeColor: '9000ffff',
+            opacity: 0.9
+        });
+
+        myMap.geoObjects.add(route);
+    });
+}
+
+function addToRoute(id)
+{
+    $('#wayPoints').append('<li pointid="'+id+'">' + points[id].properties.get('hintContent') + '</li>');
+    myMap.balloon.close();
+    $('#routeWindow').show(200);
+    return true;
+}