Having trouble with IconLayer pre-packed iconAtlas

[cooperrf]

Hello,

I'm receiving this error when trying to create an icon layer with a pre-packed icon atlas:
Error: No valid loader found for data starting with "" for ./assets/map/marker-icon.png

I confirmed the png and json are loading. I'm seeing 200s for them in the network tab of the developer console.

My code looks like this:

const layer:IconLayer<any> = new IconLayer<any>({
    data: this._data,
    iconAtlas: './assets/map/marker-icon.png',
    iconMapping: './assets/map/marker-icon-mapping.json',
    getIcon: d => 'marker',
    getSize: 50,
    getPosition: d => d.geometry.coordinates
});
this._deck.setProps({
    layers: [layer]
});

I also tried an object for the icon mapping instead of a URL:

    ...
    iconAtlas: './assets/map/marker-icon.png',
    //iconMapping: './assets/map/marker-icon-mapping.json',
    iconMapping: {
      marker: {
        x: 0,
        y: 0,
        width: 320,
        height: 511,
        mask: false
      }
    },
    ...

Still no luck.

Note that this layer is part of a suite of angular components I've built. Other layer types are working just fine (geojson, trips, arc, and hexagons).

Auto-packing does work as expected:

    ...
    //iconAtlas: './assets/map/marker-icon.png',
    //iconMapping: './assets/map/marker-icon-mapping.json',
    getIcon: (d) => {
        return {
            url: './assets/map/marker-icon.png',
            x: 0,
            y: 0,
            width: 320,
            height: 511,
            mask: false
        };
    },
    ...

I've got this stuff in package.json:

    ...
    "@deck.gl/aggregation-layers": "^8.1.6",
    "@deck.gl/core": "^8.1.6",
    "@deck.gl/geo-layers": "^8.1.6",
    "@deck.gl/layers": "^8.1.6",
    "@deck.gl/mesh-layers": "^8.1.6",
    "@luma.gl/core": "^8.1.2",
    ...

Here's the icon atlas and icon mapping files I'm trying to load:
assets.zip

Please help!

[Pessimistress]

Run yarn list @loaders.gl/core at your project root and confirm that you have only one copy.

[cooperrf]

Hello. Thanks for the quick response!

The project I'm working on uses npm. But I did try npm list@loaders.gl/core with the attached result (some deduping). I tried installing individual loader.gl modules (core and images). I deleted the node_modules directory and did a fresh install. The browser thinks the image loaded, but I'm still seeing the same error.

I'm looked through the source code a little, but didn't get far. Is there some avenue I can explore for debugging? Is it strange that auto-packing works but pre-packing does not?

Thanks!

npm list@loaders.gl/core:

Image seems to load:

Console error:

[Pessimistress]

I remember some old issues when building with Angular due to certain aggressive optimization. If it's possible to examine the compiled code, you can check if this line is called at all:

deck.gl/modules/core/src/lib/init.js

Line 59 in f65ac9c

registerLoaders([jsonLoader, ImageLoader]);

[cooperrf]

Success!

I didn't find registerLoaders([jsonLoader, ImageLoader]); in my compiled code.

I don't know if this was the best way to do it (maybe you can confirm), but I'm manually registering the loaders in my application code:

import {registerLoaders} from '@loaders.gl/core';
import jsonLoader from '@deck.gl/core/dist/esm/utils/json-loader';
import {ImageLoader} from '@loaders.gl/images';

...

registerLoaders([jsonLoader, ImageLoader]);

Thanks for the quick help!

If this is my best option, we can close this ticket. :)

[Pessimistress]

Let's keep the ticket open for now. We should still figure out how to fix it properly with Angular, maybe there is a build config?

[Pessimistress]

@cooperrf Can you point me to a minimal setup that reproduces this issue?