Rae’s Travels is a personal project in which I created an Angular web app that combines the idea of a geotagged photo album, like Flikr’s Map with a blog, allowing users to create a visualized scrap book of their adventures.

This specific profile, is of Terazha Pitts from sunny California who is a perfect guinea pig for this project since she’s loves the idea of being able to visualize her travels in one place. The entries we’ve listed here are only a small handful of the places she’s been to.

Check out the live site!

Technology

The web app is built around the open source project WebGL Earth which is in charge of rendering a JavaScript based, interactive 3D globe. I build on top of this by using Angular to create a wrapper around WebGL Earth. This wrapper is in charge of mapping the interactions with the globe to specific adventure posts.

These posts are stored as Marker objects which look like this:

export class Marker {
    constructor(
        public latitude: number,
        public longitude: number,
        public title: string,
        public icon: string,
        public associatedContent?: Content[],
        public description?: string,
        public date?: string,
        public featuredImage?: string,
        public iconHeight = 100,
        public iconWidth = 100,
    ) { }
}

When a marker is clicked, it’s contents are handed to a detail-view component that is in charge of neatly rendering the contents.

Related projects

The angular wrapper used to build Rae’s travels is itself very flexible. In this iteration, I use Mapquest’s reverse geo-coding api to live update the address that is sitting at the center of the cross-hairs