JavaScript Maps SDK

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/v4/trimblemaps-4.2.2.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.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.setAPIKey('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>
Last updated August 23, 2024.