index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body onload="getUserLocation();">
<div id="map"></div>
<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoicHVzaGthci1kamFuZ28tbWFwcyIsImEiOiJjazNlMWhtNG0xYjV1M2RzMTBlM2Rnd2dkIn0.l8Q-dN41hMAKJfZ3MhqL-g';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [74.224403, 16.694169], // starting position
        zoom: 5 // starting zoom
    });
	

  // create marker
  var marker = new mapboxgl.Marker({
    'color': '#314ccd'
  });

  
  // Locate user.
  function getUserLocation(){
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      console.log("Geolocation is not supported by this browser.");
    }
  }

  var lat = null;
  var lng = null;
  function showPosition(position) {
    user_coordinates = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    lat = user_coordinates.lat; 
    lng = user_coordinates.lng;
    latlng = [lng,lat];
    console.log('User location : ',latlng);
    marker.setLngLat(latlng).addTo(map)
	flyToStore(lat,lng)
  }
  
   function flyToStore(lat,lng) {
    map.flyTo({
        center: [lng,lat],
        zoom: 10
      });
  }
  
	
</script>

</body>
</html>