topic Re: How to fetch the lat/long values from a table in an HTML page in ArcGIS JavaScript Maps SDK Questions

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

DonBarker — Mon, 12 Sep 2011 14:53:03 GMT

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,

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

bobcarr — Sun, 12 Dec 2021 05:34:39 GMT

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");

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

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

DonBarker — Sun, 12 Dec 2021 05:34:42 GMT

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>

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

JoeJeurissen — Sun, 12 Dec 2021 05:34:44 GMT

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.