MglSymbolLayer with external URL icons

[julienmey21]

Hello everyone,

I want to display user thumbnails on the map from a geojson file. MglCircleLayer works well with dots but I have been stuck for a while with this error when using MglSymbolLayer:
Image "IMAGE URL" 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.

I cannot figure out how to use map.addImage(), does anyone have an example for vue-maplibre-gl?

That would be awesome. Thank you very much

Extracts of my code:

// Fetch user locations
fetch('GEOJSON URL')
  .then(response => response.json())
  .then(data => {
    userLocations.value = data;
  })

<MglGeoJsonSource v-if="userLocations" sourceId="user-locations-source" :data="userLocations">
        <MglSymbolLayer
          layerId="user-locations-layer"
          source="user-locations-source"
          :layout="{
            'icon-image': ['get', 'thumbnail'],
            'icon-size': 1.5,
            'icon-anchor': 'center'
          }"
        />
      </MglGeoJsonSource>

  My geojson file:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -9.1427,
                    38.7242
                ]
            },
            "properties": {
                "id": 2,
                "thumbnail": "IMAGE URL"
            }

[baedlowi]

had similar problem, but only load few images, here my solution
https://github.com/indoorequal/vue-maplibre-gl/discussions/121#discussioncomment-11838175

[francois2metz]

I prototyped the MglImage component to ease the load of the image, in the vue way: #123

[julienmey21]

That works well!
Thank you very much

Belle journée!
julien2mulhouse

[julienmey21]

I get this error in the browser when a user leaves the map and comes back, I could not find a way around it:

Map.vue:47 Error: An image named "[IMAGE URL]" already exists. at gi.addImage (chunk-MHYDEVXG.js?v=ba09483e:15252:61) at e.Map.addImage (chunk-MHYDEVXG.js?v=ba09483e:19609:26) at @indoorequal_vue-maplibre-gl.js?v=7e66f9ca:1297:69

It happens when vue-maplibre-gl.js tries to add an image with the same name (URL) that already exists in its image store.
I guess by default, addImage() does not allow overwriting existing images unless explicitly instructed.
Do you have an idea how I can find a solution?
Many thanks.

[francois2metz]

You could filter the images to remove duplicates? Or check with #hasImage function.
The name of the image is odd, I believe you should try to give them a correct name instead of using the URL as name.

[francois2metz]

I released a new patch version that check if the image exist before trying to load it.

[julienmey21]

Very good, it simplifies my code. Thanks a lot