Track Santa with Ionic Angular and Cesium

This year, I decided to create an interactive app to track Santa’s journey in real time! To achieve this, I used Ionic Angular for the cross-platform interface and CesiumJS for the 3D globe. Here’s how I did it.

Introduction

The idea was to combine the power of CesiumJS, a robust library for 3D visualization and mapping, with the flexibility of Ionic Angular, a framework that enables the creation of mobile and web apps from a single codebase.

In this tutorial, I’ll walk you through the key steps to build a similar app based on my experience.

Project Setup

1. Setting Up Ionic Angular

To start, I created a new Ionic Angular project:

1
2
npm install -g @ionic/cli
ionic start track-santa blank --type=angular

This command creates a minimal project scaffold. After entering the project directory, I launched the development server:

1
2
cd track-santa
ionic serve

The browser loaded an empty app, representing the starting point of the project.

2. Integrating CesiumJS

I installed CesiumJS in the project using npm:

1
npm install cesium

Then, I configured Cesium to load its assets properly by modifying the angular.json file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/cesium/Build/Cesium",
    "output": "assets/cesium"
  }
],
"scripts": [
  "node_modules/cesium/Build/Cesium/Cesium.js"
]

Finally, I added the global variable CESIUM_BASE_URL to tell Cesium where to find its assets:

1
(window as any).CESIUM_BASE_URL = '/assets/cesium';

This configuration was added to the main.ts file.

Creating the 3D Globe

1. HTML Layout

In the cesium-map.page.html file, I created a container for the Cesium globe and a footer with interactive buttons:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<ion-content id="cesiumContainer"></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons>
      <ion-button (click)="showSantaStatus()">
        <ion-icon name="eye-outline"></ion-icon>
        Status
      </ion-button>
      <ion-button (click)="trackSantaJourney()">
        <ion-icon name="rocket-outline"></ion-icon>
        Journey
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

2. Initializing Cesium

In the cesium-map.page.ts file, I initialized the Cesium globe and configured the buttons:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Component, OnInit } from '@angular/core';
import * as Cesium from 'cesium';

@Component({
  selector: 'app-cesium-map',
  templateUrl: './cesium-map.page.html',
  styleUrls: ['./cesium-map.page.scss'],
})
export class CesiumMapPage implements OnInit {
  viewer: Cesium.Viewer;

  ngOnInit() {
    this.viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
    });
  }

  showSantaStatus() {
    this.viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 50000),
    });
  }

  trackSantaJourney() {
    console.log('Tracking Santa...');
  }
}

Source Code

The Source Code is available on GitHub.

Conclusion

With Ionic Angular and CesiumJS, I successfully created an interactive and fun app to follow Santa during his journey. The project combines the best of 3D visualization and cross-platform flexibility, delivering an engaging experience.

If you want to create something similar, follow this guide and add your personal touch.