Skip to main content

Animate as markers

Create marker animation

Description​

You can Create marker animation in @openmapvn/openmapvn-gl by updating its position.

Usage​

To Create marker animation, you need to include the following code snippet in your HTML file. This code snippet will Create marker animation on your map.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Openmap.vn Demo Map</title>
    <meta
      property="og:description"
      content="Initialize a map in an HTML element with OpenmapVN GL."
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@openmapvn/[email protected]/dist/maplibre-gl.css"
    />
    <script src="https://unpkg.com/@openmapvn/[email protected]/dist/maplibre-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: "map",
        style:
          "https://maptiles.openmap.vn/styles/day-v1/style.json?apikey=YOUR_API_KEY",
        center: [105.85237, 21.03024],
        zoom: 15,
        maplibreLogo: true
      });

      const marker = new maplibregl.Marker();

      function animateMarker(timestamp) {
        const radius = 20;

        // Update the data to a new position based on the animation timestamp. The
        // divisor in the expression `timestamp / 1000` controls the animation speed.
        marker.setLngLat([
          Math.cos(timestamp / 1000) * radius,
          Math.sin(timestamp / 1000) * radius
        ]);

        // Ensure it's added to the map. This is safe to call if it's already added.
        marker.addTo(map);

        // Request the next frame of the animation.
        requestAnimationFrame(animateMarker);
      }

      // Start the animation.
      requestAnimationFrame(animateMarker);
    </script>
  </body>
</html>
info

More information about the @openmapvn/openmapvn-gl library can be found in the Openmap.vn GL JS documentation.