vue.jsvuejs2here-apiheremaps

HERE Maps JS API 3.1.30.17 used in VUE - Error for style group 'non-collision' in Firefox

I've build a simple Here Map using Vue 2 and the JS API in version 3.1.30.17. The map works fine in all browsers except Firefox v102.

This is the error message in Firefox:

Tangram [error]: Error for style group 'non-collision' for tile 20/7/68/41/7 CanvasRenderingContext2D.drawImage: Passed-in canvas is empty: loadTexture@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:417267
e/sn.addWorker/<@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:63015
EventListener.handleEvent*e/sn.addWorker@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:62515
e/value/<@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515089
value@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515502
value@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:514847
e/value/this.initializing<@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511497
promise callback*value@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511472
Ul@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:335:441
p.eh@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:378:446
p.Ge@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:329:436
p.Ge@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:376:356
S@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:369:214
T.prototype.u@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:410:166
T@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:401:290

... The error is even bigger

The following method I'm using to init Here Maps inside Vue's mounted:

        async initializeHereMap() {

            const mapContainer = this.$refs.hereMap;
            const H = window.H;

            // Initialize the platform object:
            this.platform = new H.service.Platform({
                apikey: this.apiKey,
            });

            await this.geocode(this.platform, this.originAddress)
                .then(data => this.routingParameters.origin = data[0]);
            await this.geocode(this.platform, this.destinationAddress)
                .then(data => this.routingParameters.destination = data[0]);

            // Obtain the default map types from the platform object
            const defaultLayers = this.platform.createDefaultLayers({
                lg: window.navigator.language,
            });

            // Instantiate (and display) a map object:
            const map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
                zoom: this.zoom,
                center: this.center,
                padding: {
                    top: this.padding,
                    bottom: this.padding,
                    left: this.padding,
                    right: this.padding,
                },
            });

            // create map pins
            const mapPinOrigin = this.addMapPin('A', 40);
            const mapPinDestination = this.addMapPin('B', 40);

            let linestring = new H.geo.LineString();

            linestring.pushPoint(this.routingParameters.origin);
            linestring.pushPoint(this.routingParameters.destination);

            // Create a polyline to display the route:
            let routeLine = new H.map.Polyline(linestring, {
                linestring,
                style: { strokeColor: '#3F80C4', lineWidth: 5 },
            });

            // Create a marker for the start point:
            let startMarker = new H.map.Marker(this.routingParameters.origin, { icon: mapPinOrigin });

            // Create a marker for the end point:
            let endMarker = new H.map.Marker(this.routingParameters.destination, { icon: mapPinDestination });

            // Add the route polyline and the two markers to the map:
            map.addObjects([routeLine, startMarker, endMarker]);

            // Set the map's viewport to make the whole route visible:
            map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});


            // add behavior control
            if (this.behaviors) new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

            // add UI
            if (this.controls) H.ui.UI.createDefault(map, defaultLayers);
        },

Is there some one facing the same issue and could solved it?

Solution

  • Did you follow this example on: https://developer.here.com/tutorials/how-to-implement-a-web-map-using-vuejs/ ?

    Tangram error is related to rendering e.g. when render map objects (like icons, markers, polylines etc.) and map vector tiles.

    I don't think so that this issue related to HERE JS Map API.

    Because all examples on https://developer.here.com/documentation/examples/maps-js are working well on my FireFox 102.0.1

    It could be some map objects like icons or markers etc. are created in some moment but is not finished yet and then try to push onto map? Creating an icon in some asynchron function?

    Or in like your code:

    await this.geocode(this.platform, this.originAddress)
                .then(data => this.routingParameters.origin = data[0]);

    You don't know when func geocode will be finished (e.g. due slow internet connectivity) It could be this command above is not done yet, but your code is already start to run this code:

    linestring.pushPoint(this.routingParameters.origin);<-- 'this.routingParameters.origin' could be null
linestring.pushPoint(this.routingParameters.destination);

// Create a polyline to display the route:
   let routeLine = new H.map.Polyline(linestring, { <-- Could cause Tangram error because 'linestring' is strange due undefined origin yet!
         linestring,
         style: { strokeColor: '#3F80C4', lineWidth: 5 },
    });

    The polyline options is not correct in:

    new H.map.Polyline(linestring, {
             linestring,
             style: { strokeColor: '#3F80C4', lineWidth: 5 },
        }

    Why in above the 'linestring' is second time in options? Please follow correct syntax on: https://developer.here.com/documentation/maps/3.1.31.0/api_reference/H.map.Polyline.html#.Options