functions/events using Mapbox API Geocoder Marker

1
votes

I'm asking this because I have done this in Google Maps API, but haven't found any documentation for this on Mapbox API so far. I would like to be able to create functions with the geocoder marker. The closest thing I found about manipulating the marker was changing the color of the marker:

var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: {
color: 'orange'
},
mapboxgl: mapboxgl
});

However, I want to be able to reference the marker so that I can create functions based on onmouseenter and onmouseleave events. Any suggestions? Thanks a bunch.

2
mapboxmapbox-gl-jsmapbox-glmapbox-markergeocoder

2 Answers

1
votes

At the moment there is no documented way to access the Marker that the MapboxGeocoder control adds to the map.

Although not part of the public API, you can access the marker through geocoder.mapMarker, though because this isn't documented in the public API it could change in future versions and has no guarantees of usage.

Once you reference the geocoder.mapMarker you could then obtain the actual Marker element with geocoder.mapMarker.getElement() and use standard HTML/JS to add event listeners on it.

Alternativly you can choose not to use the built in marker, and instead listen to the MapboxGeocoder events and place your own marker on the map.

0
votes

Try this:

var geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl              
});

geocoder.on('result', e => {
    console.log(e.result.center);
});