In this tutorial we’ll be using the HTML Geolocation API to display the current location of a user on a map. While this example is quite simple it’s provides solid foundation for creating more complex location-aware web sites and applications.
Let’s get started by creating a new HTML file with the following markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Geolocation API</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>
<body>
<div id="map" style="height: 500px"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>
You’ll notice we’re loading Leaflet an open-source JavaScript library for creating interactive maps. When used in conjunction with OpenStreetMap it’s a powerful alternative to the Google Maps API.
Next create a new JavaScript file called called script.js
. All modern browsers support Geolocation but we’ll still check that the current users browser is supported and display an alert message if that’s not the case:
(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert("Geolocation is not supported by this browser");
}
})();
If Geolocation is supported we use the getCurrentPosition
method to return the users current position. If successful the latitude and longitude are passed to a success()
function otherwise the error()
function is called:
function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
getMap(latitude, longitude);
}
function error() {
alert("Unable to retrieve location");
}
With the users latitude and longitude captured we can create a getMap
function that uses Leaflet to display a map with a marker of the users current location:
function getMap(latitude, longitude) {
const map = L.map("map").setView([latitude, longitude], 5);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
L.marker([latitude, longitude]).addTo(map);
}
Open the HTML file in a browser (you’ll need to allow the file to know you location). If everything worked correctly you should see a map with your current location marked:
Top comments (0)