How to add marker to mapbox using mapboxgl.GeolocateControl - geolocation

Question

I would like to add a marker after the user locate himself.
I try to listen to the geolocate event but no marker is added.
How should I proceed ?
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
watchPosition: true
}
}));
map.on('geolocate ', () => {
map.loadImage('images/pin2.png', (error, image, data) => {
if (error) throw error;
console.log(data);
map.addImage('pin2', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [data.position]
}
}]
}
},
"layout": {
"icon-image": "pin2",
"icon-size": 1
}
});
});
});

Answer 1

The geolocate event is actually bound together with the geolocate object not the map object
let geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
watchPosition: true
}
});
map.addControl(geolocate);
geolocate.on('geolocate', (e) => {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
console.log(e)
if (error) throw error;
map.addImage('cat', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [e.coords.longitude, e.coords.latitude]
}
}]
}
},
"layout": {
"icon-image": "cat",
"icon-size": 0.3
}
});
});
});
take a look at the working JSbin