2

Using Proj4js to transform lat lng from 4326 to 27700 but coming out unchanged. I am using OpenLayers 2.12 (OS API Leisure map) EPSG 27700, Proj4js (CDN)

I have added the definition to proj4

epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection 
        // To
        proj4.defs("EPSG:27700","+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs");
        EPSG27700 = new OpenLayers.Projection("EPSG:27700");


        var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286).transform(epsg4326, EPSG27700);
        console.log(lonLat);

lonLat is coming out as  {lon: -0.1279688, lat: 51.5077286} so unchanged.

I think I'm missing a trick.

2

transform converts the point in place so no new point is returned. See the documentation:

Transform the LonLat object from source to dest. This transformation is in place: if you want a new lonlat, use .clone() first.

So you want something like:

    var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286);
    lonLat.transform(epsg4326, EPSG27700);
    console.log(lonLat);
  • The transformation is in place, but it still returns the result, for example in map.setCenter(new OpenLayers.LonLat(-0.1279688, 51.5077286).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject())); – Mike May 22 at 13:06
  • Thanks for the tip, however both still output the original lat/lng – Simon May 22 at 13:28
1

OpenLayers 2 uses an earlier proj4 (version 1.1.0) syntax:

Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";

or with proj4 version 2:

<!doctype html>
<html lang="en">
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">

      window.Proj4js = {
        Proj: function(code) {
          return proj4(Proj4js.defs[code]);
        },
        defs: proj4.defs,
        transform: proj4
      };

      proj4.defs("EPSG:27700","+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs");

      var epsg4326 = new OpenLayers.Projection("EPSG:4326");
      var EPSG27700 = new OpenLayers.Projection("EPSG:27700");

      var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286).transform(epsg4326, EPSG27700);
      alert(lonLat.lon + ' ' + lonLat.lat);

    </script>
  </body>
</html>
0

Ok, I figured out my issue. I looked at the post Mike shared Using Proj4js in Openlayers - Proj4js is not defined and tried the example code in my project which still failed. That narrowed it down to the js references. So I copied the references and et voila; success!

My references: https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4-src.js https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js

Changed to: https://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.min.js https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js

Note that it worked with both versions of OpenLayers js file but not when using 2.5.0.

Thanks to Ian and Mike for helping!

  • 2..5.0 is working for me. I've added the code to my answer. – Mike May 22 at 16:23
  • Working with mine now too. Thanks Mike! – Simon May 23 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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