4

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?

Improve this question

2 Answers 2

Reset to default
5

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).

Improve this answer
11
  • I take solution 2. What I get is: TypeError: this.proj is null
    – Lokomotywa
    Commented Oct 28, 2014 at 15:28
  • 1
    I can't do anything. It's related to other parts in your code: I've added demos links and they both work with the exact same code as the inline code in the answer.
    – ThomasG77
    Commented Oct 28, 2014 at 15:41
  • Solution one seems to work, but I get NetworkError: 404 Not Found - http://myserver.de/myfolder/defs/EPSG3857.js" as soon as I add <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.min.js"></script>
    – Lokomotywa
    Commented Oct 28, 2014 at 15:58
  • @ThomasG77 I doubt that +datum=potsdam is implemented in Proj4js. I would suggest to use the correct +towgs84 in any case.
    – AndreJ
    Commented Oct 28, 2014 at 16:00
  • 1
    It seems you have to copy proj4.defs["EPSG:3857"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"; in a new file EPSG3857.js in the defs directory. Not really clean but it's because EPSG code 3857 was introduce later...
    – ThomasG77
    Commented Oct 28, 2014 at 16:47
1

For ol 2.13.1 and proj4 2.3.7 this code allows the scaleline and getGeodesicLength to both operate correctly:

/**
adaptor for ol2 to consume proj4 2.x 
*/
var Proj4js = window["Proj4js"] = window["Proj4js"] || {
    Proj: function(code) {
        var result = proj4(code);
        result.srsCode = code; // for ol2 compatibility
        return result;
    },
    defs: proj4.defs,
    transform: proj4
};
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.