Can't add Image with map.addImage. #6333

AimbotNooby · 2025-09-01T18:51:18Z

AimbotNooby
Sep 1, 2025

I'm trying to add a symbol Layer with different icon-images, for that I need to load and add an Image but I just can't get it to work.

I would like to load multiple Images like so (mapbox/mapbox-gl-js#4736):

const images = [
    {url:'../images/240px-Aerodrome.svg.png',id:'Aerodrome'},
    {url:'../images/240px-Waterfall-14.svg.png',id:'Waterfall-14'},
    {url:'../images/240px-Viewpoint-16.svg.png',id:'Viewpoint-16'}
];
Promise.all(
    images.map(img => new Promise((resolve, reject) => {
        map.loadImage(img.url, function (error, res) {
            if (error) throw error;
            map.addImage(img.id, res)
            resolve();
        })
    }))
).then(() => {
    console.log("loaded all images");

    map.addSource('island_poi', {
        type: 'geojson',
        data: '../data/islandpoi_minimal.geojson'
    });
    map.addLayer({
    id: 'island_poi-layer',
    type: 'symbol',
    source: 'island_poi',
    layout: {
        'icon-image': ['get', 'icon'],
        'icon-size': 1.5,
        'text-field': ['get', 'title'],
        'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
        'text-size': 12,
        'text-offset': [0, 0.6],
        'text-anchor': 'top'
    }
    });
}).catch((err) => {
    console.error("error loading images:", err);
});

In the network tab I see that the images get fetched, but I don't see the debug messages "loaded all images" or "error loading images:"

Now I have created a simple map with just one image:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <title>MapLibre Simple Symbol Example</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body { margin:0; padding:0; }
        #map { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.js"></script>
<script>
    // Karte initialisieren
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/liberty',
        center: [11.5754, 48.1374], 
        zoom: 10
    });

    map.on('load', function () {
        map.loadImage(`../images/240px-Aerodrome.svg.png`, function(error, image) {
                if (error) {
                    console.error("error fetching the image:", error);
                    return;
                }
                map.addImage('aerodrome', image);
                console.log("aerodrome image successfully added with addImage");

                map.addSource('symbol-point', {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: [{
                            type: 'Feature',
                            geometry: {
                                type: 'Point',
                                coordinates: [11.5754, 48.1374]
                            },
                            properties: {}
                        }]
                    }
                });

                map.addLayer({
                    id: 'symbol-layer',
                    type: 'symbol',
                    source: 'symbol-point',
                    layout: {
                        'icon-image': 'aerodrome',
                        'icon-size': 2
                    }
                });
            }
        );
    });
</script>
</body>
</html>

Here happens the same. map.loadImage seems to work as I see the image get fetched in the network tab, but map.addImage dosn't work because I don't see the debug message "aerodrome image successfully added with addImage".

You can have a look on the example website here: https://streammap.de/autdany/testtesttest.html

What am I doing wrong? Any help is appreciated!

Answered by dschep

Sep 1, 2025

https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#400

⚠️ Removed callback usage from map.loadImage in continue to below change (#3422)

So the problem is you aren't using loadImage correctly

docs: https://maplibre.github.io/maplibre-gl-js/docs/API/classes/Map/#loadimage

View full answer

dschep · 2025-09-01T19:21:15Z

dschep
Sep 1, 2025

https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#400

⚠️ Removed callback usage from map.loadImage in continue to below change (#3422)

So the problem is you aren't using loadImage correctly

docs: https://maplibre.github.io/maplibre-gl-js/docs/API/classes/Map/#loadimage

1 reply

AimbotNooby Sep 2, 2025
Author

Ah makes sense. Thanks a lot!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Can't add Image with map.addImage. #6333

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Can't add Image with map.addImage. #6333

Uh oh!

AimbotNooby Sep 1, 2025

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

dschep Sep 1, 2025

Uh oh!

AimbotNooby Sep 2, 2025 Author

AimbotNooby
Sep 1, 2025

Replies: 1 comment 1 reply

dschep
Sep 1, 2025

AimbotNooby Sep 2, 2025
Author