-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (124 loc) · 4.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPS generation</title>
<style>
*{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: beige;
}
#input{
border: solid cadetblue 5px;
border-radius: 10px;
width: 325px;
height: 30px;
}
#position{
background-color: cadetblue;
}
#generation{
background-color: indianred;
}
.btn{
margin: 30px;
padding: 15px;
border-radius: 10px;
}
#github{
text-decoration: none;
padding: 15px;
border: 5px solid black;
border-radius: 10px;
color: black;
margin-left: 90px;
}
#github-logo{
max-width: 40px;
}
</style>
</head>
<body>
<h1>GPS generation</h1>
<b>A generator of GPS coordinates in a given radius away from your position.</b>
<p>Radius of the square (m) : </p>
<input type="text" class="radiusInput" placeholder="Radius" id="input">
<p>Your Latitude</p>
<input type="text" class="latitude" placeholder="Latitude" id="input">
<p>Your Longitude</p>
<input type="text" class="longitude" placeholder="Longitude" id="input">
<br>
<button id="position" onclick="getLocation()" class="btn">Get position</button>
<button id="generation" onclick="generate()" class="btn">Generate</button>
<p id="show_pos"></p>
<a href="https://github.com/Clepalitto/GPS-generation" id="github"> <img src="icons8-github-120.png" alt="github logo" id="github-logo">Source</a>
<script>
// source of function : MDN Web Docs
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
///////////////////////// From W3schools (getLocation function)
var p_pos = document.getElementById("show_pos");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
p_pos.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
p_pos.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
/////////////////////////
function meters_to_degres(meters) {
console.log('Meters_to_degres')
meter = 360/40007863;
console.log('1 meter = '+meter);
let ret = meters * meter;
console.log(meters+'m = '+ret+'°');
return ret
}
function generate() {
let radiusInput = document.querySelector('.radiusInput');
let latitude = document.querySelector('.latitude');
let longitude = document.querySelector('.longitude');
let radius = Number(radiusInput.value);
radius = meters_to_degres(radius);
let lat= Number(latitude.value);
let long = Number(longitude.value);
// latitude
let minLatitude = lat - radius;
let maxLatitude = lat + radius;
console.log('min lat : '+minLatitude);
console.log('max lat : '+maxLatitude);
// longitude
let minLongitude = long - radius;
let maxLongitude = long + radius;
console.log('min long : '+minLongitude);
console.log('max long : '+maxLongitude);
var randomLatitude = getRandomArbitrary(minLatitude, maxLatitude);
var randomLongitude = getRandomArbitrary(minLongitude, maxLongitude);
console.log('random lat : '+randomLatitude);
console.log('random long : '+randomLongitude);
let finalLatitude = randomLatitude;
let finalLongitude = randomLongitude;
if (finalLatitude < -90 || finalLatitude > 90) {
alert('The Latitude is two high or two low.')
}
if (finalLongitude < -90 || finalLongitude > 90) {
alert('The Latitude is two high or two low.')
}
console.log('final latitude : '+finalLatitude);
console.log('final longitude : '+finalLongitude);
//links
let openstreetmap = "https://www.openstreetmap.org/search?query=";
let google = "https://maps.google.com?q=";
let ggmaplink = String(openstreetmap + finalLatitude + "," + finalLongitude);
open(ggmaplink);
}
</script>
</body>
</html>