-
Notifications
You must be signed in to change notification settings - Fork 1
/
MAP.html
101 lines (93 loc) · 5.06 KB
/
MAP.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="node_modules/aylien_textapi/textapi.js"></script>
<script src="node_modules/aylien_textapi/lib/util.js"></script>
<script src="node_modules/aylien_textapi/lib/apirequest.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="map_style.css">
</head>
<body>
<div id="map"></div>
<!-- TEXT BOX OVERLAID ON MAP -->
<div id="name">
<h1 id="harvey"><font color="blue">H</font>urricane <font color="blue">R</font>elief <font color="blue">V</font>isualization </h1>
<hr width = 85%>
<h2 id="place_name"></h2>
<a href="" id="link" target="_blank" hidden="true">View on Google Maps</a>
<p id="text">
Welcome to the Hurricane Relief Visualization. This web application offers an interactive map of real-time, crowdsourced data on community needs and avaliable shelters.
You can find information about shelters near you, what you can donate, and what areas appear to be most in need of assistance.
</p>
</div>
<nav class="navbar fixed-bottom navbar-default navbar-toggleable-md navbar-primary" id="navbar" style="background-color: white">
<div class="form-inline"></div>
<!--<a class="navbar-brand" href="#">HFH</a>-->
<ul class="navbar-nav mr-auto">
<div class="btn-group" data-toggle="buttons" id="map_toggle">
<label class="btn btn-primary active">
<input type="checkbox" id="shelters_toggle" onChange="updateMaps();" checked> Shelters
</label>
<label class="btn btn-danger active">
<input type="checkbox" id="needs_toggle" onChange="updateMaps();" checked> Needs
</label>
</div>
<div class="btn-group" data-toggle="buttons" id="display_toggle">
<label class="btn btn-primary active">
<input type="checkbox" id="markers_toggle" onChange="updateMaps();" checked> Markers
</label>
<label class="btn btn-primary active">
<input type="checkbox" id="overlay_toggle" onChange="updateOverlay();" checked> Info Panel
</label>
<label class="btn btn-primary">
<input type="checkbox" id="opacity_toggle" onChange="updateOpacity();"> Panel Opacity
</label>
</div>
<li class="nav-item">
<a class="nav-link" href="#" onClick="openInfo();"> Help </a>
</li>
<div id="infoModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onClick="closeInfo();">×</span>
<h2><u>Information</u> <font color="blue">+</font> <u>Key</u></h2>
</div>
<div class="modal-body">
<p>Press the buttons on the bottom of the screen to toggle what is displayed on screen. You can also click on any of the markers on the map to display more information about that location.</p>
<p>This page automatically refreshes every 30 seconds.</p>
</div>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://api.harveyneeds.org/needs/new"> Add Needs </a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://api.harveyneeds.org/shelters/new"> Add Shelters </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onClick="updateZoom()">Reset Zoom</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" >
<input class="form-control mr-sm-2" id="searchTxt" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit" onClick="searchName();">Search</button>
</form>
</div>
</nav>
<!---->
<script src="MAPscriptSAFE.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO2jf9Iv7fwK0gNvQyeY8j33mlW4ZVgQA&libraries=visualization&callback=initMap">
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (npm install --save-dev webpack
below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="bundle.js"></script>
<script src="node_modules/aylien_textapi"></script>
</body>
</html>