Leaflet - создание, редактирование точки

public/js/main.js

@@ -104,47 +104,36 @@ function init() {
 //	myMap.copyrights.add('Участники <a href="http://www.openstreetmap.org/copyright" target="blank">OpenStreetMap</a>');
 //	myMap.copyrights.add('Tiles courtesy of <a href="http://www.mapquest.com/" target="blank">MapQuest</a>');
 
-	initCategories()
+	initCategories(); // getPoints внутри
-//	getPoints();
+
+	myMap.on('click', function(e) {
+		if (!myMap._popup) {
+			if (status == statusHunting)
+			{
+				$('#addPointId').remove();
+				$('#addPointForm input').val('');
+				$("#addPointCategoryId option" ).attr('selected', null);
+				$('#addPointLat').val(e.latlng.lat);
+				$('#addPointLng').val(e.latlng.lng);
+
+				$('#myModalLabel').text('Добавление новой точки');
+				$('#addPointModal').modal('show');
+			} else if (status == statusReHunting)
+			{
+				resetStatus();
+
+				$('#addPointLat').val(e.latlng.lat);
+				$('#addPointLng').val(e.latlng.lng);
+
+				$('#myModalLabel').text('Редактирование точки');
+				$('#addPointModal').modal('show');
+			}
+		}
+		else {
+			myMap._popup._close();
+		}
+	});
 
-//	myMap.events.add('click', function(e) {
-//		if (!myMap.balloon.isOpen()) {
-//			if (status == statusHunting)
-//			{
-//				coords = e.get('coordPosition');
-//
-//				$('#addPointId').remove();
-//				$('#addPointForm input').val('');
-//				$("#addPointCategoryId option" ).attr('selected', null);
-//				$('#addPointLat').val(coords[0].toPrecision(11));
-//				$('#addPointLng').val(coords[1].toPrecision(11));
-//
-//				$('#myModalLabel').text('Добавление новой точки');
-//				$('#addPointModal').modal('show');
-//			} else if (status == statusReHunting)
-//			{
-//				resetStatus();
-//				coords = e.get('coordPosition');
-//
-//				$('#addPointLat').val(coords[0].toPrecision(11));
-//				$('#addPointLng').val(coords[1].toPrecision(11));
-//
-//				$('#myModalLabel').text('Редактирование точки');
-//				$('#addPointModal').modal('show');
-//			}
-//		}
-//		else {
-//			myMap.balloon.close();
-//		}
-//	});
-//
-//	myMap.events.add('boundschange', function(e) {
-//		if (!myMap.balloon.isOpen() && $('#routeWindow').css('display') == 'none')
-//		{
-//			history.pushState({}, document.title, "/?lat=" + e.get('newCenter')[0] + "&lng=" + e.get('newCenter')[1] + "&zoom=" + e.get('newZoom'));
-//		}
-//	});
-//
 //	points.im = new ymaps.Placemark(
 //			[ymaps.geolocation.latitude, ymaps.geolocation.longitude],
 //			{
@@ -162,9 +151,9 @@ function init() {
 //	}
 //	);
 //	myMap.geoObjects.add(points.im);
-//
+
-//	$("#wayPoints").sortable();
+	$("#wayPoints").sortable();
-//	$("#wayPoints").disableSelection();
+	$("#wayPoints").disableSelection();
 
     myMap.on('moveend', function(e) {
         if (!myMap._popup && $('#routeWindow').css('display') == 'none')
@@ -277,7 +266,6 @@ function initCategories()
 	$.ajax({
 		url: "/json/categories/",
 		success: function(data) {
-			//categories = data;
             for (var k in data) {
                 categories[data[k]['id']] = L.icon({
                     iconUrl: data[k]['icon'],
@@ -286,7 +274,6 @@ function initCategories()
                     popupAnchor:  [0, 1] // point from which the popup should open relative to the iconAnchor
                 });
             }
-            
             getPoints();
 		}
 	});
@@ -335,12 +322,12 @@ function activateAddPoint()
 	$('#addPointButton').toggleClass('btn-success').toggleClass('btn-default');
 	if ($('#addPointButton').hasClass('btn-success'))
 	{
-		myMap.cursors.push('crosshair');
+		$('#map').css('cursor', 'crosshair');
 		setStatus(statusHunting)
 	}
 	else
 	{
-		myMap.cursors.push('arrow');
+		$('#map').css('cursor', 'arrow');
 		setStatus(statusReady)
 	}
 
@@ -375,12 +362,16 @@ function addPoint()
 				text = id ? 'Точка успешно отредактирована!' : 'Точка успешно добавлена!';
 				if ( id )
 				{
-					myMap.geoObjects.remove(points[id]);
+					myMap.removeLayer(points[id]);
 				}
 
-                balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: text}, {closeButton: false});
+				balloon = L.popup()
+					.setLatLng([$('#addPointLat').val(), $('#addPointLng').val()])
+					.setContent(text)
+					.openOn(myMap);
                 setTimeout(function() {
-                    balloon.close();
+                    balloon._close();
+					delete balloon;
                 }, 2000);
 
                 obj = {};
@@ -389,9 +380,10 @@ function addPoint()
                 obj.lat = $('#addPointLat').val();
                 obj.lng = $('#addPointLng').val();
                 obj.categoryIcon = categories[$('#addPointCategoryId').val()].icon;
+				obj.categoryId = $('#addPointCategoryId').val();
 
                 setTimeout(function() {
-                    myMap.geoObjects.add(constructPoint(obj));
+                    constructPoint(obj).addTo(myMap);
                 }, 2000);
 
                 $('#addPointModal').modal('hide');
@@ -402,7 +394,7 @@ function addPoint()
                 $('.form-group').removeClass('has-error');
                 $('#addPointButton').removeClass('btn-success').addClass('btn-default');
 				$('#addPointId').remove();
-                myMap.cursors.push('arrow');
+                $('#map').css('cursor', 'arrow');
                 setStatus(statusReady);
 
                 return true;
@@ -563,8 +555,9 @@ function deleteRoute(id)
  */
 function addToRoute(id)
 {
-	$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove()">&times;</span> ' + points[id].properties.get('hintContent') + '</div>');
+	console.log(points[id]);
-	myMap.balloon.close();
+	$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove()">&times;</span> ' + points[id].options.title + '</div>');
+	myMap._popup._close();
 	$('#routeWindow').show(200);
 	return true;
 }
@@ -600,7 +593,7 @@ function editPoint(id)
 	$('#addPointLat').val(pointsSources[id].lat);
 	$('#addPointLng').val(pointsSources[id].lng);
 
-	myMap.balloon.close();
+	myMap._popup._close();
 	$('#addPointModal').modal('show');
 	setStatus(statusEdit);
 }
@@ -608,6 +601,6 @@ function editPoint(id)
 function editSetNewCoords()
 {
 	$('#addPointModal').modal('hide');
-	myMap.cursors.push('crosshair');
+	$('#map').css('cursor', 'crosshair');
 	setStatus(statusReHunting)
 }