I am setting up a map which will have the store locations nearer to the current location of the user. But I am unable to get that done. I went through the documentation but I couldn't find anything helpful regarding my problem. What I want If I click on the find the location then it should show me the stores nearer to me.

I have already tried putting a static longitude and latitude and it works fine. I want it to be dynamic.

mapboxgl.accessToken = 'THE_ACCESS_TOKEN';

// This adds the map to your page

var map = new mapboxgl.Map({
// container id specified in the HTML
  container: 'map',

   // style URL
  style: 'mapbox://styles/mapbox/light-v10',

 // initial position in [lon, lat] format
  center: [78.3430302, 17.449968],

 // initial zoom

 zoom: 14
});

In the Center, I want dynamic longitude and latitude value (Current location). So that it will show me the stores nearer to my location.

I am setting up a map which will have the store locations nearer to the current location of the user. But I am unable to get that done. I went through the documentation but I couldn't find anything helpful regarding my problem. What I want If I click on the find the location then it should show me the stores nearer to me.

I have already tried putting a static longitude and latitude and it works fine. I want it to be dynamic.

mapboxgl.accessToken = 'THE_ACCESS_TOKEN';

// This adds the map to your page

var map = new mapboxgl.Map({
// container id specified in the HTML
  container: 'map',

   // style URL
  style: 'mapbox://styles/mapbox/light-v10',

 // initial position in [lon, lat] format
  center: [78.3430302, 17.449968],

 // initial zoom

 zoom: 14
});

In the Center, I want dynamic longitude and latitude value (Current location). So that it will show me the stores nearer to my location.

• javascript
• mapbox
• mapbox-gl-js
• mapbox-gl

• Take a look at the Geolocation API developer.mozilla.org/en-US/docs/Web/API/Geolocation_API – Daniel Doblado Commented Jan 28, 2019 at 16:13

5 Answers 5

Javascript has a geolocation API that you can use without importing additional dependencies, which will provide you with the user's location in terms of latitude and longitude, you can check more information here.

User will have to give permissions to the web app to access to their location. A quick sample of how you can get coordinates in your code:

if ("geolocation" in navigator) { 
    navigator.geolocation.getCurrentPosition(position => { 
        console.log(position.coords.latitude, position.coords.longitude); 
    }); 
} else { /* geolocation IS NOT available, handle it */ }

UPDATE: Incorporating the geolocation code to your code would be something like this (check if it goes as latitude, longitude or the other way around):

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

// This adds the map to your page

if ("geolocation" in navigator) { 
    navigator.geolocation.getCurrentPosition(position => { 
        var map = new mapboxgl.Map({
        // container id specified in the HTML
          container: 'map',

           // style URL
          style: 'mapbox://styles/mapbox/light-v10',

         // initial position in [lon, lat] format
          center: [position.coords.longitude, position.coords.latitude],

         // initial zoom

         zoom: 14
        });
    }); 
} else { /* geolocation IS NOT available, handle it */ }

The other solutions are fine, but the easiest way is using Mapbox's GeolocateControl plugin. There's a complete example here: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/

After the initial setup it's as simple as:

map.addControl(new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
    trackUserLocation: true
}));

if ( navigator.geolocation ) 
{
    navigator.geolocation.getCurrentPosition( function(position) {

        var lng = position.coords.longitude;
        var lat = position.coords.latitude;                    

        mapboxgl.accessToken = 'pk.eyJ1IjoiYW50ZWxvdmUxOSIsImEiOiJja2d1azl4ZmgwY3dvMnJueGljMnp6YnprIn0.aIRE0Ii2AmWYWCW5Z3cEFg';

        var map = new mapboxgl.Map({
            container: 'map',          
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [ lng, lat ], // [ lng, lat ]
            zoom: 12
        });

    });
}

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

<div id="map" ></div>

I've got the same issue. The solution is not in the docs of Mapbox (or I didn't find them):

const geolocateControl = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true,
  showUserHeading: true
});

map.addControl(
  geolocateControl,
  'bottom-left'
);

geolocateControl.on('geolocate', (event) => {
  const latitude = event.coords.latitude;
  const longitude = event.coords.longitude;

  console.log(latitude, longitude);
  // Do something more with lat & long here :)
});

Mapbox's offers a GeolocateControl plugin that uses JS's geolocation API under the hood.

Eg from the docs:

const geolocate = new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
});

// add the geolocate control to the map (