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

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.

select_from_dropdown.GIF

84088clicked_on_point.gif

clicked_on_point.gif

previous_point_highlighted.GIF

hydrograph_dropdown.GIF

Finde mehr Beiträge mit dem Tag

Accepted answers

Anonymous User

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

All comments

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

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?

RayJulich

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

Anonymous User

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

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

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

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

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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