Geoloc Realtime
How do I make an geoloc realtime?
What is a geoloc realtime? How do you make a geoloc realtime? This script and codes were developed by Robic on 27 January 2023, Friday.
Geoloc Realtime - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Geoloc Realtime</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <div class="block" data-lat="50.838987770389735" data-lng="4.352884590625764"> <p class="meter"></p>
<p class="error"></p>
</div> <script src="js/index.js"></script>
</body>
</html>
Geoloc Realtime - Script Codes JS Codes
function get_geoloc(){ return navigator.geolocation.watchPosition(success, error)
}
get_geoloc()
if ( navigator.geolocation.watchPosition() ) get_geoloc()
function success(pos) { let crd = pos.coords; console.log(crd) let lat = crd.latitude let lng = crd.longitude let meter = crd.accuracy //return [lat, lng] console.log(crd.latitude, crd.longitude, crd.accuracy) const block = document.querySelector('.block') console.log(block) const div = document.createElement('p') block.appendChild(div) div.innerText = crd.latitude + ' ' + crd.longitude getDistanceFromLatLonInKm(crd.latitude, crd.longitude, 50.838987770389735, 4.352884590625764)
}
function error(err) { document.querySelector('.error').innerText = `ERROR(${err.code}): ${err.message}`
};
function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) { var R = 6371; // Radius of the earth in km var dLat = deg2rad(lat2-lat1); // deg2rad below var dLon = deg2rad(lon2-lon1); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2) ; var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; // Distance in km var meter = d * 1000; meter = meter.toFixed(2) //return d; console.log(meter + 'm'); document.querySelector('.meter').innerText = meter + 'm'
}
function deg2rad(deg) { return deg * (Math.PI/180)
}
![Geoloc Realtime - Script Codes](http://shots.codepen.io/AudreyRBC/pen/rGLoYv-512.jpg)
Developer | Robic |
Username | AudreyRBC |
Uploaded | January 27, 2023 |
Rating | 3 |
Size | 2,064 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Multifiltre | 3,450 Kb |
Tickets counter | 2,076 Kb |
Multi-range Jquery | 3,166 Kb |
Ajax utick | 2,233 Kb |
A Pen by Robic | 2,548 Kb |
Select with popup | 5,674 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Simple content swap | Snografx | 1,859 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!