Live GPS Tracking with MapTiler SDK
MapTiler SDKSimulate a moving marker that updates its position in real time along a path using MapTiler SDK.
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3522, 48.8566],
zoom: 14
});
const path = [
[2.2945, 48.8584], [2.3050, 48.8590], [2.3200, 48.8600],
[2.3376, 48.8606], [2.3500, 48.8530]
];
const marker = new maptilersdk.Marker({ color: '#9C27B0' })
.setLngLat(path[0]).addTo(map);
let i = 0;
setInterval(() => {
i = (i + 1) % path.length;
marker.setLngLat(path[i]);
map.panTo(path[i]);
}, 2000);How it works
A marker is placed at the first point of a predefined path. A setInterval timer advances through the coordinates every 2 seconds, updating the marker position with setLngLat().
The map.panTo() call smoothly pans the map to keep the marker centered. In a real application, coordinates would come from a WebSocket, GPS tracker, or API endpoint instead of a static array.
The modulo operator % loops the animation back to the start when it reaches the end of the path.
Key APIs
| API | Description | Docs |
|---|---|---|
marker.setLngLat() |
Update marker position | docs.maptiler.com/sdk-js/api/ |
map.panTo() |
Smoothly pan map to coordinates | docs.maptiler.com/sdk-js/api/ |
FAQ
How do I make the movement smooth instead of jumping?
Use requestAnimationFrame to interpolate between waypoints. Calculate intermediate positions based on elapsed time for fluid animation.
Can I draw a trail behind the marker?
Yes. Maintain a growing LineString in a GeoJSON source and call setData() each time the marker moves.
Common mistakes
- Not clearing the interval when the map is removed: store the interval ID and call
clearIntervalin cleanup - Updating position too frequently: 60fps updates work but cause unnecessary tile requests; 1-5 second intervals are typical for GPS tracking
- Forgetting
map.panTo(): the marker moves off-screen without camera follow
Build maps using MapTiler SDK with AI
Generate code like this live gps tracking with maptiler sdk example using the MapTiler SDK skill in your IDE.