Работа с маршрутами

ground/controllers/IndexController.php

@@ -21,12 +21,14 @@ class IndexController extends Controller
 
 		self::addScript('/js/app.js?ver='.App::getConfig('version'));
 		self::addScript('/js/map.js?ver='.App::getConfig('version'));
+		self::addScript('/js/leaflet-routing-machine.js');
 		self::addScript('/js/route.js?ver='.App::getConfig('version'));
 
         self::addStyle('/css/style.css?ver='.App::getConfig('version'));
         self::addStyle('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css');
         self::addStyle('/css/bootstrap.min.css');
         self::addStyle('/css/bootstrap-theme.min.css');
+		self::addStyle('/css/leaflet-routing-machine.css');
 
 		if (!App::$user )
 			self::addScript('//ulogin.ru/js/ulogin.js');

ground/views/indexTemplate.php

@@ -47,13 +47,14 @@
 			</span>
 		</span>
 	</div>
-	<div id="boxRoute">
+	<div id="boxRoute" style="height: 100%; overflow-y: auto;">
 		<h3>Маршрут</h3>
 		<div id="wayPoints"></div>
-		<?php if ($user): ?>
+		<div id="routeDistance"></div>
-			<button class="btn btn-default" onclick="saveRoute()"><span class="glyphicon glyphicon-cloud-upload"></span> Сохранить</button>
-		<?php endif; ?>
 		<button class="btn btn-info" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
+		<?php if ($user): ?>
+		<button class="btn btn-default" onclick="saveRoute()"><span class="glyphicon glyphicon-cloud-upload" title="Сохранить"></span></button>
+		<?php endif; ?>
 	</div>
 	<div id="boxUser">
 		<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>

public/js/map.js

@@ -55,28 +55,10 @@ function init() {
 			}
 		}
 		else {
-			myMap._popup._close();
+			closePopup();
 		}
 	});
 
-//	points.im = new ymaps.Placemark(
-//			[ymaps.geolocation.latitude, ymaps.geolocation.longitude],
-//			{
-//				balloonContentHeader: 'Вы здесь',
-//				hintContent: 'Ваше местоположение',
-//				balloonContent:
-//						'<button type="button" class="btn btn-default btn-xs" onclick="addToRoute(\'im\')">' +
-//						'<span class="glyphicon glyphicon-plus"></span> Добавить в маршрут' +
-//						'</button>'
-//			},
-//	{
-//		iconImageHref: '/ico/man.png',
-//		iconImageSize: [32, 37],
-//		iconImageOffset: [-16, -33],
-//	}
-//	);
-//	myMap.geoObjects.add(points.im);
-
 	$("#wayPoints").sortable();
 	$("#wayPoints").disableSelection();
 
@@ -90,6 +72,14 @@ function init() {
 	return true;
 }
 
+ymaps.ready(function(){
+	points.im = L.marker(
+			[ymaps.geolocation.latitude, ymaps.geolocation.longitude], {icon: categories.im, title: 'Вы здесь'}
+	);
+	points.im.addTo(myMap);
+	points.im.bindPopup('<b>Ваше местоположение</b><br/><img src="/ico/man.png" /> <button type="button" class="btn btn-default btn-xs" onclick="addToRoute(\'im\')"><span class="glyphicon glyphicon-plus"></span> Добавить в маршрут</button>')
+});
+
 /**
  * Создаёт точку для карту - Placemark.
  * @param {Array} data
@@ -212,6 +202,14 @@ function initCategories()
                     popupAnchor:  [0, 1]
                 });
             }
+
+			categories.im = L.icon({
+				iconUrl: '/ico/man.png',
+				iconSize:     [32, 37],
+				iconAnchor:   [16, 37],
+				popupAnchor:  [0, 1]
+			});
+
             initPoints();
 		}
 	});
@@ -397,7 +395,7 @@ function editPoint(id)
 	$('#addPointLat').val(pointsSources[id].lat);
 	$('#addPointLng').val(pointsSources[id].lng);
 
-	myMap._popup._close();
+	closePopup();
 	$('#addPointModal').modal('show');
 	setStatus(statusEdit);
 }
@@ -419,3 +417,9 @@ function setLayer(name)
 	$('.layers').removeClass('selected');
 	$('.'+layer+'Layer').addClass('selected');
 }
+
+function closePopup()
+{
+	if (myMap._popup)
+		myMap._popup._close();
+}

public/js/route.js

@@ -1,5 +1,5 @@
 /* 
- * Набор функций для работы с маршрктами.
+ * Набор функций для работы с маршрутами.
  */
 
 /**
@@ -10,29 +10,29 @@ function buildRoute()
 {
 	wayPoints = Array();
 	if (route)
-		myMap.geoObjects.remove(route);
+		myMap.removeLayer(route);
 
 	$('#wayPoints div').each(function(i, el)
 	{
-		wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates());
+		wayPoints.push({latLng: points[$(el).attr('pointId')]._latlng});
 	});
 
-	ymaps.route(wayPoints, {
+	if (wayPoints.length > 1)
-		mapStateAutoApply: true
+	{
-	}).then(function(newRoute) {
+		L.Routing.osrm().route(wayPoints, function(err, routes) {
-		route = newRoute;
+			if (err) {
-		route.options.set({
+				console.error(err);
-			// в балуне выводим только информацию о времени движения с учетом пробок
+				alert('Произошла ошибка. Вероятно построить маршрут по выбранным точкам невозможно.');
-			balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
+			} else {
-			strokeColor: '9000ffff',
+				route = L.Routing.line(routes[0]);
-			opacity: 0.9
+				distance = Math.round(routes[0].summary.totalDistance / 1000);
+				$('#routeDistance').html('Протяженность <b>' + distance + '</b> км.');
+				route.addTo(myMap);
+			}
 		});
 
-		myMap.geoObjects.add(route);
-		distance = Math.round(route.getLength() / 1000);
-		$('#routeDistance').text(distance + ' км.');
 		routeToURL();
-	});
+	}
 }
 
 /**
@@ -126,10 +126,11 @@ function deleteRoute(id)
  */
 function addToRoute(id)
 {
-	console.log(points[id]);
+	$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove();buildRoute();">&times;</span> ' + points[id].options.title + '</div>');
-	$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove()">&times;</span> ' + points[id].options.title + '</div>');
+	closePopup();
-	myMap._popup._close();
 	openBox('Route', true);
+
+	buildRoute();
 	return true;
 }