Plotting multiple Points from html spans in ArcGIS

Question

I'm trying to plot multiple Points on an ArcGIS map using span#longitude and span#latitude in the HTML. I can get the very first point to plot, but not any subsequent points. I'm new to ArcGIS, and my javascript knowledge is limited. Any help is appreciated!

<script>
var map, agraphicsLayer, symbol;
function addPointtoMap(x, y) {
    require([
        "esri/geometry/Point", 
        "esri/graphic", 
        "dojo/domReady!"], 
    function(Point, Graphic) {
        var pt = new Point(x, y);
        map.centerAt(pt);
        agraphicsLayer.add(new Graphic(pt, symbol));
    });
}

(function($) {
    if($("div#mapDiv").length) {
        $.getScript( "http://js.arcgis.com/3.14/" )
            .done(function( script, textStatus ) {
                require(["esri/map", 
                "esri/symbols/SimpleMarkerSymbol", 
                "esri/geometry/Point", 
                "esri/graphic", 
                "esri/Color", 
                "esri/layers/GraphicsLayer", 
                "dojo/domReady!"
                ], 
                function(
                    Map,
                    SimpleMarkerSymbol, 
                    Point, 
                    Graphic, 
                    Color, 
                    GraphicsLayer) {

                    map = new Map("mapDiv", {
                        center: [-56.049, 32.485],
                        zoom: 5,
                        basemap: "topo",
                        logo: false
                    });

                    map.on("load", function() {
                        map.disableScrollWheelZoom();
                    });
                    agraphicsLayer = new GraphicsLayer();
                    map.addLayer(agraphicsLayer);

                    symbol = new SimpleMarkerSymbol();
                    symbol.setColor(new Color("#00ADA1"));

                    var pt = new Point($("span#longitude").html(), $("span#latitude").html());
                    map.centerAt(pt);
                    agraphicsLayer.add(new Graphic(pt, symbol));
                });
            })
            .fail(function( jqxhr, settings, exception ) { });
    }
</script>
<div id="mapDiv"></div>

        <span id="longitude">37.82</span>
        <span id="latitude">-2.28</span> 
        <span id="longitude">34.82</span>
        <span id="latitude">1.36</span> 
        <span id="longitude">34.31</span>
        <span id="latitude">-0.67</span> 
        <span id="longitude">40.19</span>
        <span id="latitude">.10</span> 

Answer 1

in both the HTML 4.01 and HTML 5 specifications the "id" attribute must be unique among all the IDs in the document so

$("span#longitude").html()

is only ever going to give you the first longitude (or at least it's not going to give you what you want which is to loop through all the lat/longs)

There's are a lot of ways to accomplish your goal. One way is to store the lat/longs in your javascript instead of in the HTML.

you would do that like so

<script>
var map, agraphicsLayer, symbol,
data = {"type": "FeatureCollection",
"features": [{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [37.82, -2.28]
  }},
  {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [34.82, 1.36]
  }},
  {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [34.31, -0.67]
  }},
  {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [40.19, 0.10]
  }}]
};

...code snipped for brevity
//here you want to loop through the points
data.features.forEach(function(feature){
    var pt = new Point(feature.geometry.coordinates, map.spatialReference);
    agraphicsLayer.add(new Graphic(pt, symbol));
})      
</script>

if you really want to store the data in spans like you are now then you need to change the "id" attribute to a "class" attribute and then wrap the lat/long spans in some grouping element like a div or another span

<div class="coordinate">
  <span class="longitude">37.82</span>
  <span class="latitude">-2.28</span>
</div>

and then in the javascript do something like this

$(".coordinate").each(function(){
//this refers to each "coordinate" div as we loop through them
    var long = $(this).find(".longitude").html()
    var lat = $(this).find(".lattitude").html()
    var pt = new Point(long, lat);
    //etc

})