Proj 4 js Coordinate transformations in the browser

Proj 4 js Coordinate transformations in the browser Michael Adair DM Solutions Group

Proj 4 js A Java. Script library to transform point coordinates from one coordinate system to another, including datum transformations

The problem to solve representing 3 D information in a 2 D 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 3 D surface to 2 D plane transformation • datums define the size and shape of the earth • geographic data is collected/stored using any one CRS

Map Projections • ‘project’ a 3 D surface to 2 D • 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, Geo. Tools • Returns a raster already transformed (in general) • Raster images must be processed on the server • Proj 4 js 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 Proj 4 js! • Allows client to maintain individual features for selection, highlighting, etc.

About Proj 4 js • A Java. Script library • Port of PROJ. 4 and GCTPC (C code) • • • ~50 k 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 Open. Layers

Project infrastructure • Originally developed in Map. Builder • Now part of the OSGeo Meta. CRS project http: //wiki. osgeo. org/wiki/Meta. CRS • Wiki and Trac http: //trac. osgeo. org/proj 4 js/ • SVN: http: //svn. osgeo. org/metacrs/proj 4 js/ • Mailing lists: http: //lists. osgeo. org/mailman/listinfo/Meta. CRS

How to use it <script src="lib/proj 4 js-combined. js"></script> <script src="lib/defs/EPSG 42304. js"></script > … var source = new Proj 4 js. Proj(‘EPSG: 4236’); var dest = new Proj 4 js. Proj(‘EPSG: 42304’); var p = new Proj 4 js. Point(-76. 0, 45. 0); Proj 4 js. transform(source, dest, p); …. • p. x and p. y are now EPSG: 42304 easting and northing in meters

Demo • http: //localhost: 8080/mapbuilder/examples/proj. De mo/index. html • http: //localhost/oltrunk/examples/graticule. html • http: //localhost/proj 4 js/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/proj 4 js/ • http: //proj 4 js. 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. html