JS Geolocator

Developer
Joshua P. Larson
Size
2,653 Kb
Views
40,480
  1. JS Geolocator Previews
  2. JS Geolocator HTML Codes
  3. JS Geolocator CSS Codes
  4. JS Geolocator JS Codes

How do I make an js geolocator?

Uses the visitor location and the Haversine formula to determine which out of a list of four locations is the closest.. What is a js geolocator? How do you make a js geolocator? This script and codes were developed by Joshua P. Larson on 23 July 2022, Saturday.

JS Geolocator Previews
IQ Test

JS Geolocator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Geolocator</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="jumbotron"> <h1>JS Geolocator</h1> <p> Determine which item in an array is closest to your current location using the Haversine function. </p> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <h2>Locations</h2> <ul id="locations" class="list-group"></ul> </div> <div class="col-sm-6"> <h2>Closest to You</h2> <p id="closest" class="alert alert-success"></p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JS Geolocator - Script Codes CSS Codes

html, body { width: 100%; height: 100%; padding-top: 1em;
}
.jumbotron { background: radial-gradient(400px 200px, #eeeeee, #ccddee);
}

JS Geolocator - Script Codes JS Codes

$(document).ready(function() { $.each(locations, function(i, el) { $('<li />').html(el.name).addClass('list-group-item').appendTo('#locations'); });
});
var locations = [{ name : 'New York City', lat : 40.714353, lng : -74.005973
},{ name : 'Sydney', lat : -33.867487, lng : 151.206990
},{ name : 'Los Angeles', lat : 34.052234, lng : -118.243685
},{ name : 'Houston', lat : 29.760193, lng : -95.369390
}];
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(calculate);
}
function toRad(Value) { /** Converts numeric degrees to radians */ return Value * Math.PI / 180;
}
function haversine(lat1, lat2, lng1, lng2) { rad = 6372.8; // for km Use 3961 for miles deltaLat = toRad(lat2-lat1); deltaLng = toRad(lng2-lng1); lat1 = toRad(lat1); lat2 = toRad(lat2); a = Math.sin(deltaLat/2) * Math.sin(deltaLat/2) + Math.sin(deltaLng/2) * Math.sin(deltaLng/2) * Math.cos(lat1) * Math.cos(lat2); c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); return rad * c;
}
function calculate(position) { var lat1 = position.coords.latitude; var lng1 = position.coords.longitude; var result = {}, d; for (var i = 0; i < locations.length; i++) { d = haversine( lat1, locations[i].lat, lng1, locations[i].lng); if ((result.distance && d < result.distance) || !result.distance){ result.distance = d; result.location = locations[i]; } } console.log("Result: " + result.location.name); $('#closest').html(result.location.name);
}
JS Geolocator - Script Codes
JS Geolocator - Script Codes
Home Page Home
Developer Joshua P. Larson
Username jplhomer
Uploaded July 23, 2022
Rating 3
Size 2,653 Kb
Views 40,480
Do you need developer help for JS Geolocator?

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!

Joshua P. Larson (jplhomer) Script Codes
Name
Verge-Style Homepage Tiles
Fixed Nav HoverIntent Example
Responsive HTML Timeline
Webkit Text Masking
Populate Native HTML Datalist with AJAX
Animated Donut Chart
Seamless Scrolling Background
CSS-Only Art Direction
Hey React
Lightweight Quiz Widget
Create amazing blog posts with AI!

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!