How to set custoM marker returned by Mapbox.Geocoder

Question

Taking my fists steps with MapboxGL.js

I could add a control to use Geolocating and I would need some control over the marker that Geocoder put on map after a destination is selected by user.

The first is that i would like to use a custom image instead of default DROP. And as i will need to show/ride, change image ... i think i will need get the object returned but could not do that checking examples and do with Geocoder

Any help will be appreciated Best Regards

I saw this thread ... Add Maki Icon instead of Mapbox Geocoder Marker

But I do not think the answer is correct because when using Geocoder ... I do not need set the MARKER on code ...it is set after user select a destination.

Best Regards

Answer 1

I don't know if you still need it since it has been a while. But i had the same issue. And couldn't find what i was looking for but i was able to do it with css.

So for anyone whit the same issue.

If you set the MapboxGeocoder option to true it wil output a svg marker with parent div with a class. With that class you can basically put any image as the marker.

.mapboxgl-marker-anchor-center {

      svg {
        display: none;
      }

      &::before {
        content: '';
        display: block;
        background-image: url('YOURIMAGE.png');
        background-size: cover;
        width: 50px;
        height: 50px;
      }
}