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

Select graphic programmatically

JordanChapman

I have a layer containing several Graphic's each of these have an infoWindowRenderer. When you click on these the selected one gets highlighted (I think a GlowFilter gets applied to the graphic) and an infoWindow opens. I also have a list in a widget which lists all of the graphics. What I want to happen is that when I click on an item in the list the actual graphic gets highlighted and the infoWindow associated with that graphic gets displayed. Is there a way to simulate a click or else display the infoWindow and add the highlighting?

I can add the highlighting effect by adding a GlowFilter to the Graphic, but I wonder if there is an easier way to do this.

Vind meer berichten getagd met

Accepted answers

rscheitlin

Jordan,

You can display a popup programatically by following this code sample:

http://resources.arcgis.com/en/help/flex-api/samples/01nq/01nq0000008v000000.htm

All comments

JordanChapman

Jordan,

You may want to try to useCapture on the event listener:
graphic.addEventListener(MouseEvent.CLICK, graphicClicked, true);
As far as an event that is launched when the infowindow is shown. Sure there is:
map.infoWindow.addEventListener(Event.OPEN, some function);

Thanks again for the help, however even with the useCapture flag the function is only getting called sporadically. As far as the infoWindow event, my graphic's infoWindowRenderer has a reference to the Intersection item, but I don't think there is a way to get that Intersection given only the map's infoWindow.

rscheitlin

Jordan,

You may want to try to useCapture on the event listener:

graphic.addEventListener(MouseEvent.CLICK, graphicClicked, true);

As far as an event that is launched when the infowindow is shown. Sure there is:

map.infoWindow.addEventListener(Event.OPEN, some function);

JordanChapman

Jordan,

Sure here is the updated script portion of that sample:

            import com.esri.ags.Graphic;
            import com.esri.ags.components.ContentNavigator;
            import com.esri.ags.events.QueryEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.portal.PopUpRenderer;
            import com.esri.ags.portal.supportClasses.PopUpFieldFormat;
            import com.esri.ags.portal.supportClasses.PopUpFieldInfo;
            import com.esri.ags.portal.supportClasses.PopUpInfo;
            import com.esri.ags.utils.GraphicUtil;
            
            import mx.collections.ArrayList;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            
            import spark.events.IndexChangeEvent;
            
            private var contentNavigator:ContentNavigator = new ContentNavigator();
            
            protected function createPopupRenderer_initializeHandler(event:FlexEvent):void
            {
                var field1:PopUpFieldInfo = new PopUpFieldInfo();
                field1.fieldName = "MED_AGE";
                field1.label = "Median Age: ";
                field1.visible = true;
                
                var field2:PopUpFieldInfo = new PopUpFieldInfo();
                field2.fieldName = "POP2007";
                field2.format = new PopUpFieldFormat();
                field2.label = "Population: ";
                field2.visible = true;
                
                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = "{STATE_NAME}";
                popUpInfo.popUpFieldInfos = [ field1, field2 ];
                popUpInfo.showZoomToButton = false;
                
                var popUpRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
                popUpRenderer.properties = { "popUpInfo": popUpInfo };
                statesGraphicsLayer.infoWindowRenderer = popUpRenderer;
            }
            
            protected function queryTask_executeCompleteHandler(event:QueryEvent):void
            {
                if (event.featureSet.features)
                {
                    for each(var gra:Graphic in event.featureSet.features)
                    {
                        gra.addEventListener(MouseEvent.CLICK, selectStateFromList);
                    }
                    statesGraphicsLayer.graphicProvider = event.featureSet.features;
                    statesList.dataProvider = new ArrayList(event.featureSet.features);
                    map.extent = GraphicUtil.getGraphicsExtent(event.featureSet.features);
                }
            }
            
            protected function esriService_faultHandler(event:FaultEvent):void
            {
                Alert.show("Error: " + event.fault.faultString, "Error code: " + event.fault.faultCode);
            }
            
            protected function statesList_changeHandler(event:IndexChangeEvent):void
            {
                statesList.ensureIndexIsVisible(statesList.selectedIndex);
                var currentGraphic:Graphic = List(event.currentTarget).selectedItem as Graphic;
                var mapPoint:MapPoint = currentGraphic.geometry.extent.center;
                contentNavigator.dataProvider = new ArrayList([ currentGraphic ]);
                map.infoWindowContent = contentNavigator;
                map.zoomTo(currentGraphic.geometry);
                map.infoWindow.show(mapPoint);
            }
            
            protected function selectStateFromList(event:MouseEvent):void
            {
                var gr:Graphic = Graphic(event.target);
                statesList.selectedItem = gr;
                statesList.ensureIndexIsVisible(statesList.dataProvider.getItemIndex(gr));
            }

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow these steps as shown in the below graphic:

That's what I initially tried to do, simply add an eventListener to the graphic, but it seems that something consumes the CLICK event most of the time. My code is a different from the example, but here is how I'm currently doing things:

                    for (var i:int = 0; i < result.Intersections.length; i++) {
                        var currentInter:Intersection = result.Intersections.getItemAt(i) as Intersection;
                        intersections.addItem(currentInter);
                        var graphic:Graphic = currentInter.createGraphic();
                        var iwr:ClassFactory = new ClassFactory(IntersectionInfoWindowRenderer);
                        iwr.properties = {intersection: currentInter};
                        graphic.infoWindowRenderer = iwr;
                        graphic.addEventListener(MouseEvent.CLICK, graphicClicked);
                    }

Is there any kind of event that gets dispatched when the map's infoWindow changes/opens ?

rscheitlin

Jordan,

Sure here is the updated script portion of that sample:

            import com.esri.ags.Graphic;
            import com.esri.ags.components.ContentNavigator;
            import com.esri.ags.events.QueryEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.portal.PopUpRenderer;
            import com.esri.ags.portal.supportClasses.PopUpFieldFormat;
            import com.esri.ags.portal.supportClasses.PopUpFieldInfo;
            import com.esri.ags.portal.supportClasses.PopUpInfo;
            import com.esri.ags.utils.GraphicUtil;
            
            import mx.collections.ArrayList;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            
            import spark.events.IndexChangeEvent;
            
            private var contentNavigator:ContentNavigator = new ContentNavigator();
            
            protected function createPopupRenderer_initializeHandler(event:FlexEvent):void
            {
                var field1:PopUpFieldInfo = new PopUpFieldInfo();
                field1.fieldName = "MED_AGE";
                field1.label = "Median Age: ";
                field1.visible = true;
                
                var field2:PopUpFieldInfo = new PopUpFieldInfo();
                field2.fieldName = "POP2007";
                field2.format = new PopUpFieldFormat();
                field2.label = "Population: ";
                field2.visible = true;
                
                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = "{STATE_NAME}";
                popUpInfo.popUpFieldInfos = [ field1, field2 ];
                popUpInfo.showZoomToButton = false;
                
                var popUpRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
                popUpRenderer.properties = { "popUpInfo": popUpInfo };
                statesGraphicsLayer.infoWindowRenderer = popUpRenderer;
            }
            
            protected function queryTask_executeCompleteHandler(event:QueryEvent):void
            {
                if (event.featureSet.features)
                {
                    for each(var gra:Graphic in event.featureSet.features)
                    {
                        gra.addEventListener(MouseEvent.CLICK, selectStateFromList);
                    }
                    statesGraphicsLayer.graphicProvider = event.featureSet.features;
                    statesList.dataProvider = new ArrayList(event.featureSet.features);
                    map.extent = GraphicUtil.getGraphicsExtent(event.featureSet.features);
                }
            }
            
            protected function esriService_faultHandler(event:FaultEvent):void
            {
                Alert.show("Error: " + event.fault.faultString, "Error code: " + event.fault.faultCode);
            }
            
            protected function statesList_changeHandler(event:IndexChangeEvent):void
            {
                statesList.ensureIndexIsVisible(statesList.selectedIndex);
                var currentGraphic:Graphic = List(event.currentTarget).selectedItem as Graphic;
                var mapPoint:MapPoint = currentGraphic.geometry.extent.center;
                contentNavigator.dataProvider = new ArrayList([ currentGraphic ]);
                map.infoWindowContent = contentNavigator;
                map.zoomTo(currentGraphic.geometry);
                map.infoWindow.show(mapPoint);
            }
            
            protected function selectStateFromList(event:MouseEvent):void
            {
                var gr:Graphic = Graphic(event.target);
                statesList.selectedItem = gr;
                statesList.ensureIndexIsVisible(statesList.dataProvider.getItemIndex(gr));
            }

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow these steps as shown in the below graphic:

JordanChapman

Jordan,

You can display a popup programatically by following this code sample:

http://resources.arcgis.com/en/help/flex-api/samples/01nq/01nq0000008v000000.htm

Thank you very much Robert, is there a good way to select the item in the list (or at the very least deselect the last item) when you click on the graphic on the map ? In the example provided the item that was last clicked in the list stays selected even if you click on another state.

rscheitlin

Jordan,

You can display a popup programatically by following this code sample:

http://resources.arcgis.com/en/help/flex-api/samples/01nq/01nq0000008v000000.htm

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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