-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·120 lines (100 loc) · 5.79 KB
/
index.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE HTML>
<html>
<head>
<title>IUU Fishing Risk-Assessment Tool</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.typeahead.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- JavaScript -->
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/jquery.typeahead.min.js"></script>
<!-- <script src="js/popper.min.js"></script> -->
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12" id="title">
<h1>IUU Fishing Risk Assessment Tool</h1>
</div>
</div>
<div class="row">
<div class="col-md-12" id="command">
<h1>Enter the species of fish and location you are interested in fishing in.</h1>
</div>
</div>
<div class="row" id="searchFields">
<div class="col-md-4">
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<label for="species">Species</label>
<input id="species" type="search" autocomplete="off">
<small class="form-text text-muted">Enter the species of fish you wish to search for.</small>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<label for="country">Country</label>
<input id="country" type="search" autocomplete="off">
<small class="form-text text-muted">Enter the country you'd like to fish in.</small>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<a href="nz-pc.html"><input id="button" type="submit" class="btn btn-secondary"></button></a>
</div>
</div>
<div class="row" id="risks">
<div class="col-md-8" id="mapWrapper">
<div id="map"></div>
</div>
<div class="col-md-4" id="button">
</div>
</div>
</div>
<script>
$('#species').typeahead({
minLength: 2,
source: [ "Atlantic Cod", "Atlantic Halibut", "Blue Crab (Atlantic)", "Dolphinfish (Mahi Mahi)", "Grouper (Caribbean)", "King Crab (red)", "Pacific Cod Red Snapper (Atlantic)", "Yellowtail Flounder", "Sandbar Sharks", "Red Porgy", "Pink Shrimp (Atlantic)", "Albacore Tuna", "Bigeye Tuna", "Skipjack Tuna", "Yellowfin Tuna", "Bluefin Tuna", "Spotted Bass", "White Catfish", "Grass Carp", "Cresthead Flounder", "Cero Mackerel", "Black Marlin", "White Perch", "Atlantic Salmon", "Sockeye Salmon","Pink Salmon", "Bull Trout", "Rainbow Trout", "Tarpon"]
});
$('#country').typeahead({
minLength: 2,
source: [ "New Zealand", "Denmark", "Finland", "Sweden", "Switzerland", "Norway", "Singapore", "Netherlands", "Canada", "Germany", "Luxembourg", "United Kingdom", "Australia", "Iceland", "Hong Kong", "Belgium", "Austria", "The United States of America", "Ireland", "Japan", "Uruguay", "Estonia", "France", "Bahamas", "Chile", "United Arab Emirates", "Bhutan", "Israel", "Poland", "Portugal", "Barbados", "Taiwan", "Qatar", "Slovenia", "Saint Lucia", "Saint Vincent and The Grenadines", "Botswana", "Dominica", "Cape Verde", "Lithuania", "Costa Rica", "Brunei", "Spain", "Georgia", "Latvia", "Grenada", "Cyprus", "Czech Republic", "Malta", "Mauritius", "Rwanda", "Korea (South)", "Namibia", "Slovakia", "Malaysia", "Croatia", "Jordan", "Hungary", "Romania", "Cuba", "Italy", "Saudi Arabia", "Sao Tome and Principe", "Suriname", "Montenegro", "Oman", "Senegal", "South Africa", "Greece", "Bahrain", "Ghana", "Solomon Islands", "Serbia", "Burkina Faso", "Turkey", "Kuwait", "Tunisia", "Bulgaria", "Brazil", "China", "India", "Belarus", "Jamaica", "Albania", "Bosnia and Herzegovina", "Lesotho", "Panama", "Mongolia", "Zambia", "Colombia", "Indonesia", "The FYR of Macedonia", "Morocco", "Liberia", "Argentina", "El Salvador", "Maldives", "Sri Lanka", "Kosovo", "Benin", "Peru", "Trinidad and Tobago", "Philippines", "Thailand", "Timor-Leste", "Gabon", "Niger", "Guyana", "Algeria", "Egypt", "Côte d’Ivoire", "Ethiopia", "Bolivia", "Vietnam", "Armenia", "Pakistan", "Mali", "Tanzania", "Togo", "Dominican Republic", "Ecuador", "Malawi", "Honduras", "Mexico", "Paraguay", "Laos", "Azerbaijan", "Moldova", "Djibouti", "Sierra Leone", "Nepal", "Kazakhstan", "Russia", "Ukraine", "Iran", "Guatemala", "Myanmar", "Papua New Guinea", "Kyrgyzstan", "Lebanon", "Nigeria", "Guinea", "Mauritania", "Mozambique", "Nicaragua", "Bangladesh", "Cameroon", "Gambia", "Kenya", "Madagascar", "Tajikistan", "Uganda", "Comoros", "Turkmenistan", "Zimbabwe", "Cambodia", "Uzbekistan", "The Democratic Republic of Congo", "Haiti", "Burundi", "Central African Republic", "Chad", "Republic of Congo", "Angola", "Eritrea", "Venezuela", "Iraq", "Guinea-Bissau", "Afghanistan", "Libya", "Yemen", "Sudan", "Syria", "Korea (North)", "South Sudan", "Somalia"]
});
</script>
<script>
function initMap() {
var country = "Sudan";
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1
});
geocoder.geocode( {'address' : country}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
}
function somalia(){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address' : "Somalia"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC7nrWmeyQ6BsCv1jZLCckO02FBqQHFUg&callback=initMap"></script>
<!-- -->
</body>
</html>