Proj4js OpenLayers – Using Proj4js in OpenLayers: Proj4js is Not Defined Issue

openlayers-2proj4js

I want to use Proj4js.

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4-src.js"></script>
<script type="text/javascript" >
....

    Proj4js.defs['EPSG:31466'] = 'xyz';
....
 </script>

I get a javascript error: ReferenceError: Proj4js is not defined. When I look at the source specified at /cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4-src.js, I do not see any specification of an object called Proj4js having a property defs. Still, that is what the tutorials are saying (like http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example).

What do I do wrong?

Best Answer

You have two choices

Solution 1:

You can change the reference to proj4js. OpenLayers 2.x default support is with Proj4js 1.1 whereas you use 2.x.

<!doctype html>
<html lang="en">
  <head>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
    <script type="text/javascript">
      //Correct datum for potsdam (altough already corrected with changes in towgs84 in the projection declaration)
      // Only useful if you use the outdated spatialreference.org proj4js definition whereas epsg.io is right...
      Proj4js.Datum["potsdam"] = {towgs84: "598.1,73.7,418.2,0.202,0.045,-2.455,6.7", ellipse: "bessel", datumName: "Potsdam Rauenberg 1950 DHDN"};
      // Declare projection. Definition comes from http://epsg.io/31466/
      Proj4js.defs["EPSG:31466"] = "+proj=tmerc +lat_0=0 +lon_0=6 +k=1 +x_0=2500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs";
      console.log(Proj4js.defs["EPSG:31466"]);
      var proj_wgs84 = new OpenLayers.Projection("EPSG:4326");
      var proj_31466 = new OpenLayers.Projection("EPSG:31466");
      // Center for projection EPSG:31466
      var point = new OpenLayers.LonLat(2769212.70, 5678724.61);
      var new_point= point.clone().transform(proj_31466, proj_wgs84);
      console.log(new_point.lat, new_point.lon);
    </script>
  </head>
  <body>
  </body>
</html>

Demo 1 (open the browser console to see)

Solution 2:

Or you can use the new proj4js version by adding a wrapper to match previous version behaviour:

<!doctype html>
<html lang="en">
  <head>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
    <script type="text/javascript">
      //Snippet comes from http://osgeo-org.1560.x6.nabble.com/OL-2-13-1-latest-Proj4js-td5081636.html
      window.Proj4js = {
        Proj: function(code) {
          return proj4(Proj4js.defs[code]);
        },
        defs: proj4.defs,
        transform: proj4
      };
      // Definition comes from http://spatialreference.org/ref/epsg/31466/
      proj4.defs["EPSG:31466"] = "+proj=tmerc +lat_0=0 +lon_0=6 +k=1 +x_0=2500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs";
      console.log(Proj4js.defs["EPSG:31466"]);

      var proj_wgs84 = new OpenLayers.Projection("EPSG:4326");
      var proj_31466 = new OpenLayers.Projection("EPSG:31466");
      // Center for projection EPSG:31466
      var point = new OpenLayers.LonLat(2769212.70, 5678724.61);
      var new_point= point.transform(proj_31466, proj_wgs84);
      console.log(new_point.lat, new_point.lon);
    </script>
  </head>
  <body>
  </body>
</html>

Demo 2 (open the browser console to see)

You may encounter some border effects although it seems minor according to the thread about OpenLayers 2.x support with Proj4js 2.x series

There was small difference between both results but now it's OK. It was due to parameters correction with proj4js for this particular projection (EPSG:31466).

Related Question