Mercurial > hg > LGMap

changeset 26:9f67e8afa1cc default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add new file for new LGService UI project
author Calvin Yeh <cyeh@mpiwg-berlin.mpg.de>
date Thu, 28 Sep 2017 23:58:34 +0200
parents 057b56c62b13
children
files map2.js map2.php
diffstat 2 files changed, 649 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/map2.js	Thu Sep 28 23:58:34 2017 +0200
@@ -0,0 +1,575 @@
+
+
+//geoserver url
+var url="http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows";
+
+//"name": "layer name"
+var overlayArray=[
+		{name:"中國1820省界",
+			file:"China_Monograph_Project:AD1820ChinaProfPolgon",
+			preload:false
+		},
+		{name:"中國1820府界",
+			file:"China_Monograph_Project:AD1820ChinaPrefPolygon",
+			preload:false
+		},
+		{name:"中國1820省名",
+			file:"China_Monograph_Project:AD1820ChinaProfPoint",
+			preload:false
+		},
+		{name:"China 1820 Province",
+			file:"China_Monograph_Project:AD1820ChinaProfPoint_PY",
+			preload:false
+		},
+		{name:"中國1820府名",
+			file:"China_Monograph_Project:AD1820ChinaPrefPoint",
+			preload:false
+		},
+		{name:"China 1820 Prefecture",
+			file:"China_Monograph_Project:AD1820ChinaPrefPoint_PY",
+			preload:false
+		},
+		{name:"中國1820縣市名",
+			file:"China_Monograph_Project:AD1820ChinaCountyPoints",
+			preload:false
+		},
+		{name:"China 1820 County",
+			file:"China_Monograph_Project:AD1820ChinaCountyPoints_PY",
+			preload:false
+		},
+		{name:"中國1820鄉鎮名",
+			file:"China_Monograph_Project:AD1820ChinaTownPoint",
+			preload:false
+		},
+		{name:"China 1820 village",
+			file:"China_Monograph_Project:AD1820ChinaTownPoint_PY",
+			preload:false
+		},
+		{name:"China 1820 Prefecture (boundaries-only)",
+			file:"China_Monograph_Project:v5_1820_pref_pgn_utf_wgs84",
+			preload:false
+		},
+		{name:"provincial distribution of local gazetteers",
+			file:"China_Monograph_Project:monograph_distribution_prov_x",
+			preload:false
+		},
+		/*{
+			name:"test",
+			file:"China_Monograph_Project:v5_citas90_pref_pgn_utf",
+			preload:false
+		},*/
+		{
+			name:"provincial capitals",
+			file:"China_Monograph_Project:all_monographs_capital_points",
+			preload:false
+		}
+		];
+var datasetArray=[
+
+		{ name:"distribution of local gazetteers",
+			file:"./datasets/books_coordinates.csv",
+			isFile: true,
+			preload:true
+
+		}
+		// ,{
+		// 	name:"蝗神廟之分佈",
+		// 	file:"./datasets/locust_temples.csv",
+		// 	preload:false
+		// }
+	  ];
+var backgroundMapArray=[
+			/*{
+				name: 'Barrington Roman Empire',
+                url: 'http://pelagios.dme.ait.ac.at/tilesets/imperium/${z}/${x}/${y}.png',
+                type:'XYZ',
+                attribution: "(c) Barrington Roman Empiry, <a href='http://pelagios.dme.ait.ac.at/maps/greco-roman/'>Pelagios</a>"
+               },*/
+           {
+                name: '世界地形圖',
+        		url: '../ts/t/terrain/${z}/${x}/${y}.png',
+                type:'XYZ',
+                attribution: "<a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>"
+           }
+        /*,{
+                name: '西元1820年 清朝 行政區',
+        		url: 'http://wmsproxy.appspot.com/map.jsp?l=China1820-png-${z}-${x}-${y}',
+                type:'XYZ',
+                attribution: "© NTU CSIE 303 Lab, <a href='http://archimedes.csie.ntu.edu.tw/lab_web1/'>NTU CSIE 303 Lab</a>"
+        }*/
+        ];
+//mpgiwg layers
+// if (client_ip.substring(0,9)=="141.14.23") {
+// 	backgroundMapArray.push(
+// 			{
+//
+//                 name: '陳正祥–蝗神廟之分佈',
+//         		url: '../ts/t/pa_cha/${z}/${x}/${y}.png',
+//                 type:'XYZ',
+//                 attribution: "© 中國文化地理 陳正祥, <a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>"
+//         	}
+// 		);
+// }
+
+var colorArray=[{//blue
+                r1 : 0,
+                g1 : 128,
+                b1 : 255,
+                r0 : 205,
+                g0 : 230,
+                b0 : 255
+        },{//red
+                r1 : 255,
+                g1 : 84,
+                b1 : 22,
+                r0 : 255,
+                g0 : 218,
+                b0 : 205
+        }, {//purple
+                r1 : 132,
+                g1 : 0,
+                b1 : 255,
+                r0 : 231,
+                g0 : 205,
+                b0 : 255
+        }, {//green
+                r1 : 0,
+                g1 : 225,
+                b1 : 116,
+                r0 : 180,
+                g0 : 225,
+                b0 : 204
+        }, {//yellow
+                r1 : 255,
+                g1 : 191,
+                b1 : 0,
+                r0 : 255,
+                g0 : 243,
+                b0 : 205
+ }];
+var map, table,timeline,pieChart;
+var urlParameter=new Array();
+
+$(document).ready(function(){
+
+	GeoTemConfig.datasets=[];
+
+	GeoTemConfig.colors=colorArray;
+
+	getUrlParameter();
+
+	//if(urlParameter['name']!=undefined&&urlParameter['file']!=undefined){ //See if this page is referred by search result
+		var keywords = decodeURI(urlParameter['keywords']),
+		    filters = decodeURI(urlParameter['filters']),
+            excludes = decodeURI(urlParameter['excludes']),
+		    name = decodeURI(urlParameter['name']),
+            isTOC = decodeURI(urlParameter['isTOC']),
+			obj={name:name, isFile:false, keywords:keywords, filters:filters, excludes: excludes, preload:true, isTOC: isTOC};
+
+		datasetArray.splice(0,0,obj);
+	//}
+
+	// zoe added for incoming json object from LGDataverse
+	if (urlParameter['name']!=undefined && urlParameter['file']==undefined && urlParameter['fileId']!=undefined) {
+		var file=undefined;
+		var name=decodeURI(urlParameter['name']);
+		var obj={name:name,file:file,isFile:true,preload:true};
+		datasetArray.splice(0,0,obj);
+	};
+	// end
+
+	initWindowWidget();
+        initWidget(); //initial Sebastian's widgets
+        initToolbar(); //initial the left side icons
+        // Syncronize checkboxes and table widget
+        var subscriber;
+
+	Publisher.Subscribe('filterData',subscriber,function(data){
+
+		$("#datasetContainer input:checkbox").each(function(){
+
+			var name=$(this).attr("name");
+
+			var dataset=$.grep(data,function(val,key){
+				return val.label==name;
+			});
+
+			if(dataset.length==0){
+				this.checked=false;
+			}
+			// zoe added
+			if (urlParameter['file']==undefined && urlParameter['fileId']!=undefined && name==urlParameter['name']) {
+				this.checked = true;
+				this.disabled = true;
+			}
+			// end
+		});
+	});
+	$(".windowWidget").hide();
+	$(".windowWidget .windowWidgetBar .visibilityButton").click();
+
+	// debug by yao
+	// $("#aboutIcon").click();
+
+});
+
+function getUrlParameter(){
+	//examine the parameter "mode" in the url
+	var url=window.location.href;
+	var pos=url.indexOf("?");
+	if(pos!=-1){
+		var params=url.substring(pos+1);
+		var varArray=params.split("&");
+		for(var i=0; i<varArray.length; i++){
+			pos=varArray[i].indexOf("=");
+			var name=varArray[i].substring(0,pos);
+			var value=varArray[i].substring(pos+1);
+			urlParameter[name]=value;
+			/*
+			if(name=="mode"){
+				mode=value;
+			}*/
+		}
+	}
+}
+
+function loadDataset(name, fileName){
+	// zoe added
+	if (fileName==undefined) {
+		// Get file json object from POST from LGDataverse by fileId in url
+		var fileId = urlParameter['fileId'];
+		var lgdv_url = lgdataverse_url + "getDatafile?fileId="+fileId;	// lgdataverse_url is a global var
+		console.log("lgdv_url:"+lgdv_url);
+
+		var fileData = {};
+		$.ajax({
+        	url : lgdataverse_url+"getDatafile",
+        	async : false,
+	        type : 'GET',
+	        data: 'fileId='+fileId,
+	        dataType: "json",
+	        success: function (data) {
+	            console.log("getting file from LGDataverse success!");
+	            fileData = data;
+	        },
+	        error: function (data) {
+	            console.log("getting file from LGDataverse failed!" + data);
+	            alert("Data "+ urlParameter['name'] +" CANNOT be shown on the map.");
+
+	        }
+	    }).done(function(result) {
+
+	    });
+
+	    if (fileData.state == "ok") {
+	    	/*
+	    	var json = [
+				{
+					// these fields are required in map
+					"description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本",
+					"lat":36.974178,
+					"lon":115.259262,
+					"place":"威縣",
+					// ----
+					"tableContent":{
+						// these fields are shown as columns in the table
+						"description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本",
+						"name":"(民國) 威縣志",
+						"place":"威縣",
+						"testColumn1":"content1",
+						"testColumn2":"content2",
+						"testColumn3":"content3",
+
+					}
+				}
+			];
+			*/
+
+	    	var dataCSVformat = fileData.file.dataString;
+	    	dataCSVformat = dataCSVformat.substring(0, dataCSVformat.length-2);	// remove the last two characters which are "\n"
+	    																		// it will cause download error since the last element in table is null
+	    	//console.log(dataCSVformat);
+	    	var json = GeoTemConfig.convertCsv(dataCSVformat);
+			GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json),name));
+
+		}
+	}
+	else {
+	// zoe end
+       var fileURL = fileName, tmpObj;
+
+	   if(fileName == name){
+
+          //means download directly
+		  for(var idx = 0, len = datasetArray.length; idx < len; idx++){
+
+               tmpObj = datasetArray[idx];
+			   if(name == tmpObj.name){
+
+                    if(tmpObj.isTOC === "1"){
+                        fileURL = "https://localgazetteers-test.mpiwg-berlin.mpg.de/lg-api/sections/export.map?filters="
+    						    + tmpObj.filters
+    							+ "&fileName="+ tmpObj.name;
+                    }
+                    else {
+                        fileURL = "https://localgazetteers-test.mpiwg-berlin.mpg.de/lg-api/contents/export.map?keywords="
+    						    + tmpObj.keywords
+    							+ "&filters="+ tmpObj.filters
+                                + "&excludes="+ tmpObj.excludes
+    							+ "&fileName="+ tmpObj.name;
+                    }
+					break;
+			   }
+		  }
+	   }
+
+       var csvFile=GeoTemConfig.getCsv(fileURL,
+        	function(json){
+        		GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json), name));
+
+			//checking the checkbox has to be done here, because if done in the each loop below, it will be unchecked again in the Publisher.Subscribe function. For the Publisher.Subscribe function may be called when the dataset is not yet loaded, which causes dataset.length to be 0 and unchecks the checkbox
+			$("#datasetContainer input:checkbox[value*='" + fileName + "']").prop("checked",true);
+			//rename the column "name" to "title"
+			$(".headerLabel").each(function(){
+				if ($(this).html() == "name"){
+					$(this).empty();
+					$(this).html("title");
+				}
+			});
+			/*//this is redundant when calling GeoTemConfig.addDataset
+        		//display in all widgets
+        		map.display(GeoTemConfig.datasets);
+			timeline.display(GeoTemConfig.datasets);
+			table.display(GeoTemConfig.datasets);
+			pieChart.display(GeoTemConfig.datasets); */
+
+                }
+
+       );
+
+   	}
+
+}
+
+function closeDataset(name,fileName){
+	var idx;
+	//find the dataset to close by name
+	var data=$.grep(GeoTemConfig.datasets,function(val,key){
+		if(val.label==name){
+			idx=key;
+		}
+		return val.label==name;
+	});
+	//GeoTemConfig.datasets.splice(idx,1);
+	GeoTemConfig.removeDataset(idx);
+}
+
+function initWidget(){
+	var mapElem=document.getElementById("mapContainer");
+	map=new WidgetWrapper();
+	var mapWidget=new MapWidget(map,mapElem,{
+		mapTitle:"",
+		minimumRadius:2,
+		baseLayer:'世界地形圖', //底圖
+		alternativeMap:backgroundMapArray
+	});
+
+	var overlayLoaderElem=document.getElementById("overlayLoaderContainer");
+	var overlayLoader=new WidgetWrapper();
+	var overlayLoaderWidget=new OverlayloaderWidget(overlayLoader,overlayLoaderElem);
+	overlayLoaderWidget.attachMapWidget(mapWidget);
+	//insert overlay checkboxes
+	$.each(overlayArray,function(idx,obj){
+		var name=obj.name;
+		var file=obj.file;
+		var preload=obj.preload;
+		var optionObj=$("<div class='option'></div>");
+		$("#overlayContainer").append(optionObj);
+		var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>");
+		checkBoxObj.prop("checked",preload);
+		optionObj.append(checkBoxObj);
+		var nameObj=$("<div class='label'>"+name+"</div>");
+		optionObj.append(nameObj);
+		if(preload){
+			overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,file);
+		}
+	});
+
+	$("#overlayContainer input:checkbox").click(function(e){
+		//dirty insertion and deletion, delete all the overlays and insert them in the specified sequence
+		//in order to maintain the sequence of overlays, so that the smaller one will always be on top of the bigger ones
+		//in the overlayLoader, clicking on the "x" button deletes the overlay. Here deletion is done by triggering the click event rather than deleting the overlay directly
+		while($("#overlayLoaderContainer div:last-child a").length!=0){
+			$("#overlayLoaderContainer div a:nth-child(1)").click();
+		}
+
+		$("#overlayContainer input:checkbox").each(function(){
+			if($(this).is(":checked")){
+				overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,
+                                	$(this).val());
+			}
+		});
+		//stop the event from propagating, or the list would close every time the user checks an item
+		e.stopPropagation();
+		/*
+		//normal insertion and deletion
+		if($(this).is(":checked")){//selected
+			overlayLoaderWidget.overlayLoader.distributeArcGISWMS("http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows",
+				$(this).val());
+		}else{//deselect
+			var name=url+" - "+$(this).val();
+			var layerNameArray=$("#overlayLoaderContainer > div:last-child").html().split('<a href="">(x)</a>');
+			var idx=$.inArray(name,layerNameArray);
+			$("#overlayLoaderContainer div a:nth-child("+(idx+1)+")").click();
+		}*/
+	});
+
+
+	//insert dataset checkboxes
+	$.each(datasetArray,function(idx,obj){
+		var name=obj.name;
+		var file= (obj.isFile) ? obj.file : name;
+		var preload=obj.preload;
+		var optionObj=$("<div class='option'></div>");
+
+		$("#datasetContainer ").append(optionObj);
+
+		var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+ file +"'>");
+
+		optionObj.append(checkBoxObj);
+		//checkBoxObj.prop("checked",preload);
+		var nameObj=$("<div class='label'>"+name+"</div>");
+
+		optionObj.append(nameObj);
+		if(preload){
+			loadDataset(name, file);
+		}
+	});
+
+	$("#datasetContainer input:checkbox").click(function(){
+		/*
+		//dirty insertion and deletion, too slow
+		while($("#tableContainer .tableTabs").children().length!=0){
+			//console.log($("#tableContainer .tableTabs").children().length);
+			//$("#tableContainer .tableTabs .tableTab:nth-child(1) .smallButton")[0].onclick();
+			GeoTemConfig.removeDataset(0);
+		}
+
+		$("#datasetContainer .content input:checkbox").each(function(){
+			if($(this).is(":checked")){
+				loadDataset($(this).attr("name"),$(this).val());
+			}
+		});
+		*/
+		if($(this).is(":checked")){//selected
+			loadDataset($(this).attr("name"), $(this).val());
+		}else{
+			closeDataset($(this).attr("name"), $(this).val());
+		}
+	});
+
+	var timelineElem=document.getElementById("timelineContainer");
+	timeline=new WidgetWrapper();
+
+	var timelineWidget=new FuzzyTimelineWidget(timeline,timelineElem,{
+		timelineTitle:""
+	});
+
+	var tableElem=document.getElementById("tableContainer");
+	table=new WidgetWrapper();
+	var tableWidget=new TableWidget(table,tableElem);
+
+	var pieChartElem=document.getElementById("pieChartContainer");
+	pieChart=new WidgetWrapper();
+	var pieChartWidget=new PieChartWidget(pieChart,pieChartElem);
+	//pieChartWidget.addPieChart(0,"place");
+}
+
+function initToolbar(){
+	var mode=1;
+	if(urlParameter['mode']!=undefined)
+		mode=urlParameter['mode'];
+	if(mode==1){//locate the overlay selector on the map toolbar
+		$("#overlayIcon").hide();
+		var overlayContainerObj=$("#overlayContainer");
+		var overlayTitleObj=$("<td>Overlay</td>");
+		overlayTitleObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(1) td:nth-child(1)");
+		var overlaySelectorObj=$("<td></td>");
+		var overlayContainerPadding=5;
+		overlayContainerObj.css("padding",overlayContainerPadding+"px");
+		//give the overlay selector the same look as the that of the background map and adjust the width
+		overlaySelectorObj.append("<div class='dropdownLeft'></div>");
+		overlaySelectorObj.append("<div class='dropdownSelection'>select overlays</div>");
+		overlaySelectorObj.append("<div class='dropdownButtonEnabled'></div>");
+		overlaySelectorObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(2) td:nth-child(1)");
+		var w=parseInt(overlayContainerPadding*2+overlayContainerObj.width());
+		overlaySelectorObj.width(w);
+		w=w-overlaySelectorObj.children(".dropdownLeft").width()-overlaySelectorObj.children(".dropdownButtonEnabled").width();
+		overlaySelectorObj.children(".dropdownSelection").width(w);
+		overlaySelectorObj.append(overlayContainerObj);
+		//hide the overlay list and adjust the position
+		overlayContainerObj.hide();
+		overlayContainerObj.css("position","absolute");
+		var t=overlaySelectorObj.offset().top-parseInt(overlayContainerObj.css("padding"))+overlaySelectorObj.children(".dropdownButtonEnabled").height();
+		//var l=overlaySelectorObj.offset().left-overlayContainerObj.width()/2;
+		var l=overlaySelectorObj.position().left-$("#rightWrapper").css("margin-left");
+		overlayContainerObj.css("top",t);
+		overlayContainerObj.css("left",l);
+		overlayContainerObj.css("z-index",20000);
+		//toggle the visibility of the overlay list by clicking on the selector
+		overlaySelectorObj.click(function(){
+			var visible=overlayContainerObj.is(":visible");
+			if(visible){
+				$(this).children(".selector").show();
+				overlayContainerObj.hide();
+			}else{
+				$(this).children(".selector").hide();
+				overlayContainerObj.show();
+			}
+		});
+	}
+
+	$(".icon").each(function(){//adjust the position of the windows
+		var t=$(this).offset().top;
+		var l=$("#rightWrapper").css("margin-left");
+		var windowName="."+$(this).attr("id");
+		windowName=windowName.replace("Icon","");
+		var windowObj=$(windowName);
+		windowObj.css("top",t);
+		windowObj.css("left",l);
+	});
+
+	// The following two sections are to hide/show the windows
+	$(".icon").click(function(){//toggle the visibility of the window by clicking on the icons
+		var windowName="."+$(this).attr("id");
+		windowName=windowName.replace("Icon","");
+		var windowObj=$(windowName);
+		if(windowObj.is(":visible")){
+			//hide the window
+			windowObj.hide();
+			$(this).removeClass("selected");
+		}else{
+			//show the window
+			if(windowObj.children(".windowWidgetBar").children(".visibilityButton").html()=="+"){
+				windowObj.children(".windowWidgetBar").children(".visibilityButton").click();
+			}
+			windowObj.show();
+			$(this).addClass("selected");
+		}
+	});
+
+	$(".windowWidget .windowWidgetBar .visibilityButton").click(function(){
+		if($(this).html()=="+"){//if the window is minimized, it should be hidden
+			$(this).parent().parent().hide();
+			var windowName=$(this).parent().parent().attr("class");
+			windowName=windowName.replace("container","");
+			windowName=windowName.replace("windowWidget","");
+			windowName=windowName.replace("ui-draggable","");
+			windowName=windowName.replace(" ","");
+			windowName=windowName.trim();
+			windowName="#"+windowName+"Icon";
+			$(windowName).removeClass("selected");
+		}
+	});
+
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/map2.php	Thu Sep 28 23:58:34 2017 +0200
@@ -0,0 +1,74 @@
+<?php
+include_once('config/config.php');
+global $lgdataverse_url;	// only be used when we need to get data from LGDataverse
+
+
+?>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link href="map.css" type="text/css" rel="stylesheet"/>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
+		<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
+		<link href="./geotemco/css/platin.css" rel="stylesheet" type="text/css">
+		<link href="WindowWidget.css" rel="stylesheet" type="text/css">
+
+		<script type="text/javascript">
+			lgdataverse_url = JSON.parse('<?php echo json_encode($lgdataverse_url) ?>');
+			var client_ip="<?php echo $_SERVER['REMOTE_ADDR']?>";
+		</script>
+
+        <script src="./geotemco/platin.js"></script>
+       	<script src="map2.js"></script>
+        <script src="WindowWidget.js"></script>
+    </head>
+
+    <body>
+
+	<div id="leftWrapper">
+		<div class="container overlayLoader">
+			<div id="overlayLoaderContainer"></div>
+		</div>
+		<div class='container toolbar'>
+			<div id="toolbarContainer">
+				<div id="datasetIcon" class="icon" title="dataset"><img src="./images/dataset.png"/></div>
+				<div id="overlayIcon" class="icon" title="overlay"><img src="./images/overlay.png"/></div>
+				<div id="pieChartIcon" class="icon" title="pie chart"><img src="./images/pieChart.png"/></div>
+				<div id="timelineIcon" class="icon" title="timeline"><img src="./images/timeline.png"/></div>
+				<div id="aboutIcon" class="icon" title="about"><img src="./images/about.png"/></div>
+			</div>
+		</div>
+	</div>
+	<div id="rightWrapper">
+		<div class="container map">
+			<div id="mapContainer"></div>
+		</div>
+		<div class="container table" title="table">
+			<div id="tableContainer"></div>
+		</div>
+	</div>
+	<div class="container dataset windowWidget" title="Dataset">
+		<div id="datasetContainer"></div>
+	</div>
+	<div class="container overlay windowWidget" title="Overlay">
+		<div id="overlayContainer">
+		</div>
+	</div>
+	<div class="container pieChart windowWidget" title="Pie chart">
+		<div id="pieChartContainer"></div>
+	</div>
+	<div class="container timeline windowWidget" title="Timeline">
+		<div id="timelineContainer"></div>
+	</div>
+	<div class="container about windowWidget" title="About">
+		<div id="aboutContainer">
+			<?php
+				//write the description of the project in about.php
+				include("about.php");
+			?>
+		</div>
+	</div>
+
+    </body>
+</html>