How do you access Geolocation (or similar) events?

[toadkicker]

It's not clear how one would access the geolocation control's events through Vue. (https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol.event:geolocate) I thought it would be as simple as doing @map-geolocate, @map-trackuserlocationend but neither bubbled up.

[toadkicker]

Also tried:

const geo = this.map.addControl(new mapboxgl.GeolocateControl({ show: true, position: 'top-left', positionOptions: { enableHighAccuracy: true }}));
geo.on('geolocate', this.setAddress);

[LKajan]

Control events are not currently implemented yet. There is a pull request #38 for that though.

[toadkicker]

Ok great I will pull that branch and try it out

[phegman]

Thanks to @LKajan control events have now been implemented. If you pull down the latest NPM package you should be able to use them. Documentation has also been updated to explain how.

[toadkicker]

I upgraded but it doesn't look like it is working properly. Looking at the pull request, it doesn't look like $emit is implemented correctly. According to the docs the second argument is a callback. In PR #38 it is passing this.$emit('geolocate-geolocate', geolocate, position). Instead we would want to probably pass this.$emit('geolocate-geolocate', {event: geolocate, position: position}) so that position isn't dropped from the callback. Maybe I'm just not that familiar with $emit, so if there is something I am missing here please let me know.

Also in this example the final event is called result, but clearly that isn't documented in the control.

[phegman]

Hi Todd,

It looks like the example you sent is referring to the Geocoder control which is actually not built into the main Mapbox library so is not implemented in this Vue component. The Geolocation events are working for me. The Vue $emit event uses the Rest Parameter to allow you to define additional arguments that are passed into the listener’s callback function. This allows you to do this.$emit('geolocate-geolocate', geolocate, position). If you take a look at app.js and index.html you can see an example of how the Geolocation control works. If you want to use the Geocoder control you can listen for the result event in the Mapbox load event.

Hope that is helpful!
Pete