RegionChooser Markers are now draggable.

website/polygon.js

@@ -7,11 +7,9 @@ function PolygonCreator(map) {
 	this.map = map;
 	this.pen = new Pen(this.map);
 	var thisOjb = this;
-	proj4.defs("EPSG:31467",
-			"+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0"
-					+ " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31467/proj4js/
-	this.event = google.maps.event.addListener(thisOjb.map, 'click', function(
-			event) {
+	proj4.defs("EPSG:31467", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0"
+			+ " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31467/proj4js/
+	this.event = google.maps.event.addListener(thisOjb.map, 'click', function(event) {
 		thisOjb.pen.draw(event.latLng);
 	});
 	this.destroy = function() {
@@ -30,19 +28,20 @@ function Pen(map) {
 	this.polyline = null;
 	this.polygon = null;
 	this.currentDot = null;
+	this.i = 0;
 	this.draw = function(latLng) {
 		if (null != this.polygon) {
 			alert('Click Reset to draw another');
 		} else {
-			if (this.currentDot != null && this.listOfDots.length > 1
-					&& this.currentDot == this.listOfDots[0]) {
+			if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) {
 				this.drawPolygon(this.listOfDots);
 				this.refreshInfo();
 			} else {
 				if (null != this.polyline) {
 					this.polyline.remove();
 				}
-				var dot = new Dot(latLng, this.map, this);
+				var dot = new Dot(latLng, this.i, this.map, this);
+				this.i += 1;
 				this.listOfDots.push(dot);
 				this.refreshInfo();
 				if (this.listOfDots.length > 1) {
@@ -53,7 +52,6 @@ function Pen(map) {
 	}
 	this.drawPolygon = function(listOfDots, color, des, id) {
 		this.polygon = new Polygon(listOfDots, this.map, this, color, des, id);
-		// this.deleteMis();
 	}
 	this.deleteMis = function() {
 		$.each(this.listOfDots, function(index, value) {
@@ -65,13 +63,6 @@ function Pen(map) {
 			this.polyline = null;
 		}
 	}
-	this.cancel = function() {
-		if (null != this.polygon) {
-			(this.polygon.remove());
-		}
-		this.polygon = null;
-		this.deleteMis();
-	}
 	this.setCurrentDot = function(dot) {
 		this.currentDot = dot;
 	}
@@ -103,40 +94,62 @@ function Pen(map) {
 		var n = listOfDots.length;
 		for (var i = 0; i < n; i++) {
 			var latLng = listOfDots[i].latLng;
-			var gk3_coords = proj4(fromProjection, toProjection, [
-					latLng.lng(), latLng.lat() ]);
+			var gk3_coords = proj4(fromProjection, toProjection, [ latLng.lng(), latLng.lat() ]);
 			xs.push(gk3_coords[0] - 3500000);
 			ys.push(gk3_coords[1] - 5000000);
 			data += "(" + (gk3_coords.toString() + ")<br/>");
 		}
 		if (n > 2) {
-			data += "<br/>\nArea : "
-					+ (Math.round(polygonArea(xs, ys) / 1000) / 10).toString()
-					+ " ha<br/>";
+			data += "<br/>\nArea : " + (Math.round(polygonArea(xs, ys) / 1000) / 10).toString() + " ha<br/>";
 		}
 		return data;
+	}
 
+	this.updateDot = function(marker) {
+		var old_dot = this.listOfDots[marker.zIndex];
+		old_dot.setLatLng(marker.getPosition());
+		this.polyline.remove();
+		this.polyline = new Line(this.listOfDots, this.map);
+		this.polyline
+		if (null != this.polygon) {
+			(this.polygon.remove());
+			this.polygon = null;
+			this.drawPolygon(this.listOfDots);
+		}
+		this.refreshInfo();
 	}
 }
 
-function Dot(latLng, map, pen) {
+function Dot(latLng, i, map, pen) {
 	this.latLng = latLng;
 	this.parent = pen;
 	this.markerObj = new google.maps.Marker({
 		position : this.latLng,
-		// draggable: true,
-		map : map
+		draggable : true,
+		map : map,
+		zIndex : i
 	});
 	this.addListener = function() {
 		var parent = this.parent;
 		var thisMarker = this.markerObj;
 		var thisDot = this;
 		google.maps.event.addListener(thisMarker, 'click', function() {
+			// console.log("CLICKED");
 			parent.setCurrentDot(thisDot);
 			parent.draw(thisMarker.getPosition());
 		});
 	}
 	this.addListener();
+	this.addListener = function() {
+		var parent = this.parent;
+		var thisMarker = this.markerObj;
+		var thisDot = this;
+		google.maps.event.addListener(thisMarker, 'drag', function() {
+			// console.log("DRAGGED");
+			parent.updateDot(thisMarker);
+		});
+	}
+	this.addListener();
 	this.getLatLng = function() {
 		return this.latLng;
 	}
@@ -146,6 +159,9 @@ function Dot(latLng, map, pen) {
 	this.remove = function() {
 		this.markerObj.setMap(null);
 	}
+	this.setLatLng = function(latLng) {
+		this.latLng = latLng;
+	}
 }
 
 function Line(listOfDots, map) {
@@ -207,10 +223,9 @@ function Polygon(listOfDots, map, pen, color) {
 	}
 	this.addListener = function() {
 		var thisPolygon = this.polygonObj;
-		google.maps.event.addListener(thisPolygon, 'rightclick',
-				function(event) {
-					return false;
-				});
+		google.maps.event.addListener(thisPolygon, 'rightclick', function(event) {
+			return false;
+		});
 	}
 	this.addListener();
 }