Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group

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

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)

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

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

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

Examples

Examples

Examples

Examples

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

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

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

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

Project infrastructure Originally developed in MapBuilder Now part of the OSGeo MetaCRS project http://wiki.osgeo.org/wiki/MetaCRS Wiki and Trac http://trac.osgeo.org/proj4js/ SVN: http://svn.osgeo.org/metacrs/proj4js/ Mailing lists: http://lists.osgeo.org/mailman/listinfo/MetaCRS

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

Demo http://localhost:8080/mapbuilder/examples/projDemo/index.html http://localhost/oltrunk/examples/graticule.html http://localhost/proj4js/test

Demo (2) Equal area maps: http://www.equal-area-maps.com/mollweide.php KML: http://bbs.keyhole.com/ubb/download.php?Number=35858

Thanks for your interest! Questions? Thanks for your interest! http://trac.osgeo.org/proj4js/ http://proj4js.org/ Mike Adair madair@dmsolutions.ca with graphics from Peter H. Dana, The Geographer's Craft Project, Department of Geography, The University of Colorado at Boulder http://www.colorado.edu/geography/gcraft/notes/mapproj/mapproj.html