Index: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 33041)
+++ main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js	(revision 33042)
@@ -58,11 +58,14 @@
 	
 	//Update thickness
+	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
 	var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id);
-	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
-	thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100;
+	var thicknessValue = ((thicknessSlider.value / 20) * 100) / 100;
+	thicknessSliderOutput.innerHTML = thicknessValue.toFixed(2);
+	//console.log("Init thickness slider value: " + thicknessValue);
 
 	thicknessSlider.oninput = function () {
 		that.shapeSpecsChangeMD();
-		thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100;
+		var thicknessVal = ((this.value / 20) * 100) / 100;
+		thicknessSliderOutput.innerHTML = thicknessVal.toFixed(2);
 		that.thicknessValue = this.value / 20;
 		that.shapeOptions.strokeWeight = that.thicknessValue;
@@ -73,9 +76,9 @@
 	var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id);
 	var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-	opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
+	opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) + "%";
 	
 	opacitySlider.oninput = function () {
 		that.shapeSpecsChangeMD();
-		opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;
+		opacitySliderOutput.innerHTML = Math.round(this.value * 100) / 100 + "%";
 		that.opacityValue = this.value / 100;
 		that.shapeOptions.fillOpacity = that.opacityValue;
@@ -248,4 +251,5 @@
 	this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(styleControl);
 
+	/* 
 	// Set the map's style to the initial value of the selector.
 	var styleSelector = document.getElementById('style-selector' + "-" + this.id);
@@ -263,4 +267,5 @@
 		});
 	});
+	*/
 
 	this.drawingManager = new google.maps.drawing.DrawingManager({
@@ -620,12 +625,14 @@
 
 MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) {
+	//console.log("New thickness value: " + thi);
 	//Update thickness slider and value on the settings menu
 	var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
-	thicknessSliderOutput.innerHTML = thi;
+	// update the thickness innerHTML's value to always have 2 decimal places, https://www.w3schools.com/js/js_number_methods.asp
+	thicknessSliderOutput.innerHTML = thi.toFixed(2); 
 	document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100;
 
 	//Update the opacity slider and value on the settings menu
 	var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
-	opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100;
+	opacitySliderOutput.innerHTML = Math.round(opa * 100) * 100 / 100 + "%";
 	document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;
 
Index: main/trunk/greenstone3/web/interfaces/default/style/map-editors.css
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/style/map-editors.css	(revision 33041)
+++ main/trunk/greenstone3/web/interfaces/default/style/map-editors.css	(revision 33042)
@@ -62,6 +62,6 @@
 
 #FillColour {
-	display: inline;
-	float: left;
+	/*display: inline;
+	float: left;*/
 	padding-left: 10px;
 }
Index: main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl	(revision 33041)
+++ main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl	(revision 33042)
@@ -247,11 +247,18 @@
 						<div id="SecondRow">
 							<div id="LineThickness">
-								<p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" /> </p>
-								<p>Value: <span id="thicknessRangeVal-{@nodeID}"></span></p>
+								<p>Line thickness:
+									<span id="thicknessRangeVal-{@nodeID}">1.00</span>
+									<!--<input id="thicknessRangeVal-{@nodeID}" type="number" min="1.00" max="5.00" value="1.00" />-->
+									<input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange-{@nodeID}" />
+								</p>
+								<!-- <p>Value: </p> -->
 							</div>	
 							
 							<div id="ColourOpacity">
-								<p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" /> </p>
-								<p>Value: <span id="opacityRangeVal-{@nodeID}"></span></p>
+								<p>Colour opacity: 
+									<span id="opacityRangeVal-{@nodeID}">1.0</span>
+									<input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity-{@nodeID}" />
+								</p>
+								<!-- <p>Value: </p> -->
 							</div>
 						</div>
@@ -262,4 +269,5 @@
 						</div>
 					</div>
+					<!--
 					<div id="style-selector-control-{@nodeID}"  class="map-control">
 					  <select id="style-selector-{@nodeID}" class="selector-control">
@@ -274,5 +282,6 @@
 						<option value="hiding">Hide features</option>
 					  </select>
-					</div>		
+					</div>	
+					-->
 				
 				</div>
