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
any ideas? Kelly Hutchins Derek Swingley Jonathan Uihlein
Solved! Go to Solution.
Looking into this Jeff, thanks for the info.
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
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;
Wow Jeff, you didn't have to do this, but thank you.