[question] HTTP 401 error when following the examples and guides

I’m fairly certain I’m following the examples correctly, but I get 401 errors so tiles don’t load.

This is my code:

    // import OmvTileDecoderService inside a web Worker with vanilla JS, thanks to
    // the JSPM ES Module CDN (https://jspm.io).
    const workerCode = `
        async function main() {
            const { OmvTileDecoderService } = (
                await import('https://dev.jspm.io/@here/harp-omv-datasource/index-worker')
            ).default

            OmvTileDecoderService.start()
        }

        main()
    `;
    const blob = new Blob([workerCode], { type: "application/javascript" });
    // const worker = new Worker(URL.createObjectURL(blob), { type: "module" });

    const canvas = document.getElementById("harpCanvas");
    const map = new MapView({
        canvas,

        // theme:
        //     "https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json",
        theme:
            "https://unpkg.com/@here/harp-map-theme@0.13.0/resources/berlin_tilezen_base.json",

        decoderUrl: URL.createObjectURL(blob),

        //For tile cache optimization:
        maxVisibleDataSourceTiles: 40,
        tileCacheSize: 100
    });

    map.setCameraGeolocationAndZoom(
        new GeoCoordinates(1.278676, 103.850216),
        16
    );

    const mapControls = new MapControls(map);
    const ui = new MapControlsUI(mapControls);
    canvas.parentElement.appendChild(ui.domElement);

    mapControls.maxPitchAngle = 90;
    // mapControls.setRotation(6.3, 50);
    // mapControls.camera.rotation

    map.resize(window.innerWidth, window.innerHeight);
    window.onresize = () => map.resize(window.innerWidth, window.innerHeight);

    const omvDataSource = new OmvDataSource({
        baseUrl: "https://xyz.api.here.com/tiles/herebase.02",
        apiFormat: APIFormat.XYZOMV,
        styleSetName: "tilezen",
        authenticationCode: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    });

    map.addDataSource(omvDataSource);

where XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX is my API key that I created by first making a new JavaScript App ID, then for that app making an API key and pasting that key in my Harp example.

Any ideas why?

[engdevlab]

method: harp.AuthenticationMethod.QueryString

[nzjony]

@trusktr , thanks again for looking into this.

I notice that we can simplify the interface, why should you need to specify the authenticationMethod, when the format could decide… or at least the format supplies a default authentication method, which could be this apikey, see getDefaultAuthMethod on OmvRestClient

I created an issue so that we can simplify this for others: https://github.com/heremaps/harp.gl/issues/1390