Cusotm markers in mapbox gl js does not work?

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'
                }
            });
        }
    );
});

The code you post is the same code from Mapbox example, and it works, it would be better if you post the code you're writing and a Minimal Reproducible Example that we can look into to try to solve your issue — jscastro

jscastro jscastro · Accepted Answer · 2020-07-25T17:14:14

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.

Cusotm markers in mapbox gl js does not work?

1 Answers