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

infowindow.select(index) highlighting features out of order

JeffPace1

using javascript api 3.10

I am using a popup in a sidepanel. When I click "next" (using the sample integrated in my application) it calls

map.infoWindow.selectNext();
onResultSummaryItemClick(map.infoWindow.selectedIndex);

which then calls

function onResultSummaryItemClick(idx) { // alert(idx);
 map.infoWindow.select(idx); // alert("index:"+map.infoWindow.selectedIndex); 
var extent = map.infoWindow.getSelectedFeature().geometry.getExtent();
 if (!extent) { // alert(map.infoWindow.getSelectedFeature()+":"+map.infoWindow.getSelectedFeature().geometry); 
map.centerAndZoom(map.infoWindow.getSelectedFeature().geometry, 18); 
} 
else 
{ 
map.setExtent(extent, true); 
 }

However the selected feature highlight symbol is ending up first in the list, instead of last, so it is drawing UNDER the feature, and therefore isnt appearing highlighted. If i click the feature, the highlight moves to the bottom of the list, and draws correctly.

PATHS after hitting next

PATHS after clicking to select

selected_right order.JPG

any ideas? Kelly Hutchins‌ Derek Swingley‌ Jonathan Uihlein‌

Find more posts tagged with

Accepted answers

JohnGrayson

Jeff, my guess is that the creation of the selection graphic is probably not working because the location is not on the screen; you'll have to select it again after you've navigated to the graphic.

All comments

khutchins

Can you try moving the selected graphic to the front. You can do this using

var graphic = popup.getSelectedFeature();

graphic.getShape().moveToFront();

IMG_4279-2.jpg

JeffPace1

map.infoWindow.select(idx);
var extent = map.infoWindow.getSelectedFeature().geometry.getExtent(); 
console.log(extent); 
var graphic = map.infoWindow.getSelectedFeature();

results in good extent, so map.infoWindow.getSelectedFeature() is fine, but then

 Object { type="extent", xmin=-9191676.043059396, ymin=3183521.7840280095, more...}
TypeError: graphic.getShape(...) is null
 graphic.getShape().moveToFront();

So it is selecting, it can get the selectedfeature to get an extent (its a polygon) but getShape is returning null

)

khutchins

Do you have a code sample that shows the problem you can post?

JohnGrayson

Jeff, this typically happens when the graphic is not currently loaded into the display. You should first navigate to the appropriate location and then access the shape. For point data you might have to use some other way of navigating to the location of the graphic, but the logic is the same.

map.infoWindow.select(idx);
var selectedFeature = map.infoWindow.getSelectedFeature();
map.setExtent(selectedFeature.geometry.getExtent()).then(lang.hitch(this,function(){
  selectedFeature.getShape().moveToFront();
});

JeffPace1

Unfortunately I dont, its in a rather complicated app.

When i console.dir(graphic) prior to trying getShape (also tried getShapes) I get a valid graphic. But even in firebug commandline if I call $p.getShape() it returns null

JeffPace1

still no go

I tried

  popup.select(idx);
         var extent = popup.getSelectedFeature().geometry.getExtent();
                   
                                    if (!extent) {
                                        map.centerAndZoom(popup.getSelectedFeature().geometry, 18).then(lang.hitch(this,function(){
                                            popup.getSelectedFeature().getShape().moveToFront();
                                        })) ;
                                       
                                    } else {
                                        map.setExtent(extent, true).then(lang.hitch(this,function(){
                                            popup.getSelectedFeature().getShape().moveToFront();
                                        }));
                                    }

But it just wont highlight. If the feature is on the screen when i select it from the list, it works.

If it is off the screen, it does not. Even though I am moving to it prior to selecting it.

The if(!extent) above is to handle point data

JonathanUihlein

Looking into this Jeff, thanks for the info.

DavidColey

Thanks for putting this up Jeff. Michael and I are trying to utilized the side panel popup to hold the results from a gp model that is returning fetures and graphics based on the linear distance from a selected feature, basically a select by attribute of an input layer then re-selecting user-input features base on a linear extent

JeffPace1

var popup = Popup({
                                    popupWindow: false
                                }, domConstruct.create("div"));
                                this.popup = popup;
                                //stub out for popup
                                //setup event handlers for the next/previous buttons
                                connect.connect(dom.byId("previous"), "click", lang.hitch(this, selectPrevious));
                                connect.connect(dom.byId("next"), "click", lang.hitch(this, selectNext));


                                //when the selection changes update the side panel to display the popup info for the
                                //currently selected feature.
                                connect.connect(popup, "onSelectionChange", lang.hitch(this, function() {
                                    lang.hitch(this, displayPopupContent(popup.getSelectedFeature()));
                                }));


                                //when the selection is cleared remove the popup content from the side panel.
                                connect.connect(popup, "onClearFeatures", lang.hitch(this, function() {
                                    dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                                    registry.byId("resultData").set("content", "");
                                    domUtils.hide(dom.byId("pager"));
                                }));


                                //When features are associated with the  map's info window update the sidebar with the new content.
                                connect.connect(popup, "onSetFeatures", lang.hitch(this, function() {
                                    var summPane = registry.byId('rightPane');
                                    if (!summPane._showing) {
                                        summPane.toggle();
                                    }
                                    //when features set, clear results and set new
                                    domConstruct.empty('resultSummaryTab');
                                    array.forEach(popup.features, lang.hitch(this, function(graphic, idx) {
                                        domConstruct.create('button', {innerHTML: graphic.getTitle(), id: "resultItem" + idx, 'class': 'nav'}, dom.byId('resultSummaryTab'));
                                        domConstruct.place("<br/>", "resultSummaryTab");
                                        connect.connect(dom.byId("resultItem" + idx), "click", null, lang.hitch(this, onResultSummaryItemClick, idx));
                                    }));


                                    lang.hitch(this, displayPopupContent(popup.getSelectedFeature()));
                                    dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";


                                    //enable navigation if more than one feature is selected
                                    popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
                                    popup.features.length > 1 ? registry.byId('rightTC').selectChild(registry.byId('resultSummaryTab')) : registry.byId('rightTC').selectChild(registry.byId('resultDetailsTab'));


                                }));
                                //results handlers
                                function selectPrevious() {
                                    popup.selectPrevious();
                                    onResultSummaryItemClick(popup.selectedIndex);
                                }
                                function selectNext() {
                                    //  alert('next');
                                    popup.selectNext();
                                    onResultSummaryItemClick(popup.selectedIndex);


                                }
                                //onclick handler
                                function onResultSummaryItemClick(idx) {
                                 
                                    popup.select(idx);
                                    var extent = popup.getSelectedFeature().geometry.getExtent();
                   
                                    if (!extent) {
                                        map.centerAndZoom(popup.getSelectedFeature().geometry, 18).then(lang.hitch(this,function(){
                                            popup.select(popup.selectedIndex);                                           
                                        })) ;
                                       
                                    } else {
                                        map.setExtent(extent, true).then(lang.hitch(this,function(){
                                            popup.select(popup.selectedIndex);
                                        }));
                                    }
                                    registry.byId('rightTC').selectChild(registry.byId('resultDetailsTab'));
                                    if (idx === 0) {
                                        domUtils.hide(dom.byId("previous"));
                                        domUtils.show(dom.byId("next"));
                                    } else if (idx === popup.count - 1) {
                                        domUtils.show(dom.byId("previous"));
                                        domUtils.hide(dom.byId("next"));
                                    } else {
                                        domUtils.show(dom.byId("previous"));
                                        domUtils.show(dom.byId("next"));
                                    }
                                }


                                //POPUP FUNCTIONS
                                function displayPopupContent(feature) {
                                    if (feature) {
                                        //clear links tab
                                        domConstruct.empty('resultLinksTab');
                                        //get content and set to results tab
                                      // console.dir(feature);
                                        var content = feature.getContent();
                                        if(!content){
                                            content  = feature;
                                        }
                            //          console.log('content');
                          //              console.dir(content);
                                        registry.byId("resultData").set("content", content);
                                        query(".attrTable").forEach(function(node, index, arr) {
                                            if(node){
                                                if(node.firstChild){
                                                    array.forEach(node.firstChild.children, function(child) {
                                                        if (child.lastChild.innerHTML === "") {
                                                            domConstruct.empty(child);
                                                        }
                                                    });
                                                }
                                            }
                                        });
                                        //get links and set to links tab
                                        var links = feature.attributes.links;
                                        for (var key in links) {
                                            if (links.hasOwnProperty(key)) {
                                                if (links[key]) {
                                                    var a = domConstruct.create('a', {href: links[key], target: "_blank"}, dom.byId('resultLinksTab'));
                                                    var img = domConstruct.create('img', {src: "images/" + key + ".png"}, a);
                                                    domClass.add(img, 'resultLink');
                                                }
                                            }
                                        }
                                    }
                                }


                                //add lods so we can get to level 20
                                this.map = new Map("map", {
                                    infoWindow: popup,
                                    basemap: "streets",
                                    autoResize: true,
                                    sliderStyle: style,
                                    logo: false,
                                    showAttribution: false,
                                    lods: lods,
                                    minZoom:10
                                });
                                map = this.map;

DavidColey

Wow Jeff, you didn't have to do this, but thank you.

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.