Skip to content

Commit

Permalink
split out values into a table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lewis-Moten
Lewis-Moten committed Apr 9, 2024
1 parent a365699 commit 9c3d69d
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 60 deletions.
200 changes: 154 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<script src="index.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbyT-nyl6DM7uOwBqMXkqWj8aQk89ydAw&callback=initMap&v=weekly"
defer
></script>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
textarea {
width: 100%;
}
#MapArea {
background-color: #cccccc;
width: 100%;
border: 1px solid black;
height: 200px;
}
</style>
</head>
<body>
<h1>Geolocation</h1>
<button id="GetCurrentPosition">Get Current Position</button>
<button id="WatchPosition">Watch Position</button>
<button id="ClearWatch" disabled>Clear Watch</button>
<br />
<table>
<thead>

<head>
<title>Geolocation</title>
<script src="index.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbyT-nyl6DM7uOwBqMXkqWj8aQk89ydAw&callback=initMap&v=weekly"
defer></script>
<style>
table {
border-collapse: collapse;
}

table,
th,
td {
border: 1px solid black;
}

th,
td {
padding: 5px;
}

td {
vertical-align: top;
}

th {
text-align: left;
}

#CoordinatesTextArea {
width: 100%;
height: 400px;
}

#MapArea {
background-color: #cccccc;
width: 100%;
border: 1px solid black;
}
</style>
</head>

<body>
<h1>Geolocation</h1>
<button id="GetCurrentPosition">Get Current Position</button>
<button id="WatchPosition">Watch Position</button>
<button id="ClearWatch" disabled>Clear Watch</button>
<br />
<table>
<thead>
<tr>
<td>Maximum Age</td>
<td>Timeout</td>
Expand All @@ -49,21 +62,116 @@ <h1>Geolocation</h1>
<tr>
<td valign="top">
<input type="radio" name="maximumAge" value="gps" checked>Attempt to get from GPS<br />
<input type="radio" name="maximumAge" value="mixed"><input id="MaximumAgeMS" value="400" size="3"> milliseconds or less<br />
<input type="radio" name="maximumAge" value="mixed"><input id="MaximumAgeMS" value="400" size="3">
milliseconds or less<br />
<input type="radio" name="maximumAge" value="cached">Cached only<br />
</td>
<td valign="top">
<input type="radio" name="timeout" value="never" checked>Never<br />
<input type="radio" name="timeout" value="limited"><input id="TimeoutMS" value="400" size="3"> milliseconds<br />
<input type="radio" name="timeout" value="limited"><input id="TimeoutMS" value="400" size="3">
milliseconds<br />
</td>
<td valign="top">
<input type="radio" name="highAccuracy" value="true">Yes<br />
<input type="radio" name="highAccuracy" value="false" checked>No
</td>
</tr>
</tbody>
</table>
<textarea id="CoordinatesTextArea" rows="10" cols="70"></textarea><br />
<div id="MapArea"></div>
</body>
</html>
</table>
<table>
<thead>
<tr>
<td>Measurement</td>
<td>Value</td>
<td>Converted</td>
</tr>
</thead>
<tbody>
<tr>
<td>Latitude</td>
<td>
<span id="LatitudeDD"></span><br />
Decimal Degrees
</td>
<td>
<span id="LatitudeDMS"></span>
</td>
</tr>
<tr>
<td>Longitude</td>
<td>
<span id="LongitudeDD"></span><br />
Decimal Degrees
</td>
<td>
<span id="LongitudeDMS"></span>
</td>
</tr>
<tr>
<td>Accuracy</td>
<td>
<span id="AccuracyM"></span><br />
Meters
</td>
<td>
<span id="AccuracyF"></span>
</td>
</tr>
<tr>
<td>Altitude</td>
<td>
<span id="AltitudeM"></span><br />
Meters
</td>
<td>
<span id="AltitudeF"></span>
</td>
</tr>
<tr>
<td>Altitude Accuracy</td>
<td>
<span id="AltitudeAccuracyM"></span><br />
Meters
</td>
<td>
<span id="AltitudeAccuracyF"></span>
</td>
</tr>
<tr>
<td>Heading</td>
<td>
<span id="HeadingD"></span><br />
Degrees
</td>
<td>
<span id="HeadingC"></span>
</td>
</tr>
<tr>
<td>Speed</td>
<td>
<span id="SpeedMetersPerSecond"></span><br />
Meters per second
</td>
<td>
<span id="SpeedMilesPerHour"></span>
Miles per hour
</td>
</tr>
<tr>
<td>Timestamp</td>
<td>
<span id="TimestampU"></span><br />
Unix Time
</td>
<td>
<span id="TimestampL"></span>
Locale Time
</td>
</tr>
</tbody>
</table>
<div id="MapArea"></div>
<pre id="CoordinatesTextArea"></pre>
</body>
</html>
63 changes: 49 additions & 14 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ var googleMaps_marker;
var marker;

function show(text) {
CoordinatesTextArea.value = text;
CoordinatesTextArea.innerText = text;
}

function getOptions() {
Expand Down Expand Up @@ -79,19 +79,24 @@ function decimalDegreesToDegreesMinutesSeconds(dd) {
var degrees = Math.floor(dd);
var minutes = Math.floor((dd - degrees) * 60);
var seconds = (((dd - degrees) * 60) - minutes) * 60;
seconds = Math.floor(seconds * 10000) / 10000;
return `${degrees}\u00B0 ${minutes}' ${seconds}"`;
}

function metersToFeet(meters) {
if(meters === null || meters === undefined) return '0 feet';
return `${meters / 0.3048} feet`;
if(meters === null || meters === undefined) return '0\' 0"';
var feet = meters / 0.3048;
var inches = (feet - Math.floor(feet)) * 12;
feet = Math.floor(feet);
inches = Math.floor(inches * 10) / 10;
return `${feet}' ${inches}"`;
}

function metersPerSecondToMilesPerHour(meters) {
if(meters === null || meters === undefined) return '0 miles per hour';
if(meters === null || meters === undefined) return 0;
var metersPerHour = meters * 3600;
var feetPerHour = metersPerHour / 0.3048;
return `${Math.floor((feetPerHour / 5280) * 100)/100} miles per hour`;
return Math.floor((feetPerHour / 5280) * 100)/100;
}

function degreesToCardinalDirection(degrees) {
Expand Down Expand Up @@ -120,16 +125,46 @@ function successHandler(position) {
var heading = position.coords.heading;
var altitude = position.coords.altitude;
var speed = position.coords.speed;
var timestamp = position.timestamp;

show(`Latitude: ${latitude} Decimal Degrees (${decimalDegreesToDegreesMinutesSeconds(latitude)})
Longitude: ${longitude} Decimal Degrees (${decimalDegreesToDegreesMinutesSeconds(longitude)})
Accuracy: ${accuracy} meters (${metersToFeet(accuracy)})
Altitude: ${altitude} meters (${metersToFeet(altitude)})
Altitude Accuracy: ${altitudeAccuracy} meters (${metersToFeet(altitudeAccuracy)})
Heading: ${heading} degrees (${degreesToCardinalDirection(heading)})
Speed: ${speed} meters per second (${metersPerSecondToMilesPerHour(speed)})
Timestamp: ${position.timestamp} (${new Date(position.timestamp).toLocaleString()})
`);
var latitudeDMS = decimalDegreesToDegreesMinutesSeconds(latitude);
var longitudeDMS = decimalDegreesToDegreesMinutesSeconds(longitude);
var accuracyF = metersToFeet(accuracy);
var altitudeF = metersToFeet(altitude);
var altitudeAccuracyF = metersToFeet(altitudeAccuracy);
var headingC = degreesToCardinalDirection(heading);
var speedMilesPerHour = metersPerSecondToMilesPerHour(speed);
var localeTime = new Date(timestamp).toLocaleString();

document.getElementById("LatitudeDD").textContent = latitude;
document.getElementById("LatitudeDMS").textContent = latitudeDMS;
document.getElementById("LongitudeDD").textContent = longitude;
document.getElementById("LongitudeDMS").textContent = longitudeDMS;
document.getElementById("AccuracyM").textContent = accuracy;
document.getElementById("AccuracyF").textContent = accuracyF;
document.getElementById("AltitudeM").textContent = altitude;
document.getElementById("AltitudeF").textContent = altitudeF;
document.getElementById("AltitudeAccuracyM").textContent = altitudeAccuracy;
document.getElementById("AltitudeAccuracyF").textContent = altitudeAccuracyF;
document.getElementById("HeadingD").textContent = heading;
document.getElementById("HeadingC").textContent = headingC;
document.getElementById("SpeedMetersPerSecond").textContent = speed;
document.getElementById("SpeedMilesPerHour").textContent = speedMilesPerHour;
document.getElementById("TimestampU").textContent = timestamp;
document.getElementById("TimestampL").textContent = localeTime;

show(JSON.stringify({
coords: {
latitude,
longitude,
accuracy,
altitude,
altitudeAccuracy,
heading,
speed,
},
timestamp
}, null, '\t'));

var googlePosition = {
lat: latitude,
Expand Down

0 comments on commit 9c3d69d

Please sign in to comment.