Proj4js Coordinate transformations in the browser

Proj4jsCoordinate 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

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

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

Proj4js Coordinate transformations in the browser