-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
203 lines (191 loc) · 10.2 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>GEO-TRACKER</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:400,600'>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery1.11.2.min.js" type="text/javascript"></script>
<!-- The Java script below calculates the distance between two geo locations by using the Haversine Function.The Haversine function ignores the ellipsoidal effect thereby assuming Earth to be spherical for the sake of computation.Considering the Earth is moderately elipsolidial, using the spherical shape of it for geopositioning or the spherical model rougly yields an error of 22km or 0.3% as indicated in this study: http://gis.stackexchange.com/questions/25494/how-accurate-is-approximating-the-earth-as-a-sphere . Thus making it an accurate measure of geopostions -->
<script type="text/javascript">
//Distance Calculator
function calculateDistanceinKms() {
var lat1 = document.getElementById("lat_1").value;// Fetches value of Latitude1
var lon1 = document.getElementById("long_1").value;// Fetches values of Longitude1
var lat2 = document.getElementById("lat_2").value;// Fetches value of Latitude2
var lon2 = document.getElementById("long_2").value;// Fetches value of Longitude2
var ew1 = document.getElementById("l1d").value;//Fetches value of Longitude1's direction
var ew2 = document.getElementById("l2d").value;//Fetches value of Longitude2's direction
var ns1 = document.getElementById("lad1").value;//Fetches the direction of Latitude1
var ns2 = document.getElementById("lad2").value;//Fetches the direction of Latitude2
//Conditionals to distinguish between a 'small distance calculation' or the calculations within one side of Earth with that of a 'large distance calculation' or calculations involving different sides.
//Conditional to distinguish between East & West
if(ew1!= ew2 ) {var lon1 = -Math.abs(lon1);}
//If the direction of longitudes are different this script converts a longitude value into negative so that the appropriate measure between their horizontal distance can be computed
if(ns1!= ns2 ){var lat1 = -Math.abs(lat1);}
//If the direction of latitudes are different this script converts a latitude value into negative so that the appropriate measure between their vertical distance can be computed
var R = 6371; // Mean radius of Earth in kilometers
//Position of Latitude2 is subtracted from Latitude1 & coverted to radians
var dLat = toRad(lat2 - lat1);
//Position of Longitude 2 is subtracted from Longitude1 & converted to radians
var dLon = toRad(lon2 - lon1);
var lat1 = toRad(lat1);// Latitude1 is converted to Radians
var lat2 = toRad(lat2);// Latitude2 is converted to Radians
//This is the Haversine Function
//square of half the chord length between the two points
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.sin(dLon / 2) * Math.sin(dLon / 2) *
Math.cos(lat1) * Math.cos(lat2);
//Angular distance in Radians
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = Math.round(R * c);// Mean radius of Earth multiplied by C
// Output
document.getElementById("result").innerHTML = "Distance: " + d +" "+ "KMs";}
// Function for Radian conversion
function toRad(Value) {return Value * Math.PI / 180;}
//End of Haversine
// Difference in timezone calculator
function calculateTime() {
var l1 = document.getElementById("long_1").value;//Fetches value of Longitude1
var l2= document.getElementById("long_2").value;//Fetches value of Longitude2
var d1 = document.getElementById("l1d").value;//Fetches value of Longitude1's direction
var d2 = document.getElementById("l2d").value;//Fetches value of Longitude2's direction
//Calculation for locations on one side of the Prime Meridian
if( d1==d2) { //checks if the direction of the latitudes is same
td = Math.abs(l2-l1);//computes their horizontal difference
tm = td * 4 ;// Miltiplies by 4 to recieve the value of difference in sunrise
//As 1 degree equals 4 minute the operation above returns a value in minutes
hr = Math.floor(tm / 60);// conversion to hours
mn = Math.round(tm % 60);// conversion to minutes
document.getElementById("resultt").innerHTML = hr+" "+"Hours" +"<br>"+mn+" "+"Minutes";}
//Calculation for locations on different sides of the Prime Meridian
else if( d1 != d2) {
td = Math.round(parseInt(l1)+parseInt(l2));
tm = td * 4 ;
hr = Math.floor(tm / 60);
mn = Math.round(tm % 60);
document.getElementById("resultt").innerHTML = hr+" "+"Hours" +"<br>"+mn+" "+"Minutes";}}
</script>
<script type="text/javascript">
$(document).ready(function () {
//only numeric with crl v c x +tab with no spaces
$('input#lat_1,input#long_1,input#lat_2,input#long_2').on('keypress', function (event) {
var keyCode = window.event ? event.keyCode : event.which;
//codes for 0-9
if (keyCode < 48 || keyCode > 57) {
//codes for backspace, delete, enter
if (keyCode !== 0 && keyCode !== 8 && keyCode !== 13 && !event.ctrlKey) {
event.preventDefault();
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="map">
<div class="map__header">
<h3>World Distance Calculator </h3>
<p>Refresh to input new locations for convenience</p>
<a href ="index.html"> <i class="fa fa-repeat cancel active"></i></a>
<span id="title"> Input coordinates of location 1</span>
<p>(The default is set to the location of Google HQ)</p>
<div class="destinations">
<div class="row">
<div class="col-xs-8">
<input type="text" id ="lat_1"class="form-control from" placeholder="Input Latitudes" value="37.3894">
</div>
<div class="col-xs-4">
<select id ="lad1"class="form-control" value="N">
<option>N</option>
<option>S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<input type="text" id ="long_1"class="form-control to" placeholder="Input Longitudes" value=" 122.0819">
</div>
<div class="col-xs-4">
<select id ="l1d"class="form-control" >
<option>W</option>
<option>E</option>
</select>
</div>
</div>
</div>
<span id="title"> Input coordinates of location 2</span>
<p> The default is set to the location of Singapore- the event place for FOSSASIA's 2015 event</p>
<div class="destinations">
<div class="row">
<div class="col-xs-8">
<input type="text" id ="lat_2" class="form-control from" placeholder="Input Latitudes" value="1.3000">
</div>
<div class="col-xs-4">
<select id ="lad2"class="form-control">
<option>N</option>
<option>S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<input id ="long_2" type="text" class="form-control to" placeholder="Input Longitudes" value="103.8000" >
</div>
<div class="col-xs-4">
<select id ="l2d" class="form-control" >
<option>W</option>
<option selected>E</option>
</select>
</div>
</div>
<div class="row" >
<div class="col-xs-6 col-xs-offset-3 swap-destinations">
<i class="fa fa-angle-double-right" type="submit" onclick=" calculateTime(); calculateDistanceinKms(); defualtmsg();" ></i>
</div>
</div>
</div>
</div>
<div class="header2">
<span>The distance & time difference between sunrise </span>
</div>
<div class="map__directions">
<div class="map__directions-step">
<div class="row">
<div class="col-xs-1">
<i class="fa fa-car"></i>
</div>
<div class="col-xs-7">
<span class="title">The Distance </span>
<span class="transit-time">Rounded figures</span>
</div>
<div class="col-xs-4 text-right">
<span class="estimated-time" id="result"></span>
</div>
</div>
</div>
<div class="map__directions-step">
<div class="row">
<div class="col-xs-1">
<i class=" fa fa-clock-o"></i>
</div>
<div class="col-xs-7">
<span class="title">Sunrise difference </span>
<span class="transit-time">(Using GMT)</span>
</div>
<div class="col-xs-4 text-right">
<span class="estimated-time" id="resultt"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>