108 lines
2.7 KiB
TypeScript
108 lines
2.7 KiB
TypeScript
function getFlight(flightPath : string){
|
|
let fData;
|
|
|
|
console.log(`Getting data from: $(filePath}`);
|
|
|
|
return fData;
|
|
}
|
|
|
|
// #region Map Section
|
|
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9yZGl0b3N0IiwiYSI6ImQtcVkyclEifQ.vwKrOGZoZSj3N-9MB6FF_A';
|
|
let map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/outdoors-v9',
|
|
zoom: 14
|
|
});
|
|
|
|
let mapViewLabelController = new MapViewLabelController(map);
|
|
|
|
// Get Mapbox map canvas container
|
|
let canvas = map.getCanvasContainer();
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
|
|
// Overlay d3 on the map
|
|
let svg = d3.select(canvas).append("svg");
|
|
|
|
// Load map and dataset
|
|
map.on('load', function () {
|
|
d3.json(`data/${flightId}_track.json`)
|
|
.then(function (flightData) {
|
|
let trackData = {
|
|
type: "FeatureCollection",
|
|
features: [
|
|
{
|
|
type: "Feature",
|
|
geometry: flightData.routes[0].geometry
|
|
}
|
|
]
|
|
};
|
|
|
|
map.addSource('flight-track', {
|
|
type: 'geojson',
|
|
data: trackData
|
|
});
|
|
|
|
map.addLayer({
|
|
id: 'flight-layer',
|
|
type: 'line',
|
|
source: 'flight-track',
|
|
layout: {
|
|
},
|
|
paint: {
|
|
'line-color': 'blue',
|
|
'line-width': 5
|
|
}
|
|
});
|
|
})
|
|
.catch(function(error){
|
|
console.error("Error loading track data", error);
|
|
});
|
|
|
|
d3.json(`data/${flightId}_markers.json`)
|
|
.then(function (data) {
|
|
drawData(data as GeoJSON.FeatureCollection);
|
|
map.setCenter((data as GeoJSON.FeatureCollection)!.features[0]!.geometry!.coordinates);
|
|
})
|
|
.catch(function(error){
|
|
console.error("Error loading markers data", error);
|
|
});
|
|
});
|
|
|
|
|
|
// Draw GeoJSON data with d3
|
|
let circles : d3.Selection<
|
|
SVGCircleElement,
|
|
GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>,
|
|
SVGSVGElement,
|
|
unknown
|
|
>;
|
|
|
|
function drawData(data : GeoJSON.FeatureCollection) {
|
|
|
|
mapViewLabelController.drawLabels(data);
|
|
|
|
// Add circles
|
|
circles = svg.selectAll("circle")
|
|
.data(data.features)
|
|
.enter()
|
|
.append("circle")
|
|
.attr("r", 8);
|
|
|
|
// Call the update function
|
|
update();
|
|
|
|
// Update on map interaction
|
|
map.on("viewreset", update);
|
|
map.on("move", update);
|
|
map.on("moveend", update);
|
|
}
|
|
|
|
function update(){
|
|
circles.attr("cx", function(d){
|
|
return mapViewLabelController.projectCoordinatesToPosition((d.geometry as GeoJSON.Point).coordinates).x;
|
|
})
|
|
.attr("cy", function(d){
|
|
return mapViewLabelController.projectCoordinatesToPosition((d.geometry as GeoJSON.Point).coordinates).y;
|
|
});
|
|
}
|