How to Build Uber Car Animation Using Mapbox Markers

{
var el = document.createElement('div');
el.className = 'car_marker';
var marker = new mapboxgl.Marker(el);
}
{
marker.setLngLat([-74.50, 40.00]);
marker.addTo(map);
}
{
var numDeltas = 200;
document.getElementById('drive').addEventListener('click', function () {
steps = 0;
position = [marker.getLngLat().lng, marker.getLngLat().lat];
var lng = newLocation[0] - marker.getLngLat().lng;
var lat = newLocation[1] - marker.getLngLat().lat;
deltaLng = lng / numDeltas;
deltaLat = lat / numDeltas;
}
{
angle = turf.rhumbBearing(turf.point(newLocation), turf.point([marker.getLngLat().lng, marker.getLngLat().lat])) + 180;
}

--

--

--

Ruby on Rails development house. We assist businesses in building products that people enjoy. Share knowledge about #RoR #Web #CloudSoftware #ProductDevelopment

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Active Bridge

Active Bridge

Ruby on Rails development house. We assist businesses in building products that people enjoy. Share knowledge about #RoR #Web #CloudSoftware #ProductDevelopment

More from Medium

Handling Pagination in Strapi v4 with SvelteKit

How to build a sidebar component with Tailwind CSS and Flowbite

Sneat Open Source Bootstrap 5 HTML Admin Template Is Available Now…!!🤩

free bootstrap 5 html admin template

Setting up Vue Storybook with Vite to build a Fintech UI Library