Skip to content

Commit

Permalink
Updated the Rotation of Globe in Any Direction ✅
Browse files Browse the repository at this point in the history
  • Loading branch information
@Eddy08
Eddy08 committed Feb 12, 2023
1 parent 1ab18f0 commit cd2a661
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 79 deletions.
2 changes: 1 addition & 1 deletion src/app/map/map.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<highcharts-chart [Highcharts]="Highcharts"
[options]="map" [(update)]="updateFlag" [callbackFunction]="chartCallback" [constructorType]="chartConstructor" style="width: 100%; height: 400px; display: block;"></highcharts-chart>
</div>
<button (click)="explore()">Explore</button>
<!-- <button (click)="explore()">Explore</button> -->
<!-- <div style="height: 100vh; border:solid green 2px;">
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block;">
<
Expand Down
160 changes: 82 additions & 78 deletions src/app/map/map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,9 +430,13 @@ export class MapComponent {
chart.redraw(true);
}
// console.log('Inisde afterAnimate rotate Globe');
let rot_x_axis = 25;
console.log(chart.mapView.options.projection.rotation[0])
console.log(chart.mapView.options.projection.rotation[1])

setInterval(() => {
let rotationArray = [rot_x_axis % 360, -30];
let rot_x_axis = chart.mapView.options.projection.rotation[0]+2;
let rot_y_axis = chart.mapView.options.projection.rotation[1]
let rotationArray = [rot_x_axis % 360, rot_y_axis];
chart.mapView.update(
{
projection: {
Expand All @@ -445,9 +449,9 @@ export class MapComponent {
);
rot_x_axis += 1;
// console.log('rot_x_axis', rot_x_axis % 360);
chart.redraw(true);
// console.log('updated chart', chart);
}, 100);
chart.redraw(true);
}
// console.log('Chart --> ', e.target.chart);
};
Expand Down Expand Up @@ -669,82 +673,82 @@ export class MapComponent {
],
};

explore() {
console.log('inside explore method');
console.log(this.chartCallback);
// const chart = this.chartCallback.chart;
console.log('chart', this.map.series);
let index = this.map.series?.findIndex(
(x: any) => x.events!== undefined
);
console.log(index)
if(index && this.map.series){
console.log(this.map?.series[index])
if(this.map.series[index].events ){
if(this.map.series[index].events?.afterAnimate)
delete this.map.series[index]?.events?.afterAnimate
this.updateFlag=true;
}
}

// this.map.series?[index].events.afterAnimate=this.stopAnimate();
/*
this.map.chart.(
{
type: 'mapline',
name: 'Flight route, Amsterdam - Los Angeles',
animation: false,
id: 'flight-route',
data: [
{
geometry: {
type: 'LineString',
coordinates: [
[4.9, 53.38], // Amsterdam
[-118.24, 34.05], // Los Angeles
],
},
color: '#313f77',
},
],
lineWidth: 2,
accessibility: {
exposeAsGroupOnly: true,
},
},
false
);
chart.addSeries(
{
type: 'mappoint',
animation: false,
data: [
{
name: 'Amsterdam',
geometry: {
type: 'Point',
coordinates: [4.9, 53.38],
},
},
{
name: 'LA',
geometry: {
type: 'Point',
coordinates: [-118.24, 34.05],
},
},
],
color: '#313f77',
accessibility: {
enabled: false,
},
},
false
);
chart.redraw(true);
// explore() {
// console.log('inside explore method');
// console.log(this.chartCallback);
// // const chart = this.chartCallback.chart;
// console.log('chart', this.map.series);
// let index = this.map.series?.findIndex(
// (x: any) => x.events!== undefined
// );
// console.log(index)
// if(index && this.map.series){
// console.log(this.map?.series[index])
// if(this.map.series[index].events ){
// if(this.map.series[index].events?.afterAnimate)
// delete this.map.series[index]?.events?.afterAnimate
// this.updateFlag=true;
// }
// }

// // this.map.series?[index].events.afterAnimate=this.stopAnimate();
// /*
// this.map.chart.(
// {
// type: 'mapline',
// name: 'Flight route, Amsterdam - Los Angeles',
// animation: false,
// id: 'flight-route',
// data: [
// {
// geometry: {
// type: 'LineString',
// coordinates: [
// [4.9, 53.38], // Amsterdam
// [-118.24, 34.05], // Los Angeles
// ],
// },
// color: '#313f77',
// },
// ],
// lineWidth: 2,
// accessibility: {
// exposeAsGroupOnly: true,
// },
// },
// false
// );
// chart.addSeries(
// {
// type: 'mappoint',
// animation: false,
// data: [
// {
// name: 'Amsterdam',
// geometry: {
// type: 'Point',
// coordinates: [4.9, 53.38],
// },
// },
// {
// name: 'LA',
// geometry: {
// type: 'Point',
// coordinates: [-118.24, 34.05],
// },
// },
// ],
// color: '#313f77',
// accessibility: {
// enabled: false,
// },
// },
// false
// );
// chart.redraw(true);

*/
}
// */
// }

/*
reflow() {
Expand Down

1 comment on commit cd2a661

@vercel
Copy link

@vercel vercel bot commented on cd2a661 Feb 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mfe-map – ./

mfe-map-eddy08.vercel.app
mfe-map.vercel.app
mfe-map-git-main-eddy08.vercel.app

Please sign in to comment.