Animate Azure Maps

Hey guys,

I’m just getting started in 3d web developement and think babylon.js is a great starting point.

My overall goal is to animate an object on a map along a path using real world data with Azure Maps.

I already modified the original sample code to make it possible to have animations:

<!DOCTYPE html>
<html lang="en">
    <title>Babylon custom WebGL layer - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to create a custom 3D layer with Babylon.js." />
    <meta name="keywords" content="3D, Microsoft maps, map, gis, API, SDK, thematic, choropleth, heatmap, heat map, animation, animate, animations, county, population, data-driven, data driven styling, temporal, temporal analysis" />
    <meta name="author" content="Microsoft Azure Maps" />
    <meta name="screenshot" content="screenshot.jpg" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="" rel="stylesheet" />
    <script src=""></script>

    <!-- Babylon.js is a powerful, simple, real-time 3D and open game and rendering engine packed into a friendly framework, which Microsoft initially developed. -->
    <script src=""></script>
    <script src=""></script>

        var map, layer;

        // parameters to ensure the model is georeferenced correctly on the map
        const worldOrigin = [148.9819, -35.39847];
        const worldAltitude = 0;
        const worldRotate = [Math.PI / 2, 0, 0];
        const worldCoords =[...worldOrigin, worldAltitude]);
        const worldScale = 2 *;

        var worldMatrix = BABYLON.Matrix.Compose(
            new BABYLON.Vector3(worldScale, worldScale, worldScale),
            BABYLON.Quaternion.FromEulerAngles(worldRotate[0], worldRotate[1], worldRotate[2]),
            new BABYLON.Vector3(worldCoords[0], worldCoords[1], worldCoords[2])

        var mesh1, mesh2;

        async function animateMesh(scene) {
            //Create a scaling animation at 30 FPS
            var animationBox = new BABYLON.Animation("tutoAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

            let startPosition =[...[148.9819, -35.39847], 0]);
            let endPosition =[...[148.977732, -35.398451], 0]);

            // Animation keys
            var keys = [];
                frame: 0,
                value: new BABYLON.Vector3(startPosition[0], startPosition[1], startPosition[2])

                frame: 100,
                value: new BABYLON.Vector3(endPosition[0], endPosition[1], endPosition[2])



            setTimeout(async () => {
                let anim = scene.beginAnimation(mesh1, 0, 100, true);

                await anim.waitAsync();
                console.log("Animation finished")

        // Create a renderer that implements atlas.WebGLRenderer
        var renderer = {
            renderingMode: "3d",

            // Method called when the layer is added to the map
            onAdd: (map, gl) => {
       = map;

                // Initialize the Babylon.js engine.
                const engine = new BABYLON.Engine(gl, true, { useHighPrecisionMatrix: true }, true);

                this.scene = new BABYLON.Scene(engine);
                this.scene.autoClear = false;
                this.scene.beforeRender = function () {
       = new BABYLON.Camera("camera", new BABYLON.Vector3(), this.scene);
                const light = new BABYLON.HemisphericLight("light", BABYLON.Vector3.One(), this.scene);

                new BABYLON.AxesViewer(this.scene, 10);

                ).then((modelContainer) => {
                    mesh1 = modelContainer.createRootMesh();

            // Method called on each animation frame
            render: (gl, matrix) => {

                // projection & view matrix
                const cameraMatrix = BABYLON.Matrix.FromArray(matrix);
                const mvpMatrix = worldMatrix.multiply(cameraMatrix);


        function GetMap() {
            map = new atlas.Map("map", {
                zoom: 18,
                pitch: 60,
                center: [148.9819, -35.39847],
                //style: "satellite_road_labels",
                antialias: true,

                // Add authentication details for connecting to Azure Maps.
                authOptions: {
                    // Use an Azure Maps key. Get an Azure Maps key at NOTE: The primary key should be used as the key.
                    authType: 'subscriptionKey',
                    subscriptionKey: 'mykey'

            // Wait until the map resources are ready
  "ready", function () {
                // Create a WebGL layer
                layer = new atlas.layer.WebGLLayer("babylon", { renderer });
                // Add the layer to the map

                // Add controls
                        new atlas.control.ZoomControl(),
                        new atlas.control.PitchControl(),
                        new atlas.control.CompassControl(),
                        new atlas.control.StyleControl({
                            mapStyles: "all"
                        position: "top-right"
<body onload="GetMap()">
    <div id="map" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend>Babylon.js custome WebGL layer</legend>
        This sample shows how to render a 3D model using <a href="">babylon.js</a>.
        Babylon.js is a powerful, simple, real-time 3D and open game and rendering engine packed into a friendly framework, which Microsoft initially developed.

This works perfectly fine for changing the scale or rotation.

However, when I try to change the position by inputting real world coordinates (eg [148.977732, -35.398451]) , as seen in my code, the movement of the model is too small to be visible.
I already figured out that the reason for this is that the values in my vector are to small. Unfortunately I have no idea what steps I have to make to be able to work with real world coordinates.

I’m really grateful for any input!

Thanks a lot

There is probably a scale being applied within the map rendering. Could you check with the Azure maps folks ?

1 Like