CODEWITHSUNDEEP
javascriptmapbox-gl-js
Jaime Vasquez Milla
Jaime Vasquez Milla

Reputation: 17

Change center of rotation of the marker in MAPBOX

this code moves the marker around one point (for Africa), I need to change to a custom location. Somebody help me please. Thanks

var marker = new mapboxgl.Marker();

    function animateMarker(timestamp) {
        var 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);

Upvotes: 0

Views: 512

Answers (1)

Patrick Leonard
Patrick Leonard

Reputation: 412

You need to modify the marker.setLngLat() function to offset the marker's longitude and latitude to match your preferred location. See Mapbox documentation.

For example, the code snippet below will animate the marker around Jakarta, Indonesia.

  marker.setLngLat([
    Math.cos(timestamp / 1000) * radius + 106.8,
    Math.sin(timestamp / 1000) * radius - 6.2
  ]);

Full CodePen here.

Disclaimer: I work at Mapbox

Upvotes: 0

Related Questions