Allow GeolocateControl's geolocation to be triggered programmatically

[fvgs]

Motivation

The Geolocate control allows the user's location to be obtained when the user clicks on the associated UI button. However, there is currently no way to have the geolocate functionality trigger when the map first loads.

At present, the map loads and displays the default location it is given. It would be useful to trigger the geolocate functionality on load so the map automatically centers on the user's location without the user first having to click the Geolocate control button.

Design Alternatives

This is my current solution:

const geolocate = new mapboxgl.GeolocateControl(...)
map.addControl(geolocate)
setTimeout(geolocate._onClickGeolocate.bind(geolocate), 5)

The logic performed by addControl is not entirely synchronous, therefore, it is necessary to delay calling _onClickGeolocate until the relevant DOM elements exist.

This solution is not ideal as it requires calling a private method and introduces a race condition mediated by an arbitrary time delay.

Design

Two proposals:

• Add option to have the geolocation functionality trigger when the control is added to the map
• Expose public method on GeolocateControl allowing the programmer to trigger the geolocation functionality, along with a ready event that is fired once the GeoLocate control has been added to the map and all DOM elements have been created.

The latter proposal offers more flexibility to the programmer, while the former is more restrictive and only affords the programmer the additional ability to have the geolocate functionality trigger when the control is first added.

I am in favor of the second proposal as it enables the programmer to trigger geolocation at any time after the control has been added to the map as opposed to just initially.

[andrewharvey]

I am in favor of the second proposal as it enables the programmer to trigger geolocation at any time after the control has been added to the map as opposed to just initially.

👍 I prefer the second option. Did you want to put this together in a PR?

[jensbroecher]

This is not possible? It's a deal breaker.

Found this simple hack:

setTimeout(function() {
    $(".mapboxgl-ctrl-geolocate").click();
},5000);

[andrewharvey]

@fvgs I'm working on a PR at #6205, would be great if you could take a look and review please?

[amirping]

simple hack

let geoTracker = new mapboxgl.GeolocateControl(...);
map.addControl(geoTracker);
geoTracker._geolocateButton.click();

[BloodSugar327]

@amirping I think that GeolocateControl can now be triggered thanks to @andrewharvey

https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol#trigger

Using example in original post:

const geolocate = new mapboxgl.GeolocateControl(...)
map.addControl(geolocate)

Set up load map event listener
This will ensure GeolocateControl has been added to the map already before we call it
https://www.mapbox.com/mapbox-gl-js/api/#map#on

map.on('load', function()
{
	geolocate.trigger();
});

Set up event listener for when a new location has been obtained
https://www.mapbox.com/mapbox-gl-js/api/#evented#on
https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol.event:geolocate

geolocate.on('geolocate', function()
{

//Get the updated user location, this returns a javascript object.
var userlocation = geolocate._lastKnownPosition;

//Your work here - Get coordinates like so
var lat = userlocation.coords.latitude;
var lng = userlocation.coords.longitude;

});

I'm still a beginner at this, so any helpful comments welcomed.

[FernandoKGA]

@BloodSugar327 Thank you so much, I was trying to understing how I could do this!

[Kacri]

¿Esto no es posible? Es un factor decisivo.

Encontré este simple truco:

setTimeout(function() {
    $(".mapboxgl-ctrl-geolocate").click();
},5000);

thanks,