Add url redirect to mapbox icon

Question

I am trying to allow a mapbox marker to be clicked on and when clicked it automatically takes you to a new link.

Is this possible?

I currently have a map of 10 locations and when loaded the zoom level shows all. When you click on a location, it zooms you into that location.

I now want it to take you through to a url on the click rather than zoom in, however I cant seem to find any documentation on how to do it.

I am aware that it can be done using a popup box which contains a url in it, but is there a way to remove the extra step.

Thank you

Answer 1

You can use click event on your layer to get the feature clicked and use a property of your feature to build your link :

map.on('click', 'layername', function(e) {
    // Here you can access e.features[0] which is the feature cliked
    // With that you can do whatever you want with your feature
});

Answer 2

Sébastien Bousquet's answer work when using a Symbol, but if using a Marker, you'll need to add your your own click eventlistener like https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event.

  marker.getElement().addEventListener('click', event => {
    window.location.href = 'https://www.mapbox.com/';
  });