Plotting multiple Points from html spans in ArcGIS - 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
})