cpt/index.html at master · vick25/cpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<link rel="shortcut icon" href="http://localhost:82/cpt/img/favicon.png">
	<title>County projects tracker</title>

	<script src="http://localhost:82/cpt/src/jquery/jquery.js" type="text/javascript"></script>
	<script src="http://localhost:82/cpt/src/ol3/js/ol-debug.js" type="text/javascript"></script>
	<script src="http://localhost:82/cpt/src/canvasjs/canvasjs.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="http://localhost:82/cpt/src/ol3/css/ol.css" type="text/css" />
	<link rel="stylesheet" href="http://localhost:82/cpt/style.css" type="text/css"></style>
</head>
<body onload="uncheck()">

<script type="text/javascript">
	function uncheck(){
	$(':checkbox:checked').prop('checked',false);
}
</script>


<div id="container">
	<div id="header">
		<div id="logo1">
		<a href="index.html"><img id="hblogo"src="img/nclogo.png" /></a>
		</div>
		<h2 id="heading">Nairobi City County Development Projects</h2>
		<p id="description">&nbsp &nbsp &nbsp &nbsp Visualizing and monitoring county development projects</p>
		<div id="logo2"><a href="index.html"><img id="knlogo" src="img/kenya_logo.png" /></a></div>
	</div>
	<div id="map" class="map"></div>

	<div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
	<div id="layerpanel">
		<h4 text-decoration = 'underline'>Filter Projects</h4>

		<p>Status:</p>
		<ul id="projectStatus">
			<li><label class="checkbox"><input type="checkbox" value="2" id="ongoingProjects" onclick = 'switchlayer(this)' /> Ongoing Projects</label></li>
			<li><label class="checkbox"><input type="checkbox" value="3" id="proposedProjects" onclick = 'switchlayer(this)' /> Proposed Projects</label></li>
			<li><label class="checkbox"><input type="checkbox" value="4" id="comletedProjects" onclick = 'switchlayer(this)' /> Completed Projects</label></li>
		</ul>
		<p>Financial Year:</p>
		<ul id="financialYear">
			<li><label class="checkbox"><input type="checkbox" value="5" id="2014/2015" onclick = 'switchlayer(this)' /> 2014/2015</label></li>
			<li><label class="checkbox"><input type="checkbox" value="6" id="2013/2014" onclick = 'switchlayer(this)' /> 2013/2014</label></li>
		</ul>

		<script type="text/javascript">
		window.onload = function () {
		 CanvasJS.addColorSet("projectColors",
                [//colorSet Array

                "#39ff33",
                "#f0162d",
                "#062df1"
                ]);
		var chart = new CanvasJS.Chart("chart",
		{
			colorSet: "projectColors",
			title:{
				fontSize: 11.5,
				text: "Total number of projects by status"
			},
			/*legend: {
				maxWidth: 200,
				itemWidth: 100
			},*/
			data: [
			{
				type: "pie",
				showInLegend: false,
				legendText: "{indexLabel}",
				dataPoints: [
					{ y: 73, indexLabel: "Ongoing" },
					{ y: 36, indexLabel: "Proposed" },
					{ y: 19, indexLabel: "Completed"}
				]
			}
			]
		});
		chart.render();
		}
	</script>
		<div id="chart" style="height: 215px; width: 285px"></div>

	</div>
	<div id="attribute">
	<p class="attribute">KEY: &nbsp<img src="img/green.png" height="20px" width="20px"> :Ongoing &nbsp<img src="img/red.png" height="20px" width="20px"> :Proposed &nbsp<img src="img/blue_dark.png" height="20px" width="20px"> :Complete
	    &nbsp &nbsp &nbsp &nbsp &nbsp Click on project on map to display project details &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

	</p>
	</div>


	<div id="info" class="alert alert-success">
	    &nbsp;
	</div>

	<div id="footer">
		<div id="copyright"><h5>Copyright &copy; 2015 Elvis Ayiemba. All rights reserved.</h5></div>
	</div>


	<!--this script loads map and features after page loads-->
	<script src="http://localhost:82/cpt/app.js" type="text/javascript"></script>

</div>
</body>
</html>