98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg';
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/streets-v11',
|
|
zoom: 0
|
|
});
|
|
var emptyTCP = {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
geometry: {
|
|
type: "LineString",
|
|
coordinates: []
|
|
}
|
|
}]
|
|
}
|
|
|
|
var emptySERIAL = {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
geometry: {
|
|
type: "LineString",
|
|
coordinates: []
|
|
}
|
|
}]
|
|
}
|
|
|
|
map.on('load', function () {
|
|
|
|
map.addSource('routeTCP', { 'type': 'geojson', 'data': emptyTCP })
|
|
map.addSource('routeSERIAL', { 'type': 'geojson', 'data': emptySERIAL })
|
|
|
|
map.addLayer({
|
|
'id': 'routeTCP',
|
|
'type': 'line',
|
|
'source': 'routeTCP',
|
|
'layout': {
|
|
'visibility': 'visible'
|
|
},
|
|
'paint': {
|
|
'line-color': 'blue',
|
|
'line-opacity': 0.75,
|
|
'line-width': 5
|
|
}
|
|
});
|
|
|
|
map.addLayer({
|
|
'id': 'routeSERIAL',
|
|
'type': 'line',
|
|
'source': 'routeSERIAL',
|
|
'layout': {
|
|
'visibility': 'visible'
|
|
},
|
|
'paint': {
|
|
'line-color': 'yellow',
|
|
'line-opacity': 0.75,
|
|
'line-width': 5
|
|
}
|
|
});
|
|
|
|
|
|
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 17 });
|
|
map.setPitch(30);
|
|
|
|
var stateLegendEl = document.getElementById('state-legend');
|
|
stateLegendEl.style.display = 'block';
|
|
})
|
|
|
|
/*function updateMap (TCPlong, TCPlat, SERIALlong, SERIALlat) {
|
|
if(!(TCPlong === 0) && !(TCPlat === 0)){
|
|
emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]);
|
|
map.getSource('routeTCP').setData(emptyTCP);
|
|
}
|
|
if(!(SERIALlong === 0) && !(SERIALlat === 0)){
|
|
emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
|
|
map.getSource('routeSERIAL').setData(emptySERIAL);
|
|
}
|
|
// else if (!([TCPlong, TCPlat] = [0,0])) {
|
|
// map.panTo([TCPlong, TCPlat]);
|
|
// }
|
|
map.panTo([TCPlong, TCPlat]);
|
|
}*/
|
|
|
|
function updateMapTCP (TCPlong, TCPlat) {
|
|
emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]);
|
|
map.getSource('routeTCP').setData(emptyTCP);
|
|
//map.panTo([TCPlong, TCPlat]);
|
|
}
|
|
|
|
function updateMapSERIAL (SERIALlong, SERIALlat) {
|
|
emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
|
|
map.getSource('routeSERIAL').setData(emptySERIAL);
|
|
map.panTo([SERIALlong, SERIALlat]);
|
|
}
|