Untitled
unknown
javascript
3 years ago
8.9 kB
3
Indexable
<!DOCTYPE html>
<html lang="en-US">
<!-- BEGIN HEAD ELEMENT -->
<!-- THIS CONTAINS THE METADATA ABOUT THE PROJECT -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/random-geolocation-change/assets/css/style.css?v=1.0" />
<link rel="stylesheet" href="/random-geolocation-change/style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="data.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/random-geolocation-change/favicon.ico" />
<!-- Setup theme-color -->
<!-- start theme color meta headers -->
<meta name="theme-color" content="#151515" />
<meta name="msapplication-navbutton-color" content="#151515" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- end theme color meta headers -->
<!-- Begin Jekyll SEO tag v2.7.1 -->
<title>Random Geolocation Change | random-geolocation-change</title>
<meta name="generator" content="Jekyll v3.9.0" />
<meta property="og:title" content="Random Geolocation Change" />
<meta property="og:locale" content="en_US" />
<link rel="canonical" href="https://warns.github.io/random-geolocation-change/" />
<meta property="og:url" content="https://warns.github.io/random-geolocation-change/" />
<meta property="og:site_name" content="random-geolocation-change" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Random Geolocation Change" />
<script type="application/ld+json">
{
"url": "https://warns.github.io/random-geolocation-change/",
"@type": "WebSite",
"headline": "Hisham, Ammar, Kenan Random Geolocation Change Project",
"name": "random-geolocation-change",
"@context": "https://schema.org"
}
</script>
<!-- End Jekyll SEO tag -->
</head>
<!-- END OF HEAD ELEMENT -->
<!-- BEGIN BODY ELEMENT-->
<!-- THIS CONTAINS THE MAIN COMPONENTS OF THE PROJECT WEBPAGE -->
<body style="
margin: 50px;
padding: 0;
background: #151515 url(../assets/images/bkg.png) 0 0;
color: #b5e853;
font-size: 16px;
line-height: 1.5;
font-family: monospace;
">
<header>
<div class="container" style="
border-bottom: dashed 1px;
border-color: #b5e853;
padding-bottom: 35px;
">
<a id="a-title" href="/">
<h1 style="font-family: monospace">./random-geolocation-change</h1>
</a>
<h2></h2>
<section id="downloads">
<button type="button">
<a href="https://github.com/Warns/random-geolocation-change" style="font-family: monospace; text-decoration: none">
View on GitHub <i class="fa fa-github"></i></a>
</button>
</section>
</div>
</header>
<div class="container">
<section id="main_content">
<h2 style="font-family: monospace; padding-top: 10px" id="vpn-geolocation">
Hisham, Ammar, Kenan Random Geolocation Change Project
</h2>
<p style="font-family: monospace; color: white">
We built this project using
<a style="color: dodgerblue" href="https://developers.google.com/maps/documentation/javascript/geolocation">Google’s Geolocation API</a>
and
<a style="color: dodgerblue" href="https://nordvpn.com">NordVPN API</a>
to locate the current location of the viewer and the location based on the VPN server location.
</p>
<html>
<head>
<title>Random Geolocation Change Project</title>
</head>
<body>
<h2 style="font-family: monospace">Check my current location</h2>
<!-- ADDING BUTTONS TO SHOW LOCATION DEPENDING ON CURRENT LOCATION AND VPN SERVER -->
<button class="w3-button w3-red" onclick="getlocation();" style="margin: 0px 0px 20px 0px; font-family: monospace">
Show Current Position <i class="fas fa-map-marker-alt"></i>
</button>
<button class="w3-button w3-red" onclick="getAnotherlocation();" style="margin: 0px 0px 20px 0px; font-family: monospace">
Connect to a VPN Server <i class="fas fa-map-marker-alt"></i>
</button>
<div id="demo" style="height: 250px; position: relative; overflow: hidden"></div>
<div class="log"></div>
<!-- CALLING GOOGLE GEOLOCATION API TO USE FOR MAP NAVIGATION DEPENDING ON VPN LOCATION -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4xtEoXBaKsiQZ6smXXbU7ufYNxeTOBFc&v=weekly"></script>
<!-- THIS IS THE START OF THE JAVASCRIPT CODE -->
<script type = "text/javascript" >
var canClick = true;
var log = document.querySelector(".log");
var current;
// THIS FUNCTION WILL REQUEST ACCESS TO VIEW YOUR CURRENT LOCATION
function getlocation() {
// IF YOUR BROWSER ALLOWS LOCATION SHARING THEN IT WILL WORK
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPos, showErr);
log.innerHTML = "<p>Connected to your location...</p>";
}
// ELSE IF YOUR BROWSER DOES NOT SUPPORT LOCATION SHARING THEN IT WILL ERROR WITH THE FOLLOWING MESSAGE
else {
alert("Sorry! your Browser does not support Geolocation API");
}}
// THIS FUNCTION WILL USE NORDVPN SERVERS TO CONNECT TO A VPN LOCATION
function getAnotherlocation() {
if (canClick) {
canClick = false;
// THIS IS DECLARING THE VARIABLE TO USE FOR THE VPN SERVERS IN THE API
var current = VPNConnector.getVPNServers(
"https://nordvpn.com/api/server"
);
var VPNlocations = locations;
var currentVPNlocation = VPNlocations[current];
// HERE WE ARE ASSIGNING THE POSITION DEPENDING ON LATITUDE AND LONGITUDE IN THE VPN SERVERS.
var position = {
coords: {
latitude: currentVPNlocation.coords.lat,
longitude: currentVPNlocation.coords.lng,
},
};
log.innerHTML = "<p>Connecting to VPN server...</p>";
// HERE WE ARE SHOWING THE CURRENT CONNECTED VPN SERVERS AS LOG CONSOLE OUTPUT
setTimeout(function() {
log.innerHTML =
"<p>Your current geolocation is:</p>" +
"<p>Latitude: " +
currentVPNlocation.coords.lat +
"</p>" +
"<p>Longitude: " +
currentVPNlocation.coords.lng +
"</p>" +
"<p>City: " +
currentVPNlocation.city +
"</p>";
showPos(position);
canClick = true;
}, 2000 + Math.random() * 2000);
}}
// THIS FUNCTION IS RESPONSIBLE FOR SHOWING THE LOCATION OF THE VPN SERVER ON THE MAP
function showPos(position) {
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
// THIS VARIABLE IS RESPONSIBLE FOR THE SIZE OF THE MAP AND ZOOM LEVEL
var myOptions = {
center: lattlong,
zoom: 10,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
},
};
var maps = new google.maps.Map(
document.getElementById("demo"),
myOptions
);
// THIS VARIABLE IS ADDING THE MARKER ON THE MAP TO SHOW THE EXACT LOCATION
var markers = new google.maps.Marker({
position: lattlong,
map: maps,
title: "You are here!",
});
}
// THIS FUNCTION HANDLES ANY ERRORS THAT HAPPENS ON THE FUNCTIONS ABOVE DEPENDING ON CASES
function showErr(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation API.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}}
</script>
<!-- THIS IS THE END OF JAVASCRIPT CODE-->
</body>
</html>
</section>
</div>
</body>
</html>Editor is loading...