code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
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 ); }); content_copy Copyopen_in_new Open
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" /> < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script type = "module" > import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs' ; 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 ); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import maplibregl from 'maplibre-gl' ; import 'maplibre-gl/dist/maplibre-gl.css' ; 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 ); }); 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);
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" />
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs';
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);
});
</script>
</body>
</html> import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
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);
});
