loadImage doesn't load whatsoever I try, everything appears to have worked but I cannot see anything on my screen

[chexedy]

Hi, I recently moved from Mapbox to MapLibre via OpenFreeMaps. On my Mapbox site, I had a bunch of stations that would appear as an image and you could click on them etc.

Here is an example of what the stations look like on the map. I made the switch to MapLibre by installing it via npm and updating my code to initialize the map. When map(style.load) runs, I run a method which runs a function called AddStations(). This is the code for addStations:

async function addStations() {
    console.log("Starting");
    const res = await fetch('json/stations.json');
    const data = await res.json();
    console.log("res loaded");

    const img = await map.loadImage("assets/icons/service/station.png");
    console.log("Loaded image");

    if (!map.hasImage("station-icon")) {
        map.addImage("station-icon", img.data);
    }

    if (!map.getSource("stations")) {
        map.addSource("stations", {
            type: "geojson",
            data: data.stations // or data object
        });
    }

    console.log("Added source");

    if (!map.getLayer("stations-layer")) {
        map.addLayer({
            id: "stations-layer",
            type: "symbol",
            source: "stations",
            layout: {
                "icon-image": "station-icon",
                "icon-size": 0.25,
                "icon-allow-overlap": true,
                "text-field": ["get", "description"],
                "text-offset": [0, 1.5],
                "text-anchor": "top"
            }
        });
    }

    console.log("Added layer");

    map.on('click', 'stations-layer', (e) => {
        const feature = e.features[0];
        const { description } = feature.properties;
        updateStationStatus(map, description);
    });

    map.on('mouseenter', 'stations-layer', () => {
        map.getCanvas().style.cursor = 'pointer';
    });

    map.on('mouseleave', 'stations-layer', () => {
        map.getCanvas().style.cursor = '';
    });

    console.log(map.hasImage("station-icon"));
 });
}

I changed nothing from when I used it with Mapbox (where it worked fine) and it simply does not show anything anymore, The station image appears to load, as hasImage prints true but when I check Inspect Element it simply says unable to load content. Everything else works fine so I was looking for some help into why the stations simply do not appear on my map.

I pointed to the console printing true for hasImage, yet I cannot see anything on the map and stations does not appear in the sources either.

It simply hasn't worked since I switched to this from Mapbox and nothing I try seems to fix it, so I would appreciate any help.

[HarelM]

It does sais in the console the the geojson data is invalid, have you checked this direction?
Also a jsbin with reproduction would be much more helpful to also seeing the problem first hand...

[chexedy]

Hi Harel, thank you for responding

I can confirm the GeoJSON data being invalid is from the track lines, and are unrelated to the station logo not appearing. I have added the JS code to https://jsbin.com/ziqocifuwe/edit?html,js. If it helps, the site is deployed to https://whereisnjtransit.pages.dev/ and I have specified it to the version that currently has this issue. Thank you

[HarelM]

The linked jsbin doesn't work. It's hard to help without seeing the real code...

[chexedy]

Sorry, I keep uploading to JS Bin and it doesn't upload. I switched back to Mapbox for testing others thing in my latest commit, but I have a link to the repository when I was using MapLibre here: https://github.com/chexedy/whereisnjtransit/tree/6af999fbcaa88f0980bc7955dc9f3eafe146eccb
The map file should be in the js folder and the station image in assets/icons/service