Skip to main content

Markers animation

You can animate markers on the map:

To animate a marker, first add a Marker object to the map and specify the coordinates of the marker center:

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
});

Movement along a circle​

The animation of a marker moving around a specified point is performed by changing the coordinates of the marker along the circle. New coordinates are calculated based on the current time and the rotation angle.

To add the animation of the movement along a circle, use the animateCircle function:

function animateCircle(marker, centerCoords, radius, duration) {
    const startTime = performance.now();

    function frame(time) {
        const elapsed = (time - startTime) % duration; // Time elapsed since the start of the current animation iteration
        const angle = (2 * Math.PI * elapsed) / duration; // Current angle in radians

        const newCoords = [
            centerCoords[0] + radius * Math.cos(angle), // Calculating longitude
            centerCoords[1] + radius * Math.sin(angle), // Calculating latitude
        ];

        marker.setCoordinates(newCoords); // Setting the new marker coordinates

        requestAnimationFrame(frame); // Scheduling the next frame
    }

    requestAnimationFrame(frame);
}

// Calling the animation function
animateCircle(marker, [55.31878, 25.23584], 0.01, 5000);

Specify the following parameters for the animateCircle function:

  • marker: marker object to animate.
  • centerCoords: coordinates of the circle center in the [longitude, latitude] format.
  • radius: radius of the circle in geographic coordinates (in degrees).
  • duration: duration of one full revolution in milliseconds.

Jumping​

The jumping animation allows a marker to move up and down, creating a bounce effect.

To perform the animation, the vertical offset of the marker is calculated relatively to its base coordinates. To make the jump look the same regardless of the scale and correct when the camera position changes, the current map scale is considered.

To add the jumping animation, use the animateJump function:

function animateJump(marker, map, baseCoords, amplitude, duration) {
    const startTime = performance.now();

    function frame(time) {
        const elapsed = (time - startTime) % duration; // Time elapsed since the start of the current animation iteration
        const bounce = Math.sin((2 * Math.PI * elapsed) / duration) * amplitude; // Jump height

        // Converting geographic coordinates to pixel coordinates
        const basePixelCoords = map.project(baseCoords);

        // Applying Y-axis (vertical) offset in pixels
        const newPixelCoords = [
            basePixelCoords[0], // X remains unchanged
            basePixelCoords[1] - bounce, // Decreasing Y for jumping up
        ];

        // Converting pixel coordinates back to geographic coordinates
        const newGeoCoords = map.unproject(newPixelCoords);

        // Setting the new marker coordinates
        marker.setCoordinates(newGeoCoords);

        requestAnimationFrame(frame); // Scheduling the next animation frame
    }

    requestAnimationFrame(frame);
}

// Calling the animation function
animateJump(marker, map, [55.31878, 25.23584], 20, 1000);

Specify the following parameters for the animateJump function:

  • marker: marker object to animate.
  • map: map object used for coordinate transformation.
  • baseCoords: initial coordinates of the marker in the [longitude, latitude] format.
  • amplitude: jump amplitude (height of movement) in pixels.
  • duration: duration of one full jump (up and down) in milliseconds.

Movement along coordinates​

Animation of movement along coordinates is performed by changing the geographical coordinates of the marker.

To add the animation of the movement along the specified route, use the animateTravel function:

// Function for interpolating between two points
function interpolateCoordinates(coord1, coord2, t) {
    return [coord1[0] + (coord2[0] - coord1[0]) * t, coord1[1] + (coord2[1] - coord1[1]) * t];
}

function animateTravel(marker, route, durationPerSegment) {
    let segmentIndex = 0;

    function animateSegment(startTime) {
        const elapsedTime = performance.now() - startTime;
        const t = elapsedTime / durationPerSegment; // Percentage of segment completion

        if (t < 1) {
            // Interpolating coordinates
            const newCoords = interpolateCoordinates(
                route[segmentIndex],
                route[segmentIndex + 1],
                t,
            );
            marker.setCoordinates(newCoords);

            // Continuing animation of the current segment
            requestAnimationFrame(() => animateSegment(startTime));
        } else {
            // Moving to the next segment
            segmentIndex++;
            if (segmentIndex < route.length - 1) {
                animateSegment(performance.now());
            } else {
                // Looping the route
                segmentIndex = 0;
                animateSegment(performance.now());
            }
        }
    }

    // Starting the animation of the first segment
    if (route.length > 1) {
        animateSegment(performance.now());
    }
}

// Calling the animation function
const durationPerSegment = 2000;
animateTravel(marker, route, durationPerSegment);

Specify the following parameters for the animateTravel function:

  • marker: marker object to animate.
  • route: array of route coordinates in the [longitude, latitude] format.
  • durationPerSegment: duration of each segment in milliseconds.

Additionally, you can add CSS marker animation.

Movement along coordinates with CSS animation​

In addition to the animation of marker movement along the specified route coordinates, you can animate the HTML marker using CSS:

  1. Create a CSS animation, for example:

    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .marker_container {
            position: relative;
            width: 40px;
            height: 40px;
        }
        .marker_container::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: radial-gradient(
                closest-side,
                rgba(255, 165, 0, 0.8),
                rgba(255, 69, 0, 0.5),
                transparent
            );
            animation: firePulse 1s infinite ease-in-out;
        }
        @keyframes firePulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.7;
            }
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
        }
        .wave {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 10px;
            height: 10px;
            background: rgba(0, 0, 255, 0.5);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: waveAnimation 2s infinite;
        }
        @keyframes waveAnimation {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(5);
                opacity: 0;
            }
        }
    </style>

  2. Create an HTML marker. The route-based animation is performed by changing the geographical coordinates of the marker:

    const htmlMarker = new mapgl.HtmlMarker(map, {
        coordinates: [55.323, 25.235],
        html:
            '<div class="marker_container"><div class="wave"></div><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 50 50">\n' +
            '    <circle cx="25" cy="25" r="25" fill="white"/>\n' +
            '</svg></div>\n',
    });

  3. Add the animation of the movement along coordinates using the animateTravel function:

    // Function for interpolating between two points
    function interpolateCoordinates(coord1, coord2, t) {
        return [coord1[0] + (coord2[0] - coord1[0]) * t, coord1[1] + (coord2[1] - coord1[1]) * t];
    }

    function animateTravel(htmlMarker, route, durationPerSegment) {
        let segmentIndex = 0;

        function animateSegment(startTime) {
            const elapsedTime = performance.now() - startTime;
            const t = elapsedTime / durationPerSegment; // Percentage of segment completion

            if (t < 1) {
                // Interpolating coordinates
                const newCoords = interpolateCoordinates(
                    route[segmentIndex],
                    route[segmentIndex + 1],
                    t,
                );
                htmlMarker.setCoordinates(newCoords);

                // Continuing animation of the current segment
                requestAnimationFrame(() => animateSegment(startTime));
            } else {
                // Moving to the next segment
                segmentIndex++;
                if (segmentIndex < route.length - 1) {
                    animateSegment(performance.now());
                } else {
                    // Looping the route
                    segmentIndex = 0;
                    animateSegment(performance.now());
                }
            }
        }

        // Starting the animation of the first segment
        if (route.length > 1) {
            animateSegment(performance.now());
        }
    }

    // Calling the animation function
    const durationPerSegment = 2000;
    animateTravel(htmlMarker, route, durationPerSegment);

    Specify the following parameters for the animateTravel function:

    • htmlMarker: HTML marker object to animate (created on step 2).
    • route: array of route coordinates in the [longitude, latitude] format.
    • durationPerSegment: duration of each segment in milliseconds.

Animation of the traveled path​

You can animate the movement of an HTML marker along a specified route: show the traveled path as a line on the map and add marker animation as a pulsating circle using the HTML Canvas element. To do this:

  1. Specify the marker route as an array of geocoordinates. To make the route closed, the end marker coordinate must match the start coordinate. For example:

    // Marker route
    const path = [
        [55.27075, 25.20483],
        [55.26782, 25.20061],
        [55.26526, 25.19762],
        [55.26296, 25.19486],
        [55.25959, 25.19147],
        [55.26165, 25.18888],
        [55.26508, 25.18634],
        [55.27168, 25.18758],
        [55.27554, 25.18448],
        [55.28022, 25.1873],
        [55.28402, 25.19192],
        [55.2895, 25.19491],
        [55.28533, 25.19751],
        [55.28059, 25.19982],
        [55.27648, 25.20201],
        [55.27305, 25.20393],
        [55.27075, 25.20483], // Route closes at the start point
    ];

  2. Specify the marker speed in m/s for each route segment:

    // Speed in m/s for each segment
    const segmentSpeedsMps = [45, 25, 15, 15, 30, 30, 30, 20, 30, 30, 20, 30, 15, 20, 23, 45];

  3. Add functions to calculate the distance and duration of route segments:

    // Function to calculate arc length by geocoordinates in meters
    function getDistance([lon1, lat1], [lon2, lat2]) {
        ...
    }

    // Calculate duration for each segment
    const segmentDurationsMs = path.slice(0, -1).map((_, i) => {
        const dist = getDistance(path[i], path[i + 1]);
        const speed = segmentSpeedsMps[i]; // m/s
        return (dist / speed) * 1000; // ms
    });

  4. Create a canvas for the pulsating circle, which is used as HtmlMarkerOptions:

    // Create canvas for pulsating circle
    const canvas = document.createElement('canvas');
    canvas.width = 80;
    canvas.height = 80;
    canvas.style.position = 'absolute';
    canvas.style.transform = 'translate(-50%, -50%)';
    const ctx = canvas.getContext('2d');

  5. Add a function to draw the pulsating circle using CanvasRenderingContext2D:

    // Function to draw pulsating circle
    function drawPulse(radius) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(40, 40, radius, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(206,56,56,0.4)';
        ctx.fill();
        ctx.beginPath();
        ctx.arc(40, 40, 14, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(206,56,56,0.8)';
        ctx.fill();
    }

    Instead of canvas, you can create the animation using CSS: see the CSS animation example.

  6. Create an HTML marker that displays the canvas on the map:

    // HTML marker with animated canvas
    const htmlMarker = new mapgl.HtmlMarker(map, {
        coordinates: path[0],
        html: canvas,
        zIndex: 100,
    });

  7. Add the animation of the traveled path of the marker using a Polyline and the animate() function, which is called during frame rendering:

    // Function for interpolating between two points
    function interpolateCoords(a, b, t) {
        return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
    }
    let index = 0;
    let passedCoords = [path[0]];
    let polylines = [];
    let startTime = performance.now();
    function destroyPolylines() {
        polylines.forEach((p) => p.destroy());
        polylines = [];
    }
    function animate() {
        // Circle pulsation
        const animRadius = 18 + 9 * (0.5 + 0.5 * Math.sin(Date.now() / 250));
        drawPulse(animRadius);
        // Current time on the segment
        const now = performance.now();
        const duration = segmentDurationsMs[index];
        const t = Math.min((now - startTime) / duration, 1);
        const newCoord = interpolateCoords(path[index], path[index + 1], t);
        htmlMarker.setCoordinates(newCoord);
        // Draw traveled route using Polyline
        const updatedPassed = passedCoords.slice();
        updatedPassed.push(newCoord);
        destroyPolylines();
        polylines.push(
            new mapgl.Polyline(map, {
                coordinates: updatedPassed,
                color: '#ce3838',
                width: 5,
            }),
        );
        if (t < 1) {
            requestAnimationFrame(animate);
        } else {
            // Move to the next segment
            index++;
            if (index >= path.length - 1) {
                // Restart at the end of the route
                index = 0;
                passedCoords = [path[0]];
                destroyPolylines();
            } else {
                passedCoords.push(path[index]);
            }
            startTime = performance.now();
            // Calling the animate() during frame rendering
            requestAnimationFrame(animate);
        }
    }
    // Calling the animation function
    animate();

Animation using Lottie​

You can animate an HTML marker using Lottie:

  1. Add Lottie:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js"></script>

  2. Create an HTML marker:

    const markerHtml = `
            <div class="marker_container">
                <div class="lottie_animation" id="lottie"></div>
            </div>
        `;

    const htmlMarker = new mapgl.HtmlMarker(map, {
        coordinates: [55.280324, 25.249851],
        html: markerHtml,
    });

  3. Create a Lottie animation:

    // Using MutationObserver to track the appearance of the element
    // Alternatively, you can use setTimeout with a value of 0
    const observer = new MutationObserver(() => {
        const lottieContainer = document.getElementById('lottie');
        if (lottieContainer) {
            observer.disconnect(); // Stop observing once the element is found
            lottie.loadAnimation({
                container: lottieContainer, // Container ID
                renderer: 'svg',
                loop: true,
                autoplay: true,
                path: '<your>.json', // Path to the JSON file
            });
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });