Programming by Bernhard Jenny and Bojan Savric, College of Earth, Ocean and Atmospheric Sciences, Oregon State University, and Mostafa El-Fouly, TU Munich.
Contact: Bernhard Jenny email@example.com
License: GNU General Public License Version 2: http://www.gnu.org/licenses/gpl-2.0.html
All code specific to an application is included in the UI.js files. These files construct the HTML GUI, provide event handlers and create the map with a projection.
SimpleMap shows a map with a static projection. CentralMeridianSlider shows a map and slider to adjust the central meridian. ProjectionList has a menu to select from various projections. LambertTransitionSlider illustrates Wagner's transformation applied to the Lambert azimuthal projection to create a variety of equal-area projections. MillerTransformation illustrates a transformation of the Mercator projection suggested by Miller in 1942. StrebeTransformation illustrates a transformation method invented by D. Strebe.
UI.js: DOM event handlers and construction of the model consisting of a map, one or more layers and a projection.
layer.js: A layer loads a shapefile (points, polylines or polygons), and projects and draws the data. Polygons are not filled. Shapefiles must use 'geographical' coordinates.
map.js: Contains an array of layers, a projection, and scale factor applied before drawing the map. After the layer, canvas, projection and scale are created, invoke map.load to load the layer geometry.
Extending CanvasMap with Custom Projections
To extend CanvasMap with an additional projection, duplicate an existing projection file in the projections folder and change the function name and the included toString() and forward() functions.
The forward function receives longitude and latitude values in radians. The projected coordinates have to be written to the xy array. The xy parameter is only for returning the projected coordinates and does not contain valid data when the function is called.
To apply the new projection to the map, change UI.js. If you use the "ProjectionList" map, add your projection to the getProjection function in UI.js. Also include your projection in the element in index.html. The value for the new in the element has to be unique and match the projectionName parameter of getProjection in UI.js.