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 });