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.
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.
Two proposals:
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.
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.
:+1: I prefer the second option. Did you want to put this together in a PR?
This is not possible? It's a deal breaker.
Found this simple hack:
setTimeout(function() {
$(".mapboxgl-ctrl-geolocate").click();
},5000);
@fvgs I'm working on a PR at #6205, would be great if you could take a look and review please?
simple hack
let geoTracker = new mapboxgl.GeolocateControl(...);
map.addControl(geoTracker);
geoTracker._geolocateButton.click();
@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.
@BloodSugar327 Thank you so much, I was trying to understing how I could do this!
Most helpful comment
@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:
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
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
I'm still a beginner at this, so any helpful comments welcomed.