Day by mobile application is more demanding, attracting most to the customer as well as developers. Tracker application or any kind of live tracking system made transportation and other export/import business easier. Everyone wants to track their vehicle whether it is a company or a driver or a user who is using it. They can get all the information at their fingertips.
Nowadays, developers have many options to build this type of application very easily using Google Maps, Mapbox or Leaflet, etc. Full development process they can get easily from their respective official websites. How to get started, what should be the server configuration, or what kind of technologies that need to be learned are clearly mentioned in their websites. Other than the official website, there are many articles out there over the internet to guide how to display a map with a custom car marker, how to draw a route between source and destination, even the shortest route between two points. Nevertheless, sometimes developers might get in trouble while developing in some cases.
In this article, I’m going to share how can we integrate moving car animation between points in our mobile or web application using Mapbox. Because very less article is out there regarding this. Using Mapbox API developers can easily locate current vehicle locations, draw the routes vehicle has traveled, or going to travel. But can’t find out any article of a smooth car moving animation over the internet. So, my main concern here is to help the developers to achieve that using Mapbox.
The first step is to create an HTML div element, assign a class name (where the car marker icon is imported) into it, create an instance of mapboxgl marker and pass the div element while creating. Check the sample below:
var el = document.createElement('div'); el.className = 'carmarker'; var marker = new mapboxgl.Marker(el);Our next step is to set current latitidue-longitude and rotation to the marker instance and add to the map. Check it below:
marker.setLngLat([current_lng, current_lat]); .setRotation(current_rotation_or_heading)
marker.addTo(map);The next step is to move the car icon smoothly from the current position to a new position. To do that we need to get the new latitude-longitude and new rotation of the car. And if we follow the same step as above we will get the rapid car moving that is a challenge. To fix this issue, we have created the following algorithm. The algorithm will calculate the difference between the new position and current position, then divide the result by the conditional delta.
var num_deltas = 200;
var steps = 0;
var position = [marker.getLngLat().lng, marker.getLngLat().lat];
var lng = NewLocation_lng - marker.getLngLat().lng;
var lat = NewLocation_lat - marker.getLngLat().lat;
var delta_lng = lng / num_deltas;
var delta_lat = lat / num_deltas;Now we would like to give direction to our marker towards it is moving. To make the direction we use the turf library which helps to determine the angle between two positions. To find out the angle, we transform our coordinates into points using the function turf.point(), then get the angle between these two points using the function turf.rhumbBearing().
Originally published at https://codinghub.net.
