57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg';
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/streets-v11',
|
|
zoom: 0
|
|
});
|
|
var empty = {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
geometry: {
|
|
type: "LineString",
|
|
coordinates: []
|
|
}
|
|
}]
|
|
}
|
|
|
|
map.on('load', function () {
|
|
// save full coordinate list for later
|
|
//var coordinates = data.features[0].geometry.coordinates;
|
|
|
|
// start by showing just the first coordinate
|
|
//data.features[0].geometry.coordinates = [coordinates[0]];
|
|
|
|
// add it to the map
|
|
//map.addSource('trace', { type: 'geojson', data: data });
|
|
|
|
map.addSource('route', { 'type': 'geojson', 'data': empty })
|
|
|
|
map.addLayer({
|
|
'id': 'route',
|
|
'type': 'line',
|
|
'source': 'route',
|
|
'paint': {
|
|
'line-color': 'yellow',
|
|
'line-opacity': 0.75,
|
|
'line-width': 5
|
|
}
|
|
});
|
|
|
|
// setup the viewport
|
|
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 14 });
|
|
map.setPitch(30);
|
|
|
|
// on a regular basis, add more coordinates from the saved list and update the map
|
|
//var i = 0;
|
|
//var timer = window.setInterval(, 10);
|
|
|
|
})
|
|
|
|
function updateMap (long, lat) {
|
|
let coordinates = [long, lat]
|
|
empty.features[0].geometry.coordinates.push(coordinates);
|
|
map.getSource('route').setData(empty);
|
|
map.panTo(coordinates);
|
|
} |