Cusotm markers in mapbox gl js does not work? - mapbox

Question

I'm trying to add custom markers to a mapbox map using the example from their site https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/ but everytime I replace their link with mine (same photo format) or any link, it does not matter, the photo does not render, if anyone is able to show me a working example with a custom photo/marker. I need it to work using this example, I was able to add custom markers in another way but I need this specific way with .addSource and .addLayer
mapboxgl.accessToken = 'pk.eyJ1IjoibWFya2V0aW5nYnNvIiwiYSI6ImNrYnYwZmk3YjAxZjgyem1wY2Zmc3F4Y2EifQ.gMF-eCCaAHHgWIUoRcnfkg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
map.on('load', function() {
// Add an image to use as a custom marker
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', //here is the problem if i try to replace the image
function(error, image) {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
// feature for Mapbox DC
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
-77.03238901390978,
38.913188059745586
]
},
'properties': {
'title': 'Mapbox DC'
}
},
{
// feature for Mapbox SF
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox SF'
}
}
]
}
});
// Add a symbol layer
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});

Answer 1

Based on the documentation of map.loadImage, if you are loading that image from an External domain, that domain must support CORS (Cross-Origin Resource Sharing).
As you are not including what's the image your are trying to load, I cannot verify it, but it seems it's related to that.
EDITED: if you need a CORS-enabled server to upload your image, you can try to use any of the available image uploader servers such as https://postimg.cc/. but I wouldn't recommend this approach beyond a simple PoC.
I have tried your code with this image
and I have created a fiddle with it on how to add a custom image for a marker... and it works, so as said the code is right but the issue you are experiencing is because the image you are trying to use is not hosted in a CORS enabled domain.
If this solution solves your issue, please mark it as 'answer accepted', this way will also help other users to know it was the right solution.