nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

BrittneyGibbons

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!

All comments

aubinmaynard

Could we see some additional code you used. I"m trying to be able to click a row in a dynamically created table (i.e. from a query), and have it open the infowindow for that particular graphic. I understand the concept behind map.infoWindow.show(point, point) but cannot figure out how to dump my geometry data into it from clicking the table. Any additional hints would be great,

Thanks!

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

Something else I noticed this morning is that when I click on a point, an infoWindow opens (Image 1), and click the X to close the infoWindow (Image 2), if I then open an infoWindow from the dropdown menu, the last point that I clicked on will be hightlighted (Image 3).

[ATTACH=CONFIG]26250[/ATTACH] [ATTACH=CONFIG]26251[/ATTACH] [ATTACH=CONFIG]26252[/ATTACH]

clicked_on_point.gif

closed_infowindow.gif

previous_point_highlighted.GIF

RayJulich

I don't do anything to explicitly change the symbology. I noticed that the point started to be highlighted once I upgraded by web page's code to use API 3.5. The point only seems to be highlighted when a user clicks on a point, but not when the user selects the point from the dropdown menu.

BrittneyGibbons

How are you changing the symbology of the highlighted symbol on click? It should be possible to do something similar for the dropdown menu as well. Can you set the symbol of gmarker[index] to your highlight symbol in the function reveal site?

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?

hydrograph_dropdown.GIF

hydrograph_clicked.GIF

BrittneyGibbons

Happy to hear that it worked!

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

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.

RayJulich

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

khutchins

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

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.

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.