console.clear();
new Vue({
el: '#app',
data: () => ({
distance: null,
airports: [],
currentAirport: null,
lastAirport: null,
markers: [
{
airport: null,
x: 200,
y: 300,
startX: 0,
startY: 0,
fill: '#f47825',
current: false
},
{
airport: null,
x: 500,
y: 100,
startX: 0,
startY: 0,
fill: '#00b26b',
current: false
}
]
}),
filters: {
numberWithCommas(val) {
return ( val && val.toString ? val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : val );
}
},
mounted() {
// D3 Projection
var projection = d3.geoAlbersUsa().scale([1500]); // scale things down so see entire US
this.projection = projection;
// D3 US States map
fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/us-states.json')
.then( response => response.json() )
.then( (states) => {
// Define path generator
var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
// Bind the data to the SVG and create one path per GeoJSON feature
d3.select( this.$refs.states )
.selectAll("path")
.data(states.features)
.enter()
.append("path")
.attr("d", path);
});
// Airports
fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/airports.json')
.then( response => response.json() )
.then( (airports) => {
// Let's only focus on the top 100
airports = airports.slice(0,100);
var i = airports.length, d, proj;
while(i--){
d = airports[i];
proj = projection([d.Lng, d.Lat]);
if ( proj ) {
d.x = proj[0];
d.y = proj[1];
} else {
airports.splice(i, 1);
}
}
this.airports = airports.reverse();
var la = null;
this.markers.forEach((marker)=>{
var ra = this.randomAirport();
if ( ra == la ) { ra = this.randomAirport(); }
la = ra;
marker.airport = ra;
marker.x = ra.x;
marker.y = ra.y;
});
this.markerDistance();
});
},
methods: {
randomAirport(){
return this.airports[ Math.floor(Math.random() * this.airports.length) ];
},
markerSet(e, marker){
if ( e ) { e.preventDefault(); }
marker = marker || this.markers[0];
marker.airport = null;
marker.current = true;
marker.startX = marker.x;
marker.startY = marker.y;
this.currentAirport = null;
this.currentMarker = marker;
if ( this.airplaneTween ) {
var oldTween = this.airplaneTween;
var tl = new TimelineLite();
tl.to(this.$refs.airplane,0.2,{
opacity: 0,
ease: "Linear.easeNone",
onComplete: function(){
if ( oldTween ) { oldTween.kill(); }
}
});
this.airplaneFade = tl;
}
this.markerDrag(e);
document.addEventListener('mousemove',this.markerDrag);
document.addEventListener('mouseup', this.markerStop);
this.$refs.map.addEventListener('mouseleave', this.markerLeave);
},
markerDrag(e){
this.currentMarker.airport = this.currentAirport;
if ( this.currentAirport ) {
this.currentMarker.x = this.currentAirport.x;
this.currentMarker.y = this.currentAirport.y;
} else {
d3.event = e;
var mouse = d3.mouse(this.$refs.map);
this.currentMarker.x = mouse[0];
this.currentMarker.y = mouse[1];
}
this.markerDistance();
},
markerLeave(){
this.currentMarker.x = this.currentMarker.startX;
this.currentMarker.y = this.currentMarker.startY;
this.markerStop();
},
markerStop(){
console.log('stop!');
document.removeEventListener('mousemove',this.markerDrag);
document.removeEventListener('mouseup', this.markerStop);
this.$refs.map.removeEventListener('mouseleave', this.markerLeave);
this.currentMarker.current = false;
this.currentMarker = null;
this.markerDistance();
},
markerConnect(){
var m1 = this.markers[1],
m2 = this.markers[0];
if ( m1.x < m2.x ) {
m1 = this.markers[0];
m2 = this.markers[1];
}
var dx = m2.x - m1.x,
dy = m2.y - m1.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + m2.x + "," + m2.y + "A" + dr + "," + dr + " 0 0,1 " + m1.x + "," + m1.y ;
},
calcDistance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180/Math.PI
dist = dist * 60 * 1.1515
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist;
},
markerDistance(){
var marker1 = this.markers[0];
var latLng1 = this.projection.invert([ marker1.x, marker1.y ]).reverse();
var marker2 = this.markers[1];
var latLng2 = this.projection.invert([ marker2.x, marker2.y ]).reverse();
this.distance = Math.round( this.calcDistance(latLng1[0], latLng1[1], latLng2[0], latLng2[1]) );
this.airplaneAnimate();
},
airportSnap(e, airport){
if ( airport !== this.currentAirport ) {
airport.current = true;
this.currentAirport = airport;
if ( this.currentMarker ) { this.currentMarker.airport = airport; }
}
},
airportClick(e,airport){
if ( !this.currentMarker ) { this.markerSet(e); }
this.currentAirport = airport;
this.currentMarker.x = this.currentAirport.x;
this.currentMarker.y = this.currentAirport.y;
if ( this.currentMarker ) { this.currentMarker.airport = airport; }
},
airportLeave(e,airport){
airport.current = false;
this.currentAirport = null;
this.lastAirport = airport;
},
airplaneAnimate(){
var path = this.markerConnect();
var newTween = new TimelineMax({ repeat: -1, delay: -0.2 });
var duration = Math.min( this.distance / 80, 15 );
var opacityDuration = Math.min(duration * 0.2, 0.3);
if ( this.airplaneFade && this.airplaneFade.isActive() ) {
newTween.pause();
this.airplaneFade.eventCallback('onComplete',function(){
newTween.play();
});
} else if ( this.airplaneTween ) {
this.airplaneTween.kill();
}
var bez = MorphSVGPlugin.pathDataToBezier(path)
newTween.to(this.$refs.airplane, duration, {
bezier: {
values: bez,
curviness: 1,
autoRotate: -90,
type:"cubic"
},
reversed: true,
ease: Linear.easeNone
}, 0);
newTween.fromTo(this.$refs.airplane, opacityDuration, {
opacity: 0
},{
opacity: 1,
delay: opacityDuration/2,
ease: "Linear.easeNone"
}, 0);
newTween.to(this.$refs.airplane, opacityDuration, {
opacity: 0,
ease: 'Linear.easeNone'
}, '-='+opacityDuration);
this.airplaneTween = newTween;
},
}
});
