Pop up specific window

[RayJulich]

I created a map (http://wa.water.usgs.gov/projects/clovercreek/hydrographs.esri.htm), which has a drop down menu just above the map so a person can select a specific point on the map. I had created this map in Google Maps (http://wa.water.usgs.gov/projects/clovercreek/hydrographs.htm) and I got the drop down menu working like this:

As I looped through the text file added the points to the map, I added each point to an array:
var gmarkers = [];

gmarkers = marker;
i++;

The dropdown menu called a function that opened the specific popup window:
function reveal_site(i){
    GEvent.trigger(gmarkers, "click");
}

Is there a way to open the popup window for a specific site from a drop down menu in ESRI Javascript API?

[RayJulich]

Any ideas? The map I'm trying to fix is wa.water.usgs.gov/projects/puyallupmonitoring/hydrographs.htm. The map has 3 points on it. When I get the map working correctly, it will have over 100 points on it. Here is the code that creates the infowindow for each point on the map:

dojo.connect(map, "onClick", function(evt) {
 if(map.infoWindow.isShowing) { map.infoWindow.hide(); }
 click_handle = true;
 var g = evt.graphic;
        
 map.infoWindow.setContent(g.getContent());
 map.infoWindow.setTitle(g.getTitle());
 map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});

As I add each point (graphic) to the map, I add each point to an array:

graphic = new esri.Graphic(point, icon, attr, siteTemplate);
glayer.add(graphic);
    
gmarkers[nm] = graphic;
nm++;

The is a drop-down menu just above the map on the web page with the following code:

<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">Graphic 0</option>
  <option value="1">Graphic 1</option>
  <option value="2">Graphic 2</option>
 </select>
</form>

When someone selects an item from the drop-down menu, I'd like that point's infowindow to pop up (I have a working Google Maps version - http://wa.water.usgs.gov/projects/clovercreek/hydrographs.htm). Once the dtop-down menu item is selected, it calls a javascript function:

function reveal_site(i) 
{  
 dojo.connect(map, "onClick", function(evt) {
  if(map.infoWindow.isShowing) { map.infoWindow.hide(); }
  click_handle = true;
  var g = evt.graphic;
        
  map.infoWindow.setContent(g.getContent());
  map.infoWindow.setTitle(g.getTitle());
  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
        }); 
}

This doesn't work, but I didn't think it would. I would like to get code that would open the specific infowindow that was requested from the drop-down menu.

[RayJulich]

Another way of asking this question is, "Can I open an infowindow on the map without clicking on the map itself?" i.e. clicking on a button somewhere on the page or have a dropdown menu of all the points on the map and selecting one of the points from there.

[KellyHutchins]

Ray,

Here's a fiddle showing one approach for displaying a popup window without a mouse click on the map. In this sample there's a list of state names - click on the name and the popup for that feature will display.


http://jsfiddle.net/5AcAK/

[RayJulich]

Thank  you. I'll take a look and give it a try.

[RayJulich]

Kelly,

This is right on track with what I need. I haven't been able to make it work for my specific page. This example uses a feature layer, whereas my map using a graphic layer - theirs layer comes from http://services.arcgis.com/..., mine is made up of several local text files.

I was able to modify the example to use a drop-down menu instead of an unordered list (<ul>). Can I do a query on a graphic layer? The example does a query on a feature layer.

[BrittneyGibbons · Accepted solution]

I did something similar for one of my maps with query results and clicking on a page element to show the infoWindow so my method might be similar to what you are looking for. Does the index of your graphic layer match the index of your drop down list? If it does, you should be able to use the index to tap into the geometry of the point to show your infoWindow.

The code would be something like this:

function reveal_site(i){
point = gmarkers.geometry;
point = esri.geometry.geographicToWebMercator(point);
map.infoWindow.setTitle(gmarkers.getTitle());
map.infoWindow.setContent(gmarkers.getContent());
map.infoWindow.show(point, point);
}

This is similar to what you have, but your code is triggered by a click event on the map while you want it to fire when something from the dropdown menu is selected. You should be able to call the function from the dropdown menu and use the index to decide which point to show the infoWindow for. Just be careful with your variable declarations- the gmarker variable may need to be global to work in this case. Also not sure how your graphics layer is set up exactly - I was using results from a query when I did this so the geometry of the points was returned. If I understand your file right, you may need to use the lat and long fields in place of the geometry.

If this seems like it might be promising, I can try to go into more detail. Good luck, hope this is helpful!

[RayJulich]

Thank you. Thank you. Thank you! This solution works great for me. Yes, I have to use the latitudes & longitudes instead of the geometry. Here is the code I used:

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

[BrittneyGibbons]

Happy to hear that it worked!

[RayJulich]

I am using API 3.5. I do have a little problem with my map (http://wa.water.usgs.gov/projects/puyallupmonitoring/hydrographs.htm). When I click on a point, on the map, the point's popup window opens, and the point is highlighted.
[ATTACH=CONFIG]26062[/ATTACH]

Then, when a select a point from my dropdown menu, the correct popup window open, but the point isn't hightlighted on the map - the previous point that click on is highlighted.
[ATTACH=CONFIG]26063[/ATTACH]

How do I get points highlighted that are selected from my dropdown menu?