85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
"use strict";
|
|
function getFlight(flightPath) {
|
|
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);
|
|
map.setCenter(data.features[0].geometry.coordinates);
|
|
})
|
|
.catch(function (error) {
|
|
console.error("Error loading markers data", error);
|
|
});
|
|
});
|
|
// Draw GeoJSON data with d3
|
|
let circles;
|
|
function drawData(data) {
|
|
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.coordinates).x;
|
|
})
|
|
.attr("cy", function (d) {
|
|
return mapViewLabelController.projectCoordinatesToPosition(d.geometry.coordinates).y;
|
|
});
|
|
}
|
|
//# sourceMappingURL=02-script.js.map
|