Mapbox GL-JS : Why am I getting an image load error when it works anyway?

Question

I have an image that I load onto my map to indicate the user's GPS position. I am not using the built-in GPS Control Mapbox has, I am getting the data externally and displaying it using an image layer and source. It is just a blue arrow.

When the javascript executes, it seems to display as intended with no problems. However I am getting a console error and I am worried at some point something will break (if it hasn't already and I just haven't noticed it yet.)

First, my console error :

util.js:458 Image "arrow" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

And here is the code I am using to load the image, layer and source :

map.loadImage('images/gps/arrow.png', function(error, image) {
  if (error)
    throw error;
  map.addImage('arrow', image);
});


map.addSource('gps_point', {
  type: 'geojson',
  data: window.userLatestPoint
});


map.addLayer({
  "id": "gps_point",
  "type": "symbol",
  "source": "gps_point",
  "layout": {
    "icon-image": "arrow",
    "icon-allow-overlap": true,
    "text-allow-overlap": true,
    "icon-rotate": ["get", "rotate"]

  }
});

I am out of ideas as to why this would throw an error, unless I am doing something wrong but Mapbox allows it anyway.

Answer 1

loadImage is an async operation so you should add the calls to addSource and addLayer within the scope of the function loadImage.

Otherwise is quite probable the layer start to paint before the image is loaded and raise those errors, but when it loads finally is viewed because of the reference that exist in the layer definition.

You can see this good practice in this example from Mapbox from the official documentation