Index: /gs3-extensions/map-editor/DrawingManager/checkpt28/historyManager.js
===================================================================
--- /gs3-extensions/map-editor/DrawingManager/checkpt28/historyManager.js	(revision 32724)
+++ /gs3-extensions/map-editor/DrawingManager/checkpt28/historyManager.js	(revision 32724)
@@ -0,0 +1,288 @@
+var prevOverlays = [];
+var presentOverlays = [];
+var undoneOverlays = [];
+var enableSelectionFeature = false;
+
+function undo() {
+	
+	for (var i = 0; i < overlays.length; i++) {
+		overlays[i].setMap(null);
+
+	}
+	if (prevOverlays.length != 0) {
+		selectedShapes = [];
+		overlays = [];
+		undoneOverlaysPush();
+		var prev_overlay = prevOverlays.pop();
+		
+		if(prev_overlay.length > 0) {
+			for (var i = 0; i < prev_overlay.length; i++) {
+			overlays[i] = prev_overlay[i];
+			overlays[i].setMap(map);
+			}
+		}
+		
+
+	}
+
+	//Deactivated at the moment
+	if (enableSelectionFeature) {
+		selectedShapes = [];
+		var i = 0;
+		var lastEntry = prevOverlays[prevOverlays.length - 1][i];
+		console.log(prevOverlays[prevOverlays.length - 1].length);
+
+		for (var i = 0; i < lastEntry.length; i++) {
+			selectedShapes.push(prevOverlays)
+			console.log("comes here");
+		}
+
+	}
+}
+
+function redo() {
+	
+	if (undoneOverlays.length != 0) {
+		selectedShapes = [];
+		for (var i = 0; i < overlays.length; i++) {
+			overlays[i].setMap(null);
+		}
+		overlays = [];
+		var lastEntry = undoneOverlays[undoneOverlays.length - 1];
+		for (var i = 0; i < lastEntry.length; i++) {
+			overlays[i] = lastEntry[i];
+			overlays[i].setMap(map);
+		}
+		var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined ;
+		
+		if (conditionPrevious){
+			prevOverlays.push(presentOverlays[0]);
+		}
+		
+		presentOverlays = [];
+		//console.log("last undone", undoneOverlays[undoneOverlays.length -1]);
+		presentOverlays.push(undoneOverlays[undoneOverlays.length - 1]);
+		undoneOverlays.pop();
+
+	}
+
+}
+
+function clonePath(path) {
+	var clone_path = [];
+
+	for (var i = 0; i < path.length; i++) {
+		var lati = path.getAt(i).lat();
+		var lngi = path.getAt(i).lng();
+		clone_lat_lng = {
+			lat: lati,
+			lng: lngi
+		};
+		clone_path.push(clone_lat_lng);
+	}
+
+	return clone_path;
+}
+
+function clonePolyline(polyline) {
+	var path = polyline.getPath();
+	var geodesic = polyline.geodesic;
+	var strokeColor = polyline.strokeColor;
+	var strokeOpacity = polyline.strokeOpacity;
+	var strokeWeight = polyline.strokeWeight;
+	var clone_path = clonePath(path);
+	//var editable      = rect.editable;
+
+	var clone_polyline = new google.maps.Polyline({
+			geodesic: geodesic,
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			path: clone_path,
+			draggable: true,
+			editable: false
+		});
+
+	clone_polyline.type = google.maps.drawing.OverlayType.POLYLINE;
+
+	return clone_polyline;
+}
+
+function clonePolygon(polygon) {
+	var path = polygon.getPath();
+	var geodesic = polygon.geodesic;
+	var strokeColor = polygon.strokeColor;
+	var strokeOpacity = polygon.strokeOpacity;
+	var strokeWeight = polygon.strokeWeight;
+	var fillColor = polygon.fillColor;
+	var fillOpacity = polygon.fillOpacity;
+	var clone_path = clonePath(path);
+	//var editable      = rect.editable;
+
+	var clone_polygon = new google.maps.Polygon({
+			geodesic: geodesic,
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			path: clone_path,
+			draggable: true,
+			editable: false
+		});
+
+	clone_polygon.type = google.maps.drawing.OverlayType.POLYGON;
+
+	return clone_polygon;
+}
+
+function cloneRectangle(rect) {
+	var strokeColor = rect.strokeColor;
+	var strokeOpacity = rect.strokeOpacity;
+	var strokeWeight = rect.strokeWeight;
+	var fillColor = rect.fillColor;
+	var fillOpacity = rect.fillOpacity;
+	var bounds = rect.getBounds();
+	//var editable      = rect.editable;
+
+	var clone_rect = new google.maps.Rectangle({
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			bounds: bounds,
+			draggable: true,
+			editable: false
+		});
+
+	clone_rect.type = google.maps.drawing.OverlayType.RECTANGLE;
+
+	return clone_rect;
+}
+
+function cloneCircle(circ) {
+	var strokeColor = circ.strokeColor;
+	var strokeOpacity = circ.strokeOpacity;
+	var strokeWeight = circ.strokeWeight;
+	var fillColor = circ.fillColor;
+	var fillOpacity = circ.fillOpacity;
+	var center = circ.center;
+	var radius = circ.radius;
+	//var editable      = rect.editable;
+
+	var clone_circ = new google.maps.Circle({
+			strokeColor: strokeColor,
+			strokeOpacity: strokeOpacity,
+			strokeWeight: strokeWeight,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			center: center,
+			radius: radius,
+			draggable: true,
+			editable: false
+		});
+
+	clone_circ.type = google.maps.drawing.OverlayType.CIRCLE;
+
+	return clone_circ;
+}
+
+function cloneMarker(marker) {
+	var position = marker.getPosition();
+	var anchorPoint = marker.anchorPoint;
+	var clone_marker  = new google.maps.Marker({
+		anchorPoint: anchorPoint,
+		position : position,
+		clickable: true,
+		draggable: true,
+		editable: false	
+	})
+	clone_marker.type = google.maps.drawing.OverlayType.MARKER;
+	
+	return clone_marker;
+}
+
+function cloneShape(shape) {
+	if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
+		var clone_polyline = clonePolyline(shape);
+		return clone_polyline;
+	} else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
+		var clone_polygon = clonePolygon(shape);
+		return clone_polygon;
+	} else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
+		var clone_rect = cloneRectangle(shape);
+		return clone_rect;
+
+	} else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
+		var clone_circ = cloneCircle(shape);
+		return clone_circ;
+
+	} else {
+		var clone_marker = cloneMarker(shape);
+		return clone_marker;
+	}
+	console.log(cloneShape);
+}
+
+function overlayItemIsShape(overlay_item) {
+	var type = overlay_item.type;
+
+	is_shape = (type === google.maps.drawing.OverlayType.POLYLINE)
+	 || (type === google.maps.drawing.OverlayType.POLYGON)
+	 || (type === google.maps.drawing.OverlayType.RECTANGLE)
+	 || (type === google.maps.drawing.OverlayType.CIRCLE);
+
+	return is_shape;
+}
+
+function historyOverlayPush() {
+	undoneOverlays = [];
+	var overlays_copy = [];
+	for (var i = 0; i < overlays.length; i++) {
+		
+		var clone_shape = cloneShape(overlays[i]);
+		if (overlayItemIsShape(clone_shape)) {
+			addShapeListeners(clone_shape, null); // don't have an overlay event!
+		} else {
+			addMarkerListeners(clone_shape, null); // don't have an overlay event!
+		}
+		overlays_copy[i] = clone_shape;
+	}
+
+	prevOverlays.push(overlays_copy);
+
+}
+
+function presentOverlayPush() {
+	if (resizeEntry) {
+		prevOverlays.push(presentOverlays[0]);
+	}
+	presentOverlays = [];
+	var overlays_copy = [];
+	for (var i = 0; i < overlays.length; i++) {
+		var clone_shape = cloneShape(overlays[i]);
+		if (overlayItemIsShape(clone_shape)) {
+			addShapeListeners(clone_shape, null); // don't have an overlay event!
+		} else {
+			addMarkerListeners(clone_shape, null); // don't have an overlay event!
+		}
+		overlays_copy[i] = clone_shape;
+	}
+	presentOverlays.push(overlays_copy);
+}
+
+function undoneOverlaysPush() {
+	var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined;
+
+	if (conditionUndone) {
+		undoneOverlays.push(presentOverlays[0]);
+	}
+	presentOverlays = [];
+	var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined;
+
+	if (conditionPresent) {
+		presentOverlays.push(prevOverlays[prevOverlays.length - 1]);
+
+	}
+}
Index: /gs3-extensions/map-editor/DrawingManager/checkpt28/index.css
===================================================================
--- /gs3-extensions/map-editor/DrawingManager/checkpt28/index.css	(revision 32724)
+++ /gs3-extensions/map-editor/DrawingManager/checkpt28/index.css	(revision 32724)
@@ -0,0 +1,70 @@
+/* Always set the map height explicitly to define the size of the div
+* element that contains the map. */
+#map {
+	height: 83%;
+	width: 90;
+	float: bottom;
+	clear: both;
+}
+
+  /* Optional: Makes the sample page fill the window. */
+  html, body {
+	height: 100%;
+	width: 99%;
+	margin: 0;
+	padding: 0;
+
+  }
+  
+  #DeleteButtons{
+  display: inline-block;
+  float: left;
+  padding-left: 10px;
+  padding-top: 5px;
+  width: 100%
+
+  }
+  
+  #LineThickness{
+  display: inline-block;
+  float: left;
+  padding-left: 10px;
+  padding-top: 5px;
+
+  }
+  
+  #ColourOpacity{
+  display: inline-block;
+  float: left;
+  padding-left: 10px;
+  padding-top: 5px;
+
+  }
+  
+  #buttons3{
+  display: inline-block;
+  float: left;
+  padding-left: 10px;
+  padding-top: 5px;
+
+  }	  
+  
+  #FillColour {
+  display: inline-block;
+  float: left;
+  padding-left: 10px;
+  padding-top: 5px;
+  }
+  
+  #color-palette1 {
+  clear: both;
+  }
+  
+  .color-buttons1 {
+  width: 14px;
+  height: 14px;
+  font-size: 0;
+  margin: 2px;
+  float: left;
+  cursor: pointer;
+  }
Index: /gs3-extensions/map-editor/DrawingManager/checkpt28/index.html
===================================================================
--- /gs3-extensions/map-editor/DrawingManager/checkpt28/index.html	(revision 32724)
+++ /gs3-extensions/map-editor/DrawingManager/checkpt28/index.html	(revision 32724)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+	<title>Drawing Tools</title>
+	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+
+	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script src="historyManager.js"></script>	
+	<script src="index.js"></script>	
+	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script>
+	
+    <link rel="stylesheet" type="text/css" href="index.css">
+
+  </head>
+  <body>
+	<div id = "DeleteButtons">
+	<button onclick="deleteAllShape()" accesskey="c">Clear All</button>
+	<button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button>
+	<button onclick="undo()" accesskey="n">Undo</button>
+	<button onclick="redo()" accesskey="n">Redo</button>
+	
+	</div>
+	
+	<div id = "LineThickness">
+	<p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange"> </p>
+	<p>Value: <span id="thicknessRangeVal"></span></p>
+	</div>	
+	
+	<div id = "ColourOpacity">
+	<p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity"> </p>
+	<p>Value: <span id="opacityRangeVal"></span></p>
+	</div>
+	
+
+
+	<div id="FillColour">
+     <p> Fill Colour:</p> <div id="color-palette1"></div> 
+	</div>
+
+	
+	
+	<div id="map"></div>
+	
+
+  </body>
+</html>
Index: /gs3-extensions/map-editor/DrawingManager/checkpt28/index.js
===================================================================
--- /gs3-extensions/map-editor/DrawingManager/checkpt28/index.js	(revision 32724)
+++ /gs3-extensions/map-editor/DrawingManager/checkpt28/index.js	(revision 32724)
@@ -0,0 +1,504 @@
+var debug = false;
+var shiftKeyPressed = false;
+var beingDragged = false;
+var resizeEntry = false;
+var allowDeselect = false;
+var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
+var selectedColor;
+var colorButtons = {};
+var thicknessValue = 1;
+var opacityValue = 0.4;
+var overlays = [];
+var drawingManager;
+var selectedShape;
+var selectedShapes = [];
+var map = null;
+var faj, fal, maj, mal;
+var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false};
+
+
+$(document).ready(function() {
+	//Update thickness
+	var thicknessSlider = document.getElementById("thicknessRange");
+	var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
+	thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
+
+	thicknessSlider.oninput = function () {
+		thicknessSliderOutput.innerHTML = this.value / 20;
+		thicknessValue = this.value / 20;
+		polyOptions.strokeWeight = thicknessValue;
+		setSelectedThickness(thicknessValue);
+	}
+	//Update opacity
+	var opacitySlider = document.getElementById("colourOpacity");
+	var opacitySliderOutput = document.getElementById("opacityRangeVal");
+	opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
+
+	opacitySlider.oninput = function () {
+		opacityValue = this.value / 100;
+		polyOptions.fillOpacity = opacityValue;
+		opacitySliderOutput = opacityValue;
+		opacityRangeVal.innerHTML = "% " + Math.round(opacitySliderOutput * 100);
+		setSelectedOpacity(opacityValue);
+	}
+	
+	document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChangeMD);
+	document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChangeMD);
+	document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChangeMD);
+	
+	document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU);
+	document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU);
+});
+
+function shapeSpecsChangeMD() {
+	if (selectedShapes.length > 0) {
+		historyOverlayPush();
+	}
+}
+
+function shapeSpecsChangeMU() {
+	if (selectedShapes.length > 0) {
+		presentOverlayPush();
+	}		
+}
+
+function makeColorButton(color) {
+	var button = document.createElement('span');
+	button.className = 'color-buttons1';
+	button.style.backgroundColor = color;
+	google.maps.event.addDomListener(button, 'click', function () {
+		selectColor(color);
+		setSelectedShapeColor(color);
+		shapeSpecsChangeMU();
+	});
+	return button;
+}
+function buildColorPalette() {
+	var colorPalette = document.getElementById('color-palette1');
+	for (var i = 0; i < colors.length; ++i) {
+		var currColor = colors[i];
+		var colorButton = makeColorButton(currColor);
+		colorPalette.appendChild(colorButton);
+		colorButtons[currColor] = colorButton;
+	}
+	selectColor(colors[0]);
+};
+function selectColor(color) {
+	selectedColor = color;
+	for (var i = 0; i < colors.length; ++i) {
+		var currColor = colors[i];
+		colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
+	}
+
+	// Retrieves the current options from the drawing manager and replaces the
+	// stroke or fill color as appropriate.
+	var polylineOptions = drawingManager.get('polylineOptions');
+	polylineOptions.strokeColor = color;
+	drawingManager.set('polylineOptions', polylineOptions);
+
+	var rectangleOptions = drawingManager.get('rectangleOptions');
+	rectangleOptions.fillColor = color;
+	drawingManager.set('rectangleOptions', rectangleOptions);
+
+	var circleOptions = drawingManager.get('circleOptions');
+	circleOptions.fillColor = color;
+	drawingManager.set('circleOptions', circleOptions);
+
+	var polygonOptions = drawingManager.get('polygonOptions');
+	polygonOptions.fillColor = color;
+	drawingManager.set('polygonOptions', polygonOptions);
+}
+
+function initMap() {
+
+	map = new google.maps.Map(document.getElementById('map'), {
+			center: {lat: -34.397, lng: 150.644
+			},
+			zoom: 8,
+		});
+
+	drawingManager = new google.maps.drawing.DrawingManager({
+			drawingMode: google.maps.drawing.OverlayType.MARKER,
+			drawingControl: true,
+			drawingControlOptions: {
+				position: google.maps.ControlPosition.TOP_CENTER,
+				drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
+			},
+			markerOptions: {
+				draggable: true
+			},
+			circleOptions: polyOptions,
+			polylineOptions: polyOptions,
+			polygonOptions: polyOptions,
+			rectangleOptions: polyOptions,
+		});
+
+	drawingManager.setMap(map);
+
+	//overlays.push(event.overlay); // store reference to added overlay
+	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
+		
+		historyOverlayPush();
+				
+		overlays.push(e.overlay); // store reference to added overlay
+		var newShape = e.overlay;
+		newShape.type = e.type;
+
+		presentOverlayPush();
+		
+		if (e.type !== google.maps.drawing.OverlayType.MARKER) {
+			addShapeListeners(newShape,e);
+			setSelection(newShape, e);
+		} else {
+			
+			addMarkerListeners(newShape,e);
+			setSelection(newShape, e);
+		}
+	});
+
+	//Clears selection if clicked on the map when shift is not presseed
+	google.maps.event.addListener(map, 'click', function () {
+		if (shiftKeyPressed == false) {
+			clearSelection();
+			selectedShape = null;
+			}
+	});	
+
+	//Keyboard shortcuts
+	document.addEventListener('keydown', function () {
+		if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft'  && (event.ctrlKey || event.metaKey) )){
+				redo();
+
+		}
+		if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)){
+			if(shiftKeyPressed == false) {
+				undo();
+			}
+		}
+		if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)){
+			event.preventDefault(); 
+			selectAll();
+			drawingManager.setDrawingMode(null);
+		}
+		if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)){
+			event.preventDefault(); 
+			deselectAll();
+		}
+		if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
+			//clearSelection();
+			drawingManager.setDrawingMode(null);
+		} else if (event.code == 'Digit1') {
+			drawingManager.setDrawingMode('marker');
+		} else if (event.code == 'Digit2') {
+			drawingManager.setDrawingMode('circle');
+		} else if (event.code == 'Digit3') {
+			drawingManager.setDrawingMode('polygon');
+		} else if (event.code == 'Digit4') {
+			drawingManager.setDrawingMode('polyline');
+		} else if (event.code == 'Digit5') {
+			drawingManager.setDrawingMode('rectangle');
+		} else if (event.code == 'KeyQ') {
+			printHistory();
+		}
+//							console.log(event.code);
+	});
+
+	//Sets shift as pressed
+	document.addEventListener('keydown', function () {
+		if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+			shiftKeyPressed = true;
+
+		}
+
+	});
+
+	//Sets shift as unpressed
+	document.addEventListener('keyup', function () {
+		if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
+			shiftKeyPressed = false;
+		}
+
+	});
+
+	buildColorPalette();
+}
+
+	//Deletes a vertex if clicked on it
+	function vertexAndPolyDel(e, newShape) {
+		var vertex = e.vertex;
+		//console.log(e)
+		if (e.vertex !== undefined) {
+			historyOverlayPush();
+			if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
+				var path = newShape.getPaths().getAt(e.path);
+				path.removeAt(e.vertex);
+				if (path.length < 3) {
+					newShape.setMap(null);
+				}
+			}
+			if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
+				var path = newShape.getPath();
+				path.removeAt(e.vertex);
+				if (path.length < 2) {
+					newShape.setMap(null);
+				}
+			}
+			presentOverlayPush();
+		}
+	}
+	
+function addMarkerListeners(newShape,e)
+{
+	//cLICK EVENT IF A MARKER IS CREATED
+	google.maps.event.addListener(newShape, 'click', function (e) {
+		setSelection(newShape, e);
+	});
+	
+	google.maps.event.addListener(newShape, 'dragstart', function (e) {
+		
+		
+		
+		beingDragged = true;
+		historyOverlayPush();
+
+	});	
+
+	google.maps.event.addListener(newShape, 'dragend', function () {
+		beingDragged = false;
+		presentOverlayPush();
+		allowDeselect = false;
+	});	
+}
+function addShapeListeners(newShape,e)
+{
+	// Add an event listener that selects the newly-drawn shape when the user
+	// mouses down on it.
+	google.maps.event.addListener(newShape, 'click', function (e) {
+		vertexAndPolyDel(e, newShape);
+	});
+
+	
+	google.maps.event.addListener(newShape, 'drag', function (e) {
+		
+		
+
+		//for(var i = 0; i < selectedShapes.length; i++) {
+		//	if(newShape.type = 'rectangle') {
+		//		var newBounds = {
+		//			east: selectedShapes[i].getBounds().ea.l + (selectedShapes[i].getBounds().ea.l - faj),
+		//			north: selectedShapes[i].getBounds().la.l + (selectedShapes[i].getBounds().la.l - fal),
+		//			south: selectedShapes[i].getBounds().la.j + (selectedShapes[i].getBounds().la.j - maj),
+		//			west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal)
+		//		}
+		//		selectedShapes[i].set
+		//	} else {
+			
+		//	}
+		//	
+		//}
+	
+
+	});
+	
+	
+	google.maps.event.addListener(newShape, 'dragstart', function (e) {
+		
+		//console.log(newShape.bounds);
+		beingDragged = true;
+		historyOverlayPush();
+
+	});
+	
+	google.maps.event.addListener(newShape, 'dragend', function () {
+		beingDragged = false;
+		presentOverlayPush();
+		allowDeselect = false;
+	});
+	
+	//Store information after the event ends
+	google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
+		if (beingDragged == false){
+			resizeEntry = true;
+			presentOverlayPush();
+			resizeEntry = false;
+		}
+	});
+
+	//Add an event listener to select a shape if the mouse hovers over it
+	google.maps.event.addListener(newShape, 'mousedown', function (e) {
+		if (e.vertex !== undefined || e.edge !== undefined) {
+			historyOverlayPush()
+		}	
+		if (drawingManager.drawingMode == null) {
+			setSelection(newShape, e);
+		}
+	});
+
+	google.maps.event.addListener(newShape, 'mouseup', function (e) {
+		if (e.vertex !== undefined || e.edge !== undefined) {
+			presentOverlayPush()
+		} 
+		else{		
+			removeFromSelectedShapes(newShape);		
+		}
+	});	
+}
+function clearSelection() {
+		if (selectedShape) {
+			if (selectedShape.type !== 'marker') {
+				selectedShape.setEditable(false);
+				if (shiftKeyPressed == false) {
+					for (var i = 0; i < selectedShapes.length; i++) {
+						selectedShapes[i].setEditable(false);
+					}
+					selectedShapes = [];
+				}
+			}
+			selectedShape = null;
+		}
+	}
+	
+//Set selection for the selected overlay
+	function setSelection(shape, e) {	
+		if (shape.type !== 'marker') {
+			if (shiftKeyPressed == false) {
+				if (e.vertex == undefined) {
+					if(e.edge == undefined) {					
+						clearSelection();
+						shape.setEditable(true);
+					}
+				}
+			}
+			if (selectedShapes.includes(shape)) {
+				if(e.vertex == undefined ) {
+					if(e.edge == undefined) {
+						//removeFromSelectedShapes(shape);
+					}
+				}
+			} else {
+				shape.setEditable(true);
+				selectedShapes.push(shape);
+			}
+
+
+			//Send the values to be updated
+			var thi = shape.strokeWeight;
+			var opa = shape.fillOpacity;
+			var fCol = shape.fillColor;
+			var sCol = shape.strokeColor;
+			updateMenuValues(thi, opa, fCol, sCol);
+
+		} else if (shape.type == 'marker') {
+			clearSelection();
+		}
+		selectedShape = shape;
+	}
+	
+
+function removeFromSelectedShapes(shape) {
+	if (selectedShapes.includes(shape)) {
+		if(allowDeselect) {
+			const index = selectedShapes.indexOf(shape);
+			selectedShapes.splice(index, 1);
+			shape.setEditable(false);
+		}
+		allowDeselect = false;
+	}
+	
+	
+}
+	
+//Set selected thickness
+function setSelectedThickness(sWeight) {
+	if (selectedShapes.length > 0) {
+		//historyOverlayPush();
+		for (var i = 0; i < selectedShapes.length; i++) {
+			selectedShapes[i].set('strokeWeight', sWeight);
+			//console.log(selectedShapes.length);
+		}
+	}
+}
+
+//Set selected opacity
+function setSelectedOpacity(fOpacity) {
+
+	if (selectedShapes.length > 0) {
+		for (var i = 0; i < selectedShapes.length; i++) {
+			selectedShapes[i].set('fillOpacity', fOpacity);
+		}
+	}
+}
+
+//set selected fill colour
+function setSelectedShapeColor(color) {
+	if (selectedShapes.length >	0) {
+		for (var i = 0; i < selectedShapes.length; i++) {
+			selectedShapes[i].set('fillColor', color);
+			selectedShapes[i].set('strokeColor', color);
+		}
+	}
+}
+
+function updateMenuValues(thi, opa, fCol, sCol) {
+	//Update thickness slider and value on the settings menu
+	var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
+	thicknessSliderOutput.innerHTML = thi;
+	document.getElementById("thicknessRange").value = thi * 20;
+
+	//Update the opacity slider and value on the settings menu
+	var opacitySliderOutput = document.getElementById("opacityRangeVal");
+	opacitySliderOutput.innerHTML = "% " + opa * 100;
+	document.getElementById("colourOpacity").value = opa * 100;
+
+	if (drawingManager.drawingMode == null) {
+		selectColor(fCol);
+	}
+}
+function selectAll(){
+	shiftKeyPressed = true;
+	var e = new Object();
+	e.vertex = undefined;
+	selectedShapes = [];
+	for(var i = 0; i< overlays.length; i++) {
+		setSelection(overlays[i], e);
+	}
+	shiftKeyPressed = false;
+}
+
+function deselectAll(){	
+	for(var i = 0; i < selectedShapes.length; i++) {
+		selectedShapes[i].setEditable(false);
+	}
+	selectedShapes = [];
+}
+
+function printHistory() {
+	console.log("prev", prevOverlays);
+	console.log("present ", presentOverlays);
+	console.log("undone ", undoneOverlays);
+}
+
+function deleteSelectedShape() {
+	historyOverlayPush();
+	for (var i = 0; i < selectedShapes.length; i++) {
+		selectedShapes[i].setMap(null);
+		
+		if (overlays.includes(selectedShapes[i])) {
+			const index = overlays.indexOf(selectedShapes[i]);
+			overlays.splice(index, 1);
+			selectedShapes[i].setEditable(false);
+		}	
+	}
+	selectedShapes = [];
+	presentOverlayPush();
+}
+
+function deleteAllShape() {
+	historyOverlayPush();
+	for (var i = 0; i < overlays.length; i++) {
+		overlays[i].setMap(null);
+	}
+	overlays = [];
+	presentOverlayPush();
+}
+
Index: /gs3-extensions/map-editor/DrawingManager/historyManager.js
===================================================================
--- /gs3-extensions/map-editor/DrawingManager/historyManager.js	(revision 32723)
+++ /gs3-extensions/map-editor/DrawingManager/historyManager.js	(revision 32724)
@@ -27,16 +27,16 @@
 
 	//Deactivated at the moment
-	if (enableSelectionFeature) {
-		selectedShapes = [];
-		var i = 0;
-		var lastEntry = prevOverlays[prevOverlays.length - 1][i];
-		console.log(prevOverlays[prevOverlays.length - 1].length);
-
-		for (var i = 0; i < lastEntry.length; i++) {
-			selectedShapes.push(prevOverlays)
-			console.log("comes here");
-		}
-
-	}
+	//if (enableSelectionFeature) {
+	//	selectedShapes = [];
+	//	var i = 0;
+	//	var lastEntry = prevOverlays[prevOverlays.length - 1][i];
+	//	console.log(prevOverlays[prevOverlays.length - 1].length);
+    //
+	//	for (var i = 0; i < lastEntry.length; i++) {
+	//		selectedShapes.push(prevOverlays)
+	//		console.log("comes here");
+	//	}
+    //
+	//}
 }
 
@@ -144,4 +144,5 @@
 	var fillOpacity = rect.fillOpacity;
 	var bounds = rect.getBounds();
+	var type = rect.type;
 	//var editable      = rect.editable;
 
@@ -154,5 +155,6 @@
 			bounds: bounds,
 			draggable: true,
-			editable: false
+			editable: false,
+			type: type
 		});
 
@@ -238,25 +240,43 @@
 
 function historyOverlayPush() {
+	if(undoneOverlays.length > 0) {	
+		for(var i = 0; i < undoneOverlays.length; i++) {
+			
+			entryType.pop();
+		}		
+	}
 	undoneOverlays = [];
-	var overlays_copy = [];
-	for (var i = 0; i < overlays.length; i++) {
-		
-		var clone_shape = cloneShape(overlays[i]);
-		if (overlayItemIsShape(clone_shape)) {
-			addShapeListeners(clone_shape, null); // don't have an overlay event!
-		} else {
-			addMarkerListeners(clone_shape, null); // don't have an overlay event!
-		}
-		overlays_copy[i] = clone_shape;
-	}
-
-	prevOverlays.push(overlays_copy);
-
+	//if(resizeEntry){
+			//prevOverlays.push(presentOverlays[0]);
+			
+	//} else {
+		var overlays_copy = [];
+		for (var i = 0; i < overlays.length; i++) {
+			var clone_shape = cloneShape(overlays[i]);
+			if(resizeEntry) {
+				//console.log("hey lol");
+				clone_shape = cloneShape(presentOverlays[0][i]);
+			}
+			if (overlayItemIsShape(clone_shape)) {
+				addShapeListeners(clone_shape, null); // don't have an overlay event!
+			} else {
+				addMarkerListeners(clone_shape, null); // don't have an overlay event!
+			}
+			overlays_copy[i] = clone_shape;
+		}
+		prevOverlays.push(overlays_copy);		
+	//}
 }
 
 function presentOverlayPush() {
-	if (resizeEntry) {
-		prevOverlays.push(presentOverlays[0]);
-	}
+	
+	//clean the entry type array
+
+	if(resizeEntry) {
+		entryType.push("resize");
+	} else {
+		entryType.push("not resize");
+	}
+	
 	presentOverlays = [];
 	var overlays_copy = [];
@@ -274,4 +294,5 @@
 
 function undoneOverlaysPush() {
+	
 	var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined;
 
@@ -284,5 +305,4 @@
 	if (conditionPresent) {
 		presentOverlays.push(prevOverlays[prevOverlays.length - 1]);
-
-	}
-}
+	}
+}
Index: /gs3-extensions/map-editor/DrawingManager/index.js
===================================================================
--- /gs3-extensions/map-editor/DrawingManager/index.js	(revision 32723)
+++ /gs3-extensions/map-editor/DrawingManager/index.js	(revision 32724)
@@ -10,4 +10,5 @@
 var opacityValue = 0.4;
 var overlays = [];
+var entryType = [];
 var drawingManager;
 var selectedShape;
@@ -42,5 +43,5 @@
 		setSelectedOpacity(opacityValue);
 	}
-	
+
 	document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChangeMD);
 	document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChangeMD);
@@ -51,4 +52,9 @@
 });
 
+document.addEventListener("mousedown", function(){
+	
+  //console.log(document.body.style.cursor);
+ // console.log(document.getElementById("map").style.cursor);
+});
 function shapeSpecsChangeMD() {
 	if (selectedShapes.length > 0) {
@@ -115,9 +121,9 @@
 			center: {lat: -34.397, lng: 150.644
 			},
-			zoom: 8,
+			zoom: 2,
 		});
 
 	drawingManager = new google.maps.drawing.DrawingManager({
-			drawingMode: google.maps.drawing.OverlayType.MARKER,
+			drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
 			drawingControl: true,
 			drawingControlOptions: {
@@ -138,4 +144,5 @@
 	//overlays.push(event.overlay); // store reference to added overlay
 	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
+		console.log(e);
 		
 		historyOverlayPush();
@@ -257,4 +264,6 @@
 	google.maps.event.addListener(newShape, 'dragstart', function (e) {
 		
+		
+		
 		beingDragged = true;
 		historyOverlayPush();
@@ -278,4 +287,6 @@
 	
 	google.maps.event.addListener(newShape, 'drag', function (e) {
+		
+		
 
 		//for(var i = 0; i < selectedShapes.length; i++) {
@@ -287,7 +298,7 @@
 		//			west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal)
 		//		}
-		//		selectedShapes[i].set
+		//		selectedShapes[i].setBounds
 		//	} else {
-			
+		//
 		//	}
 		//	
@@ -299,4 +310,12 @@
 	
 	google.maps.event.addListener(newShape, 'dragstart', function (e) {
+		
+		//faj = newShape.bounds.fa.j;
+		//fal = newShape.bounds.fa.l;
+		//maj = newShape.bounds.ma.j;
+		//mal = newShape.bounds.ma.l;
+		
+		//console.log(faj, fal, maj, mal);
+	
 		
 		beingDragged = true;
@@ -315,11 +334,14 @@
 		if (beingDragged == false){
 			resizeEntry = true;
+			historyOverlayPush();
 			presentOverlayPush();
 			resizeEntry = false;
 		}
+		
 	});
 
 	//Add an event listener to select a shape if the mouse hovers over it
 	google.maps.event.addListener(newShape, 'mousedown', function (e) {
+		//console.log(e);
 		if (e.vertex !== undefined || e.edge !== undefined) {
 			historyOverlayPush()
@@ -355,39 +377,43 @@
 	
 //Set selection for the selected overlay
-	function setSelection(shape, e) {	
-		if (shape.type !== 'marker') {
-			if (shiftKeyPressed == false) {
-				if (e.vertex == undefined) {
-					if(e.edge == undefined) {					
-						clearSelection();
-						shape.setEditable(true);
-					}
+function setSelection(shape, e) {	
+	if (shape.type !== 'marker') {
+		if (shiftKeyPressed == false) {
+			if (e.vertex == undefined) {
+				if(e.edge == undefined) {					
+					clearSelection();
+					shape.setEditable(true);
 				}
 			}
-			if (selectedShapes.includes(shape)) {
-				if(e.vertex == undefined ) {
-					if(e.edge == undefined) {
-						//removeFromSelectedShapes(shape);
-					}
+		}
+		if (selectedShapes.includes(shape)) {
+			if(e.vertex == undefined ) {
+				if(e.edge == undefined) {
+					//removeFromSelectedShapes(shape);
 				}
-			} else {
-				shape.setEditable(true);
-				selectedShapes.push(shape);
-			}
-
-
-			//Send the values to be updated
-			var thi = shape.strokeWeight;
-			var opa = shape.fillOpacity;
-			var fCol = shape.fillColor;
-			var sCol = shape.strokeColor;
-			updateMenuValues(thi, opa, fCol, sCol);
-
-		} else if (shape.type == 'marker') {
-			clearSelection();
-		}
-		selectedShape = shape;
-	}
-	
+			}
+		} else {
+			shape.setEditable(true);
+			selectedShapes.push(shape);
+		}
+
+
+		//Send the values to be updated
+		var thi = shape.strokeWeight;
+		var opa = shape.fillOpacity;
+		var fCol = shape.fillColor;
+		var sCol = shape.strokeColor;
+		updateMenuValues(thi, opa, fCol, sCol);
+
+	} else if (shape.type == 'marker') {
+		clearSelection();
+	}
+	selectedShape = shape;
+}
+
+function boundsExtraction() {
+	
+	
+}
 
 function removeFromSelectedShapes(shape) {
@@ -399,7 +425,5 @@
 		}
 		allowDeselect = false;
-	}
-	
-	
+	}	
 }
 	
@@ -468,8 +492,10 @@
 }
 
+
 function printHistory() {
 	console.log("prev", prevOverlays);
 	console.log("present ", presentOverlays);
 	console.log("undone ", undoneOverlays);
+	console.log(entryType);
 }
 
