<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.11.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.11.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map',
style: TrimbleMaps.Common.Style.DATADARK,
center: [-117.918511, 33.799693], // starting position
zoom: 6
});
map.on('load', async () => {
const origin = `${window.location.origin}`;
let dataPath = 'maps-sdk/data';
if (origin === 'http://127.0.0.1:8080') {
dataPath = 'data';
}
const data = `${origin}/${dataPath}/gpstracks.geojson`;
const response = await fetch(data);
const gpsTracksData = await response.json();
const coordinates = gpsTracksData.features[0].geometry.coordinates;
gpsTracksData.features[0].geometry.coordinates = [coordinates[0]];
map.addSource('gpsTrack', { type: 'geojson', data: gpsTracksData });
map.addLayer({
'id': 'gpsTrack',
'type': 'line',
'source': 'gpsTrack',
'layout': {
'line-cap': 'round'
},
'paint': {
'line-color': '#005F9E',
'line-opacity': 0.6,
'line-width': 8
}
});
map.jumpTo({ 'center': coordinates[0], 'zoom': 10 });
map.setPitch(40);
// draw green truck at the start
const point = {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': {
'pointType': 'start'
},
'geometry': {
'type': 'Point',
'coordinates': coordinates[0]
}
},
{
'type': 'Feature',
'properties': {
'pointType': 'end'
},
'geometry': {
'type': 'Point',
'coordinates': coordinates[0]
}
}]
};
map.addSource('point', {
type: 'geojson',
data: point
});
map.addLayer({
'id': 'point',
'source': 'point',
'type': 'symbol',
'layout': {
'icon-image': [
'match',
['get', 'pointType'],
'start',
'truck-outline-green',
'truck-outline-red'
],
'icon-size': 0.6
},
'paint': {
'icon-opacity': 0.8
}
});
// draw gps track
let i = 0;
const timer = setInterval(() => {
if (i < coordinates.length) {
gpsTracksData.features[0].geometry.coordinates.push(coordinates[i]);
map.getSource('gpsTrack').setData(gpsTracksData);
map.panTo(coordinates[i]);
point.features[1].geometry.coordinates = coordinates[i];
i++;
} else {
window.clearInterval(timer);
// draw red truck at the end
map.getSource('point').setData(point);
}
}, 20);
});
</script>
</body>
</html>