proj4js coordinate transformations in the browser michael adair dm solutions group

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

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

Questions?

Thanks for your interest!• http://trac.osgeo.org/proj4js/• http://proj4js.org/

Mike Adairmadair@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