views:

19

answers:

2

Hello I am having an issue using the proj4js library. Here is my source:

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="lib/proj4js-combined.js"></script>
   </head>

   <script type="text/javascript">
    function go()
    {
        var lon = document.getElementById("xOrg").value;
        var lat = document.getElementById("yOrg").value;
        var reprojected = reproject(Number(lon),Number(lat));

        document.getElementById("xNew").value = reprojected.x;
        document.getElementById("yNew").value = reprojected.y;
    }

    function reproject(lon,lat)
        {
            var sourceSys = new Proj4js.Proj('WGS84');
            var destSys = new Proj4js.Proj('EPSG:32187');

            var pointSource = new Proj4js.Point(lon,lat);
            var pointDest = Proj4js.transform(sourceSys, destSys, pointSource);

            return pointDest;
        }
   </script>

   <body>
    <div>
    <input id="xOrg" type="text" value="-73.56"/>
    <input id="yOrg" type="text" value="45.49"/>
    </div>
    <div>
    <input id="xNew" type="text" value=""/>
    <input id="yNew" type="text" value=""/>
    </div>
    <div>
        <input type="button" value="go" onclick="go()"/>
    </div>
   </body>
</html>

I don't understand why the reprojection only works when I click the button twice, when I click on it the first time, the same values are returned. It seems to only work when I click the button twice or more. Here is this page online: click

A: 

I couln't get the page to load, but is it a refresh problem? Ie. can you explicitly cause the xNew and yNew input tags to refresh themselves immediately after their values are set?

winwaed
The page should work now, but I dont think its a refresh issue, but if it is, how do I force them to refresh ?
Enriquev
Looks to be browser specific, I just tried it on Safari on my iPad and it worked with one click. (if anything the ipad is the one that often needs two clicks due to the way focus operates)
winwaed
Damn, it need 2 clicks on my pc with chrome, firefox and ie8. Are you sure with 1 click you are not just getting the same numbers in the new boxes?
Enriquev
Sorry, yes you're right. And this behavior does not make sense for my refresh suggestion. Are the second set of coordinates set correctly?
winwaed
Have you tried looking at the source code in the Proj4js.org homepage: what are you doing differently?
winwaed
YEs i looked at this example (http://trac.osgeo.org/proj4js/wiki/UserGuide), seems i'm doing it the right way, they seem valid the second time...
Enriquev
I meant the actual working example that is on the proj4js.org homepage - it works for me with one click. Also try changing the 'WGS84' to the 'EPSG:4326' used in that example. (although I've used and written about Proj4JS and even added a couple of the supported projections; I have primarily used it as a component of OpenLayers rather than point-point reprojections)
winwaed
Hello I just tried 'EPSG:4236' and 'EPSG:27563' still no go it only works when I click the button twice, the working example works correctly, so I have no clue of what I am doing wrong :-(
Enriquev
+1  A: 

Hello I moved these lines:

var sourceSys = new Proj4js.Proj('WGS84'); 
var destSys = new Proj4js.Proj('EPSG:32187'); 

to here:

...

<script type="text/javascript">  
    var sourceSys = new Proj4js.Proj('WGS84'); 
    var destSys = new Proj4js.Proj('EPSG:32187'); 

    function go()
{
...  

And for whatever reason it now works...

Enriquev