Hightlighting Point on a Map Problem

[Anonymous User]

Original User: rjulich

I have a map - http://wa.water.usgs.gov/projects/puyallupmonitoring/hydrographs.htm. The user has the option of selecting a point on the map by either click on a point or selecting a point from a dropdown menu. Since I've upgraded my web page to use API 3.5, the point is automatically highlighted when the user clicks on it. I don't have any code on my page that highlights the point.
[ATTACH=CONFIG]26504[/ATTACH]

However, when the user selects the same point from the dropdown menu, the point is not highlighted.
[ATTACH=CONFIG]26503[/ATTACH]

Something else I noticed is that after clicking on a point, closing the infoWindow, and selecting a point from the dropdown menu, the previous point I had clicked will be highlighted.
[ATTACH=CONFIG]26502[/ATTACH]

I am fine with adding code to my page that will hightlight a point on the map when selecting a point from the dropdown menu, but I'm not sure how.

[BetsySchenck-Gardner]

I believe you might have to add an additional graphic layer to your code to handle the highlighting feature.
If I initialize a graphic layer called highlightLayer, I can add a mouseover function and mouseout function to my list. The mouseover calls a highlightCruise function which draws a circle around the feature and when you mouseout, it eliminates the circle. Here's a small snippet of code I've used to do this:

      function initializeCruises()  {
        var content = "";
        var count = 1;
        for (var j=0;j<dataLayer.graphics.length;j++)  {
          graphic = dataLayer.graphics;
          var xPt = graphic.attributes.x;
          var yPt = graphic.attributes.y;
          var id = graphic.attributes.id;
          var region = graphic.attributes.region;
          var cruise = graphic.attributes.cruise;
          var dates =  graphic.attributes.dates;
          content += "<li style='background-color: #0000ff;color: #ffffff;' onclick='showCruise("+id+");'onmouseover='highlightCruise("+xPt+","+yPt+");'onmouseout='highlightLayer.clear();'><b>"+(count)+")</b> "+region+" - Cruise "+cruise+"<br/>("+dates+")</li>";
          count++;
        }
        dojo.byId("itemsList").innerHTML = content;
      }

      // highlights a cruise on the map from the listing in the right pane
      function highlightCruise(xPt,yPt)  {
        var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 25, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 0]), 3.5), new dojo.Color([0, 255, 0, 0.0]));
        var geometry = new esri.geometry.Point(xPt, yPt);
        geometry = esri.geometry.geographicToWebMercator(geometry);
        highlightLayer.add(new esri.Graphic(geometry, symbol));
      }

[Anonymous User]

Original User: rjulich

This is along the same line as what I need. However, I don't need to have this highlight event execute when I mouseover a point. I need it to execute when I click on a point. I could modify the code so that the highlight happens when I click on a point, but that already works on my page now. I still have the problem that if a user selects a point from the dropdown menu, the point does not get highlighted. What event can I "listen" for when an infoWindow is opened from a dropdown menu? Here is the code that gets executed when selecting a point from the dropdown menu:

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

[BetsySchenck-Gardner]

I'm not exactly sure how to accomplish that in a "dropdown" menu. I use an unordered list (ul) with list items (li) attached. I'm mousing over the list and the points are highlighted on the map. If you look at this example (http://service.ncddc.noaa.gov/website/google_maps/DWHAtlas/mapsAtlas.htm), you can see what I've done. Hope this might help you with your dropdown.

[Anonymous User]

Original User: rjulich

Betsy,

Is your page, http://service.ncddc.noaa.gov/website/google_maps/DWHAtlas/mapsAtlas.htm still available? I tried going to it today to look at the page's code and it wouldn't come up in my brower.

Ray

[BetsySchenck-Gardner]

Ray,
It should be up and running. They were switching out our firewall yesterday afternoon so that might be why you couldn't reach it.
Betsy

[Anonymous User · Accepted solution]

Original User: mgleahy

I think you can use the popup's setFeatures method with the graphics you already have in your gmarkers array:

  map.infoWindow.setFeatures([gmarkers[index]]);   map.infoWindow.show(gmarkers[index].geometry);

[RayJulich]

Thank you. Thank you. Those 2 lines of code worked for what I was wanting to do.

[RayJulich]

Betsy,

Thank you for your response. It wasn't quite what I was looking for, but I did notice from your page that when I clicked on a point that the map will move to to fit the infowindow on the map. How do you do that on that page?

[Anonymous User]

Original User: betsyjsg

Ray,
I have to do a little fudging to the infoWindow placement to do this. Attached is the code I use:

         map.infoWindow.hide();
         map.infoWindow.resize(475,400);
         map.infoWindow.setTitle(title);
         map.infoWindow.setContent(tc.domNode);
         map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
         var maxPoint = new esri.geometry.Point(map.extent.xmax, map.extent.ymax);
         var centerPoint = new esri.geometry.Point(map.extent.getCenter());
         var maxPointScreen = map.toScreen(maxPoint);
         var centerPointScreen = map.toScreen(centerPoint);
         var xDiff = Math.abs(maxPointScreen.x - evt.screenPoint.x) - 505;
         var yDiff = Math.abs(maxPointScreen.y - evt.screenPoint.y) - 485;
         if (xDiff < 0)  {centerPointScreen.x -= xDiff;}
         if (yDiff < 0)  {centerPointScreen.y += yDiff;}
         centerPoint = map.toMap(centerPointScreen);
         map.centerAt(centerPoint);
         map.infoWindow.show(evt.screenPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);

This was written with the 2.8 version of ArcGIS Javascript API so I don't know how well it will transition into 3.6.
Betsy