Add Maki Icon instead of Mapbox Geocoder Marker

Question

Just a quick question, if anyone has ever replaced the Mapbox default marker with a Maki icon. I've only seen examples of using Maki icons for point tilesets/layers, but I'm wanting to use it for non-tileset features, specifically replacing the marker that adds after geocoding, at the location of the address just geocoded.

Or, trying to find something that is similar to Google Maps symbols below. Any suggestions appreciated.

var pinImage =  {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: '#ff4b00',
            fillOpacity: .9,
            scale: 5,
            strokeColor: '#CDDC39',
            strokeWeight: 0,
            strokeOpacity: .5
        }

Answer 1

The MapboxGeocoder control has a marker option https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#parameters which controls the marker placed on the map when you select a result.

There is an example at https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ to create a Marker with a custom icon.

So you could create an HTML Element which contains either an SVG or PNG icon from Maki and use that as your element in your custom Marker passed to the MapboxGeocoder control.

Answer 2

I think this sample is what you are looking for Use a custom render function with a geocoder

It allows you to add a custom render function including the icon...

var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
types: 'poi',
// see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
render: function(item) {
// extract the item's maki icon or use a default
var maki = item.properties.maki || 'marker';
return (
"<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/@mapbox/[email protected]/icons/" +
maki +
"-15.svg'><span class='geocoder-dropdown-text'>" +
item.text +
'</span></div>'
);
},
mapboxgl: mapboxgl
});
map.addControl(geocoder);