HTML 5 GeoLocation API

Advertisements
Advertisements

HTML 5 geolocation API is very popular method to get access to location of user if the user browser supports geolocation feature.
It uses various techniques to get the location information

  • GPS,
  • GSM/3G triangulation,
  • Wifi,
  • IP address, etc.

Consider the following code that find location of user in terms of latitude and longitude.

<p id="msg">Click the Button to Get Your Position:</p>
<button onclick="getLocation()">Find Me</button>

JavaScript Code

JavaScript Code
<script>
     var displayCoords=document.getElementById("msg");
     function getLocation() {
          if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
          } else {
          displayCoords.innerHTML="Geolocation API not supported by your browser.";
          }
         }
     function showPosition(position) {
          displayCoords.innerHTML="Latitude: " + position.coords.latitude +
          "<br />Longitude: " + position.coords.longitude;
     }
</script>

Important features:

  1. Navigator
  2. Geolocation
  3. Function getCurrentPosition()
  4. Position object
  5. Coords.latitude
  6. Coords.longitude

You can also use the above coordinates to display the location using Google Maps.

Advertisements

Geolocation with Maps-Leaflet.js

You can get location on google maps using the latitude and longitude values returned by the geolocation.getCurrentPosition function.

<html>
<head>
<meta charset="utf-8">
<title>Geolocation with Leaflet.js</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
<style>
html, body {
  height: 100%
}

.map {
  height: 300px;
}

.btn {
  background-color: darkred;
  border: 0;
  color: #000;
  padding: 20px;
  text-shadow: 0 0 1px rgba(0, 0, 0, .4);
  text-decoration: none;
  margin:20px auto;
  display: inline-block;
}
</style>
</head>
<body>
  <a href="#" id="show" class="btn">Show Map</a>
  <div id="map" class="map"></div> 
  <script>
  // Get current position successfully
function success(position) {
  var map, marker,
      latitude = position.coords.latitude,
      longitude = position.coords.longitude;
  
  // Instance map using leaflet
  map = L.map('map').setView([latitude, longitude], 13);
  
  // Tile layer using key api at cloudmade.com
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    key: '760506895e284217a7442ce2efe97797',
    styleId: 103288,
    maxZoom: 16
  }).addTo(map);

  // Marker using leaflet
  marker = L.marker([latitude, longitude]).addTo(map);

  // Popup in leaflet
  marker.bindPopup('<p>Your location</p>').openPopup();
}

// Get current position fail
function error() {
  alert('Get current position fail. Please access codepen to get geolocation.');
}

// Init load document
var show = document.getElementById('show');

show.addEventListener('click', function(e) {
  e.preventDefault();
  if (!navigator.geolocation) {
    console.log("Browser doesn't support geolocation");
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }
}, false);
  </script>
</body>
</html>
Advertisements
Advertisements
Advertisements