Mercator's Projection
Last edited by geldean2 on 18dec2014

Creating Mercator's Map Projection

Andrew Geldean
MATH 198 / CS 199


The goal of this project is to recreate Mercator's map projection using the JavaScript
THREE.js library. The RTICA will accomplish three components: creation of the spherical
earth, a cylinder encompassing the globe, and the map projection behind the two objects.

Another great RTICA representing the distortion of Mercator's Map


Presentation on the Mathematics behind Mercator's Projection


11/20/14 Succesfully created a sphere using the THREE.js library
11/24/14 Added texture to the sphere to complete the earth
11/30/14 Created a cylinder surrounding the globe
12/04/14 Added the map projection behind the cylinder-globe object
12/10/14 Used keyboard commands to scroll map and rotate sphere

Creation of the Sphere

After creating the set up with the scene, camera, renderer, and light source, the next step is to create the sphere. Using the code for
spherical geometry, the resulting visual is a shadowed sphere.


Adding Texture

The next step is adding the surface of the earth by using a textured image of planet earth, loading it, then adding it to
the sphere. By adding it to the sphere, the texture is wrapped around the sphere to cover the whole surface.

Textured sphere

Creation of the Cylinder

The next step is adding the cylinder which will encompass the sphere. Mercator's map is created through a cylindrical
projection: projecting the surface of the sphere onto the cylinder.

Cylindrical projection

Creation of the Map

The final step is adding the projected map to the background and give it the ability to scroll as the earth is rotated left
and right. By synchronizing the earth's rotation and the map's scrolling, a beautiful RTICA is created.