Azure Maps plane icon not following route direction when using snakeline + moveAlongPath

22 hours ago 2
ARTICLE AD BOX

I’m using Azure Maps Web SDK to animate a flight path.
The route line is drawn using snakeline, and a plane icon is animated using moveAlongPath.

The problem:
The route line animates correctly.The plane icon sometimes points the wrong direction or appears to move opposite the route, depending on the coordinate set

This works correctly for some paths (e.g. westbound), but for others (e.g. curved east/southwest routes), the plane appears to face or move in the wrong direction even though it is following the same coordinates.

I have tried

rotationAlignment: 'map', //Lock icon rotation to the map. rotation: ['get', 'heading'], //Rotate the icon based on the heading property of each data point.

and that doesnt work either

Setup

Plane icon faces north by default

One DataSource with:

LineString for the route

Point for the plane

SymbolLayer filtered on Point

Using snakeline + moveAlongPath

// Plane point pinShape = new atlas.Shape( new atlas.data.Point(path[0]) ); datasource.add(pinShape); // Plane layer map.layers.add(new atlas.layer.SymbolLayer(datasource, null, { iconOptions: { image: "plane-icon", anchor: "center", rotationAlignment: "map" }, filter: ["==", ["geometry-type"], "Point"] })); // Route animation atlas.animations.snakeline(lineShape, { duration: 20000, autoPlay: true }); // Plane animation atlas.animations.moveAlongPath(path, pinShape, { duration: 20000, rotate: true, autoPlay: true });
Read Entire Article