Index: gs3-extensions/map-editor/DrawingManager/index.css
===================================================================
--- gs3-extensions/map-editor/DrawingManager/index.css	(revision 32736)
+++ gs3-extensions/map-editor/DrawingManager/index.css	(revision 32776)
@@ -9,5 +9,5 @@
 
   /* Optional: Makes the sample page fill the window. */
-  html, body {
+html, body {
 	height: 100%;
 	width: 99%;
@@ -15,56 +15,84 @@
 	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;
+#ControlPanel{
+	display: inline-block;
+	border: 2px #739346 solid;
+	padding: 9px;
+	padding-top: 5px;
+	padding-bottom: 0px;
+	border-radius: 40px;
+	margin: 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;
-  }
+#ControlButtons{
+	margin: auto;
+	display: inline-block;
+	float: left;
+	padding-left: 10px;
+	padding-top: 5px;
+	
+
+}
+
+#LineThickness{
+	display: inline-block;
+	float: left;
+	margin-left: 3px;
+	margin-right: 3px;
+
+}
+
+#ColourOpacity{
+	display: inline-block;
+	float: left;
+		margin-left: 3px;
+	margin-right: 3px;
+}
+
+#buttons3{
+	display: inline-block;
+	float: left;
+	padding-left: 10px;
+
+}	  
+
+#FillColour {
+	display: inline;
+	float: left;
+	padding-left: 10px;
+
+}
+
+#color-palette1 {
+	vertical-align: middle;
+	display: inline;
+}
+
+#ThirdRow {
+	clear: left;
+}
+
+#SecondRow> div  > p{
+	margin: 5px;
+}
+
+#FillColour > p { 
+ margin-top: 5px;
+ display: flex;
+ float: left;
+}
+.color-buttons1 {
+	width: 14px;
+	height: 14px;
+	font-size: 0;
+	margin: 2px;
+	margin-top: 5px;
+	margin-left: 10px;
+	float: left;
+	display: inline;
+	cursor: pointer;
+}
Index: gs3-extensions/map-editor/DrawingManager/index.html
===================================================================
--- gs3-extensions/map-editor/DrawingManager/index.html	(revision 32736)
+++ gs3-extensions/map-editor/DrawingManager/index.html	(revision 32776)
@@ -16,11 +16,31 @@
   </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>
-	<input type="checkbox" name="draggableCB" id="draggableCB" value="false"> Lock all shapes location<br>
+	<div id = "ControlPanel">
+		<div id = "ControlButtons">
+			<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>
+			<input type="checkbox" name="draggableCB" id="draggableCB" value="false"> Lock all shapes location<br>
+		</div>
+		
+		<div id = "SecondRow">
+			<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>
+		<div id = "ThirdRow">
+			<div id="FillColour">
+				<p> Fill Colour:</p> <div id="color-palette1"></div> 
+			</div>
+		</div>
 	</div>
+	
     <div id="style-selector-control"  class="map-control">
       <select id="style-selector" class="selector-control">
@@ -35,21 +55,5 @@
         <option value="hiding">Hide features</option>
       </select>
-    </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>
 	
 	
Index: gs3-extensions/map-editor/DrawingManager/index.js
===================================================================
--- gs3-extensions/map-editor/DrawingManager/index.js	(revision 32736)
+++ gs3-extensions/map-editor/DrawingManager/index.js	(revision 32776)
@@ -103,5 +103,6 @@
 			var path = "//*[@id='map']/div/div/div[1]/div[3]/div/div[3]/div[" + branchNum + "]/div[" + j + "]/div";
 			listenersArray[counter] = getElementByXpath(path);
-			if (listenersArray[counter] !== undefined && listenersArray[counter] !== null) {
+			console.log(listenersArray[counter]);
+			if (listenersArray[counter] !== (undefined || null)) {
 				listenersArray[counter].addEventListener("mousemove", function () {
 					resizable = true;
@@ -163,4 +164,9 @@
 function buildColorPalette() {
 	var colorPalette = document.getElementById('color-palette1');
+	//var para = document.createElement("p");
+	//var node = document.createTextNode("This is new.");
+	//para.appendChild(node);
+	//colorPalette.appendChild(para);
+	
 	for (var i = 0; i < colors.length; ++i) {
 		var currColor = colors[i];
@@ -243,5 +249,7 @@
 
 	google.maps.event.addListener(drawingManager, "drawingmode_changed", function () {
-		deselectAll();
+		if(shiftKeyPressed != true && drawingManager.drawingMode !== null){
+			deselectAll();
+		}
 		settingThePath();
 
