![Page 1: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/1.jpg)
Proj4jsCoordinate transformations in the browser
Michael Adair
DM Solutions Group
![Page 2: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/2.jpg)
Proj4js
A JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations
![Page 3: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/3.jpg)
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)
![Page 4: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/4.jpg)
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
![Page 5: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/5.jpg)
Map Projections
• ‘project’ a 3D surface to 2D
• Applicable for defined geographic areas
• attempt to minimize distortions in area, distance, scale, etc.
![Page 6: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/6.jpg)
Datums
• Datums define the size and shape of the earth• The earth is not a sphere, almost an ellipsoid
![Page 7: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/7.jpg)
Examples
![Page 8: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/8.jpg)
Examples
![Page 9: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/9.jpg)
Examples
![Page 10: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/10.jpg)
Examples
![Page 11: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/11.jpg)
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
![Page 12: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/12.jpg)
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
![Page 13: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/13.jpg)
Solutions for web mapping
• convert between CRS in the Client (web browser) with Proj4js!
• Allows client to maintain individual features for selection, highlighting, etc.
![Page 14: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/14.jpg)
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
![Page 15: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/15.jpg)
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
![Page 16: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/16.jpg)
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
![Page 17: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/17.jpg)
Demo
• http://localhost:8080/mapbuilder/examples/projDemo/index.html
• http://localhost/oltrunk/examples/graticule.html• http://localhost/proj4js/test
![Page 18: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/18.jpg)
Demo (2)
• Equal area maps: http://www.equal-area-maps.com/mollweide.php
• KML: http://bbs.keyhole.com/ubb/download.php?Number=35858
![Page 19: Proj4js Coordinate transformations in the browser Michael Adair DM Solutions Group](https://reader036.vdocuments.net/reader036/viewer/2022062423/5697bf7c1a28abf838c84239/html5/thumbnails/19.jpg)
Questions?
Thanks for your interest!• http://trac.osgeo.org/proj4js/• http://proj4js.org/
Mike [email protected]
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