Live GPS Tracking
Simulate a moving marker that updates position in real time Each library has its own approach: here's how they compare.
Quick Recommendations
MapLibre GL JS — Best when you need GPU-rendered position updates with smooth camera following and data-driven marker styling.
MapTiler SDK — Gives MapTiler SDK users MapLibre's live tracking pattern, plus simplified map and API key setup.
At a Glance
| MapLibre | SDK | |
|---|---|---|
| Coordinates | [lng, lat] | [lng, lat] |
| Rendering | WebGL (GPU, 60fps) | WebGL (GPU, 60fps) |
| Bundle size | ~250 KB gzipped | ~280 KB gzipped (includes MapLibre) |
| Learning curve | Moderate (source/layer model, expressions) | Easy (MapLibre API with convenience helpers) |
| 3D support | Full: terrain, fill-extrusion, globe, sky | Full (same as MapLibre) |
| Code lines | 25 | 19 |
Code Snippets
Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.
MapLibre GL JS25 linesShow code
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v4/style.json?key=YOUR_MAPTILER_KEY',
center: [14.42, 50.08],
zoom: 14
});
const route = [[14.410,50.090],[14.415,50.088],[14.420,50.085],[14.425,50.082],[14.430,50.080],[14.435,50.078]];
let step = 0;
map.on('load', () => {
map.addSource('tracker', { type: 'geojson', data: { type: 'Point', coordinates: route[0] } });
map.addLayer({ id: 'tracker-dot', type: 'circle', source: 'tracker',
paint: { 'circle-radius': 10, 'circle-color': '#F44336', 'circle-stroke-width': 3, 'circle-stroke-color': '#fff' } });
map.addSource('trail', { type: 'geojson', data: { type: 'LineString', coordinates: [route[0]] } });
map.addLayer({ id: 'trail-line', type: 'line', source: 'trail',
paint: { 'line-color': '#2196F3', 'line-width': 3, 'line-dasharray': [2, 2] } });
const trail = [route[0]];
setInterval(() => {
step = (step + 1) % route.length;
const pos = route[step];
map.getSource('tracker').setData({ type: 'Point', coordinates: pos });
trail.push(pos);
map.getSource('trail').setData({ type: 'LineString', coordinates: trail });
map.panTo(pos, { duration: 500 });
}, 1000);
});MapTiler SDK19 linesShow code
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);Things to Know
Implementation-specific details that matter for live gps tracking.
Position updates are done by calling source.setData() with new GeoJSON coordinates in a setInterval loop; camera follows with easeTo().
Identical source.setData() and easeTo() pattern as MapLibre; the SDK adds no tracking-specific helpers.
Which Library to Use?
Simulate a moving marker by updating a GeoJSON source position in real time with setInterval.
Best when you need GPU-rendered position updates with smooth camera following and data-driven marker styling.
Simulate a moving marker that updates its position in real time along a path using MapTiler SDK.
Gives MapTiler SDK users MapLibre's live tracking pattern, plus simplified map and API key setup.
Build Maps with AI
Generate code like these examples using mapping library skills in your IDE.