Live Feature Update
Shows the progression of a GPS track by adding new GPS points to a feature in a line layer. This feature could be used for visualizing real-time data sources.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.18.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.18.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>
Live Feature Update
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.18.0.css" /> <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.18.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>