Opening infoWindow by clicking on a point vs. selecting point from dropdown box

[RayJulich]

I have a map (http://wa.water.usgs.gov/projects/puyallupmonitoring/hydrographs.htm) where a user can click on a point on the map to open it's infoWindow or he/she can select a point from a dropdown box on the top of the map.

When I add the points to the map, I read in information from a file and add each point to an array:

var gmarkers = []; //Array of all the markers var nm = 0;

In the loop:

... siteTemplate = new esri.InfoTemplate(title,info); attr = {WELL_NO: site_name}; graphic = new esri.Graphic(point, icon, attr, siteTemplate); map.infoWindow.resize(500, 400); glayer.add(graphic);      gmarkers[nm] = graphic; nm++; ...

In my dropdown menu I have call a function and pass in an array index and the latitude and longitude of the point.

<form style="margin-top:2px;margin-bottom:10px;" action="">  <select name="delta" onchange="javascript:reveal_site(delta.value)">   <option value="">Select a well</option>   <option value="0,47.076611,-122.127667">18N/05E-02H02</option>   <option value="1,47.078417,-122.170528">18N/05E-04A01</option>   <option value="2,47.076667,-122.195861">18N/05E-05G03</option>   <option value="3,47.081361,-122.212056">18N/05E-06A02</option>   <option value="4,47.064722,-122.207417">18N/05E-08D06</option> ...  </select> </form>

The function that's called:

function reveal_site(i)  {  var split = i.split(',');  var index = split[0];  var latitude = split[1];  var longitude = split[2];        if(index)  {   point = new esri.geometry.Point(longitude,latitude,new esri.SpatialReference({ wkid: 4326 }));   point = esri.geometry.geographicToWebMercator(point);   map.infoWindow.setTitle(gmarkers[index].getTitle());   map.infoWindow.setContent(gmarkers[index].getContent());   map.infoWindow.show(point, point);       } }

The problem is that when a point is selected from the dropdown menu, sometimes it displays the wrong infoWindow, but it always it displayed in the correct location though.

Here is what I get when clicking on this particular point:
[ATTACH=CONFIG]26405[/ATTACH]

When I select the same station number from the dropdown menu, I get a different infoWindow at the same point on the map:
[ATTACH=CONFIG]26406[/ATTACH]

It seems that when read in the points from a file and add them to the array, they aren't being put into the array linearly. For example: the 2nd point in the file is sometimes the 3rd item in the array.

[CameronMacNeil · Accepted solution]

I think this is more of a javascript problem than an ESRI one. If I were you, I would change the way you keep track of your wells. Instead of using an index in an array, maybe you could try using a dictionary and organizing by well name? (I'm assuming that the name you're using in your dropdown selection is the well name)

Try this...

var gmarkers = {};

gmarkers[site_name] = graphic;

And then when you click an item in the dropdown menu, you can use the site name instead of the selection index, since the selection index doesn't always correspond to the right value in the gmarker array. Additionally, since gmarkers is just full of graphics, you can get the graphic's geometry property to get the point that you need, rather than having to populate your option list with it and parse it from there.

<form style="margin-top:2px;margin-bottom:10px;" action="">  <select name="delta" onchange="javascript:reveal_site(this)">   <option value="">Select a well</option>   <option value="0,47.076611,-122.127667">18N/05E-02H02</option>   <option value="1,47.078417,-122.170528">18N/05E-04A01</option>   <option value="2,47.076667,-122.195861">18N/05E-05G03</option>   <option value="3,47.081361,-122.212056">18N/05E-06A02</option>   <option value="4,47.064722,-122.207417">18N/05E-08D06</option> ...  </select> </form>

function reveal_site(i)  {         var site_name = i.options[d.selectedIndex].innerHTML;         var gmarker = gmarkers[site_name];         var point = gmarker.geometry;         point = esri.geometry.geographicToWebMercator(point);  map.infoWindow.setTitle(gmarker.getTitle());  map.infoWindow.setContent(gmarker.getContent());  map.infoWindow.show(point, point);

I hope that this makes sense and helps you!

[RayJulich]

Yes. This solution works great. Thank you.