-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmain.html
86 lines (73 loc) · 4.3 KB
/
main.html
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
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Upgrade Indy</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/animate.css">
<link rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
<div class="nav animated fadeInDown">
<h1>Upgrade Indy</h1>
</div>
<div class="left-center animated fadeIn fade">
<div id="chart">
<canvas id="myChart"></canvas>
<div id="graph-disclaimer">*Years after 2017 are perdictions based on economic growth from businesses</div>
</div>
<div class="horizontal-separator"></div>
<div id="map-buttons" style="display: flex">
<div>
<h2>Map Description:</h2>
<h4>
<div class="info">-Markers show where other businesses of different types are located</div>
<div class="info">-Heat map portrays the areas with crime</div>
<div class="info">-We recommend placing businesses on the green edges of the heat</div>
<div class="legend-container">
<div class="legend">Light Industrial : <span class="blueWord">Blue</span> <br /> - Ex: Small warehouses ...</div>
<div class="legend">Heavy Industrial : <span class="magWord">Magenta</span> <br /> - Ex: Large polluting factories ...</div>
<div class="legend">Community Commercial : <span class="yelWord">Yellow</span> <br /> - Ex: Restaurants, retail stores ...</div>
<div class="legend">Heavy Commercial : <span class="orWord">Orange</span> <br /> - Ex: Car dealerships, auto part stores ...</div>
<div class="legend">Place of Worship : <span class="aquaWord">Aqua</span></div>
<div class="legend">Office : <span class="greenWord">Green</span></div>
</div>
</h4>
</div>
<div class="container" style="width: 150px;">
<button id="max" type="button" class="btn btn-info" style="font-size: 1.5em; color: white; margin-bottom: 1rem;">Best Region</button>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
Property Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a id="liClick" role="menuitem" tabindex="-1">Light industrial</a></li>
<li role="presentation"><a id="hiClick" role="menuitem" tabindex="-1">Heavy Industrial</a></li>
<li role="presentation"><a id="ccClick" role="menuitem" tabindex="-1">Community Commercial</a></li>
<li role="presentation"><a id="hcClick" role="menuitem" tabindex="-1">Heavy Commercial</a></li>
<li role="presentation"><a id="powClick" role="menuitem" tabindex="-1">Place of Worship</a></li>
<li role="presentation"><a id="oClick" role="menuitem" tabindex="-1">Office</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="vertical-separator"></div>
<div class="right-center animated fadeIn fade">
<div id="map-container">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script type="text/javasript" src="javascript/secrets.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDn2laYvDgxVJAc_ARCkY55s0EXiqs689M&libraries=visualization"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="./javascript/heatMap.js"></script>
<script src="./javascript/chart.js"></script>
</body>
</html>