1. Proj4js Coordinate transformations in the browser
Michael Adair
DM Solutions Group

2. Proj4js
A JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations

3. The problem to solve representing 3D information in a 2D medium
Same issue for paper maps and web maps on computer screen.
Mathematics defines: Coordinate Reference Systems (CRS)

4. Coordinate Reference Systems (CRS)
consist of a map projection + datum
projections define 3D surface to 2D plane transformation
datums define the size and shape of the earth
geographic data is collected/stored using any one CRS

5. Map Projections ‘project’ a 3D surface to 2D
Applicable for defined geographic areas
attempt to minimize distortions in area, distance, scale, etc.

6. Datums Datums define the size and shape of the earth
The earth is not a sphere, almost an ellipsoid

7. Examples

8. Examples

9. Examples

10. Examples

11. Back to the problem A map can only use one CRS
Need to combine data stored in different CRS’s
transformation is required between coordinate systems

12. Solutions for web mapping
Vector data consists of a series of points representing points, line and polygon geometries (along with attributes)
Coordinates in various CRS
On the server side:
PROJ.4, CS-MAP, GeoTools
Returns a raster already transformed (in general)
Raster images must be processed on the server
Proj4js is for points, not rasters
It is desirable to manipulate individual features in the browser

13. Solutions for web mapping
convert between CRS in the Client (web browser) with Proj4js!
Allows client to maintain individual features for selection, highlighting, etc.

14. About Proj4js A JavaScript library
Port of PROJ.4 and GCTPC (C code)
~50k compressed; less if not all projections needed
Includes some datum transformations
Dynamic loading of CRS parameters (or not)
Dynamic loading of projection code (or not)
Easy to use with OpenLayers

15. Project infrastructure
Originally developed in MapBuilder
Now part of the OSGeo MetaCRS project
Wiki and Trac
SVN:
Mailing lists:

16. How to use it
<script src="lib/proj4js-combined.js"></script>
<script src="lib/defs/EPSG42304.js"></script > …
var source = new Proj4js.Proj(‘EPSG:4236’);
var dest = new Proj4js.Proj(‘EPSG:42304’);
var p = new Proj4js.Point(-76.0,45.0);
Proj4js.transform(source, dest, p); ….
p.x and p.y are now EPSG:42304 easting and northing in meters

17. Demo http://localhost:8080/mapbuilder/examples/projDemo/index.html

18. Demo (2) Equal area maps:
KML:

19. Thanks for your interest!
Questions?
Thanks for your interest!
Mike Adair
with graphics from Peter H. Dana, The Geographer's Craft Project, Department of Geography, The University of Colorado at Boulder