added size legend, static, worc in progress

Author: RobertOrthofer

images/size_legend_single.svg

@@ -66,11 +66,31 @@
 				<table id="snapshot_table"></table>  
 				<button type="button" id="delete_snapshots" class="other_button" onclick="deleteSnapshots()"> Delete Snapshots </button>
 			</div>
-			
 		</div>
 
 		<!--<button type="button"  class="polygonButton"> Select Measuring Site </button> -->
 		</div>
+		<div id="legend">
+			<div id="size_legend">	
+				<div id="size_image_div">
+					<img id="size_legend_image" src="images/size_legend_triple.svg" alt="size_legend" style="float:left;">
+				</div>	
+				<div id="size_image_text">
+					<div id="size_image_max"><p>TEST Maximum</p></div>
+					<div id="size_image_mid"><p>TEST Minimum</p></div>
+					<div id="size_image_min"><p>TEST Minimum</p></div>
+				</div>
+			</div>
+			<div id="color_legend">
+				<div id="color_image_div">
+					<img id="color_legend_image" src="images/colormap_vert.svg" alt="color_map" style="float:right;">
+				</div>
+				<div id="color_image_text">
+					<div id="color_maximum"><p>Maximum</p></div>
+					<div id="color_minimum"><p>Minimum</p></div>
+				</div>
+			</div>
+		</div>	
 	</div>
 
 

images/size_legend_triple.svg

@@ -105,6 +105,7 @@
 		width: 100%;
 		margin-left: 45px;
 		margin-right: 10 px;
+		margin-bottom: 15px;
 		overflow: auto;
 	}
 	#playbutton_div{
@@ -342,6 +343,95 @@
 		transition-duration: 0s;
 	}
 
+	#legend{
+		height: 130px;
+		position: relative;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+	
+	#size_legend{
+		position: relative;
+		float: left;
+		bottom: 0;
+		right: 0;
+		width: 30%;
+		height: 130px;
+		margin-left: 20%;
+	}
+	
+	#size_image_div {
+		position: absolute; 
+		top: 25px;
+		left: 0px;
+		float: left;
+		height: 130px;
+		width: 20px;
+	}
+	
+	#size_image_text{
+		position: relative;
+		float: left;
+		width: 100px;
+		height: 130px;
+	}
+	
+	#size_image_max{
+		position: absolute;
+		top: 0px;
+		left: 40px;
+	}
+	
+	#size_image_mid{
+		position: absolute;
+		top: 37px;
+		left: 40px;
+	}
+	
+	#size_image_min{
+		position: absolute;
+		bottom: 15px;
+		left: 40px;
+	}
+	
+	#color_legend{
+		position: relative;
+		float: right;
+		bottom: 0;
+		right: 0;
+		width: 30%;
+		height: 130px;
+		margin-right: 20%;
+	}
+	#color_image_div{
+		position: absolute;
+		top: 10px;
+		right: 0px;
+		float: right;
+		height: 130px;
+		width: 20px;
+	}
+	
+	#color_image_text{
+		position: relative;
+		float: right;
+		width: 80px;
+		height: 130px;
+	}
+	
+	#color_maximum{
+		position: absolute;
+		top: -15px;
+		right: 25px;
+	}
+	
+	#color_minimum{
+		position: absolute;
+		bottom: -10px;
+		right: 25px;
+	}
+	
+	
 	#layer_panel{
 		position: absolute;
 		top: 7px;