Community

How to fetch the lat/long values from a table in an HTML page

639
3
09-12-2011 07:53 AM
DonBarker
by
Occasional Contributor
‎09-12-2011 07:53 AM
I am a Javascript novice.  I appreciate your help.

I would like to fetch the lat/long values from a table in an HTML page, so that a  map on the same web page is centered and zoomed to that location.

Here is a simple center-extent builder that I use to configure the initialExtent variable :

  var myZoom = 20000;
  var myLat = 4518898;
  var myLong = -13618751;
  var myXMin = myLong - myZoom;
  var myXMax = myLong + myZoom;
  var myYMin = myLat - myZoom;
  var myYMax = myLat + myZoom;

It configures the initial extent of the map like this:

       var initialExtent = new esri.geometry.Extent({"xmin":myXMin,"ymin":myYMin,"xmax":myXMax,"ymax":myYMax,"spatialReference":{"wkid":102100}});

I would like to get the values of myLat and myLong using something like this

  var myLat = document.getElementById("siteLat");
  var myLong = document.getElementById("siteLong");

from a table that is hard-coded into the web page like this:

<body>
<table><tr>
<td>Adams Landing</td>
<td id="siteLat">4518898</td>
<td id="siteLong">-13618751</td>
<td>Sailing Vessel Landing</td>
<td>1875</td>
<td>1950</td>
</tr></table>
</body>

But myLat and myLong vars evaluate to null.  Is there something about the scope of the vars, or the init function that builds the map, that I need to consider to make this work?

Thanks,
0 Kudos
3 Replies
bobcarr
by
New Contributor III
‎09-12-2011 09:05 AM
I believe you need to use the innerHTML property to retrieve the value of the elements you are accessing. 

Change

    
    var myLat = document.getElementById("siteLat"); 
    var myLong = document.getElementById("siteLong");


To
     
     var myLat = document.getElementById("siteLat").innerHTML;
     var myLong = document.getElementById("siteLong").innerHTML;
0 Kudos
DonBarker
by
Occasional Contributor
‎09-12-2011 10:02 AM
Bob,
Thanks for taking time to reply. 
This still gives vars myLat and myLong undefined:

  <head>
    <script type="text/javascript">
  //var myLat = 4695620;
  //var myLong = -8448856;
    var myLat = document.getElementById("siteLat").innerHTML;
    var myLong = document.getElementById("siteLong").innerHTML;
    // map functions go here //
    </script>
   </head>
  <body >
<table border=1><tr>
<td id="siteLat">4695620</td>
<td id="siteLong">-8448856</td>
</tr></table>
    <script type="text/javascript">
    document.write("myLat:  " + myLat + "<br>");
    document.write("myLong:  " + myLong + "<br>") ;
    </script>
  </body>
0 Kudos
JoeJeurissen
by
New Contributor
‎09-12-2011 11:16 AM
Your JavaScript in the head tag is being ran before the body loads.  myLat and myLong and both undefined because "siteLat" and "siteLong" don't exist at the time when you are trying to get the values.  In your current scenario a simple fix would be moving the JavaScript in the head tags down like this:

    <script type="text/javascript">
            var myLat=document.getElementById("siteLat").innerHTML;
            var myLong=document.getElementById("siteLong").innerHTML;
            document.write("myLat:  " + myLat + "<br>");
            document.write("myLong:  " + myLong + "<br>");
    </script>


When you are working with the ESRI Maps your JavaScript will be in a initialize function, which doesn't start until Dojo (and the HTML) has loaded.
0 Kudos