Search code examples
javascriptgisproj4jsproj

Proj4JS - Transformation 2.3.3 vs 2.4.3


Why in the heck in Proj4JS that 2.4.3 with the same code transforms coordinates completely different? See this fiddle.

If you Swap the order of the proj4js resources on the left. You will see that 2.3.3 transforms accurately and 2.4.3 tranforms completely wrong.

I have also included 2 examples that you can use right in this question.

http://jsfiddle.net/8ztfhes0/17/

EDIT - So in doing a little more research. I found that The issue actually arises in version 2.3.16. Up to 2.3.15 it is fine.

The commit comment = for 2.3.16 "adds better tmerc projection"

2.4.3 Sample

proj4.defs("EPSG:26910","+proj=utm +zone=10 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");
    var source = new proj4.Proj('EPSG:26910');  
    var dest = new proj4.Proj('EPSG:4326');      
    $("#lat").val(4970142.88145653);
    $("#lng").val(500532.52879695);
    $("#convert").on("click", function(){
        var p = new proj4.Point($("#lng").val(), $("#lat").val() );
        proj4.transform(source, dest, p);
        console.log("X : " +p.x + " \nY : " + p.y);
        alert("X : " +p.x + " \nY : " + p.y);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>
    
    Lng : <input type="number" id="lng" />
    Lat : <input type="number" id="lat" />
    <button id="convert">Convert</button>
    

2.3.3 example

proj4.defs("EPSG:26910","+proj=utm +zone=10 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");
    var source = new proj4.Proj('EPSG:26910');  
    var dest = new proj4.Proj('EPSG:4326');      
    $("#lat").val(4970142.88145653);
    $("#lng").val(500532.52879695);
    $("#convert").on("click", function(){
        var p = new proj4.Point($("#lng").val(), $("#lat").val() );
        proj4.transform(source, dest, p);
        console.log("X : " +p.x + " \nY : " + p.y);
        alert("X : " +p.x + " \nY : " + p.y);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js"></script>
    
    Lng : <input type="number" id="lng" />
    Lat : <input type="number" id="lat" />
    <button id="convert">Convert</button>
    


Solution

  • It looks like the problem is that you are using the input parameter p instead of the value returned by proj4.transform. Also, as a side note, the documentation for the current version of proj4js (2.4.3 as of this writing) shows that you can call proj4 directly instead of proj4.transform.

    The following illustrates the difference:

    proj4.defs("EPSG:26910","+proj=utm +zone=10 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");
    var source = new proj4.Proj('EPSG:26910');  
    var dest = new proj4.Proj('EPSG:4326');      
    var p = {x: 500532.52879695, y: 4970142.88145653};
    var result = proj4(source, dest, p);
    console.log('Correct:', result);
    console.log('Wrong:', p);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>

    (I simplified the example a bit by removing all HTML/jQuery related stuff.)