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

Home
All Communities
- Products
- Developers
- Industries
- Global Communities
- Services & Learning
- Networks
- Esri Events
- ArcGIS Topics
User Groups
Events
ArcGIS Ideas
Community Resources
Discussions
Help

Identify, Select, Highlight

jaykapalczynski · 2014-08-11T15:15:46+00:00

I am trying to get the attached to work. * Open the app * Click on the icon in the top header * click on a bird in the map * the selected attributes are shown to the right. * Now zoom out a bit to where the birds are overlapping. * Click the birds image again where they are overlapping. * Notice now on the right that there…

jaykapalczynski

I am trying to get the attached to work.

Open the app
Click on the icon in the top header
click on a bird in the map
the selected attributes are shown to the right.

Now zoom out a bit to where the birds are overlapping.
Click the birds image again where they are overlapping.
Notice now on the right that there are Next and Previous buttons to scroll through the results.

Everything works great to this point. BUT I want the feature in the map to either Highlight or replaced with another image.

I cannot figure out how to do this. I was in contact with ESRI and their tech could not answer this as well....

As the user scrolls through the multiple return results I want the feature to show up in the map that corresponds with the active result on the right

Code is attached in a single HTML file.....

I am trying to create a new Graphic with the below...but not working...

Can I create a graphic or Highlight the selected graphic???? If so how????

function displayPopupContent(feature){

if(feature){

var content = feature.getContent();

registry.byId("leftPane").set("content", content);

var pt = feature.geometry;

var sms = new SimpleMarkerSymbol().setStyle(

SimpleMarkerSymbol.STYLE_SQUARE).setColor(

new Color([255,0,0,0.5]));

var graphic1 = new Graphic(pt, sms);

app.map.graphics.add(graphic1);

}

Test.zip

Find more posts tagged with

Accepted answers

jaykapalczynski

YOU WILL have to zoom out to see the features to click...

CHEERS TO BRADLEY for his Help....very appreciated.

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Identify with Popup</title>

<style>

html,

body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

margin: 0;

font-family: "Open Sans";

}

#leftPane {

width: 20%;

margin: 0;

border: none;

}

#map {

padding: 0;

}

.nav {

padding: 5px 10px;

background: #4479BA;

color: #FFF;

border-radius: 5px;

border: solid 1px #20538D;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

}

#header {

text-align: left;

height: 100px;

border-bottom: solid 1px #ccc;

margin: 10;

}

</style>

var map;

require([

"esri/map",

"esri/InfoTemplate",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleMarkerSymbol",

"esri/tasks/IdentifyTask",

"esri/tasks/IdentifyParameters",

"esri/dijit/Popup",

"dojo/_base/array",

"esri/Color",

"dojo/dom-construct",

"dojo/on",

"dojo/_base/connect",

"dojo/dom",

"dijit/registry",

"dojo/parser",

"esri/arcgis/utils",

"esri/domUtils",

"esri/InfoTemplate",

"dojo/query",

"esri/layers/ImageParameters",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

], function(

Map,

InfoTemplate,

ArcGISDynamicMapServiceLayer,

SimpleFillSymbol,

SimpleMarkerSymbol,

IdentifyTask,

IdentifyParameters,

Popup,

arrayUtils,

Color,

domConstruct,

on,

connect,

dom,

registry,

parser,

arcgisUtils,

domUtils,

InfoTemplate,

query,

ImageParameters

) {

parser.parse();

//setup event handlers for the next/previous buttons

on(dom.byId("previous"), "click", selectPrevious);

on(dom.byId("next"), "click", selectNext);

var identifyTask, identifyParams;

var popup = new Popup({

markerSymbol: new SimpleMarkerSymbol("circle", 32, null,

new Color([0, 255, 0, 0.5])),

marginLeft: "20",

marginTop: "20"

}, domConstruct.create("div"));

map = new Map("map", {

basemap: "satellite",

center: [-83.275, 42.573],

zoom: 18,

infoWindow: popup

});

map.on("load", mapReady);

var parcelsURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/MapServer/";

dynLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {

opacity: .55

})

map.addLayer(dynLayer);

function mapReady() {

map.on("click", executeIdentifyTask);

//create identify tasks and setup parameters

identifyTask = new IdentifyTask(parcelsURL);

identifyParams = new IdentifyParameters();

identifyParams.tolerance = 3;

identifyParams.returnGeometry = true;

identifyParams.layerIds = [0];

identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

identifyParams.width = map.width;

identifyParams.height = map.height;

}

function executeIdentifyTask(event) {

identifyParams.geometry = event.mapPoint;

identifyParams.mapExtent = map.extent;

//SET THE TOLERANCE FOR THE MOUSE CLICK

identifyParams.tolerance = 8;

var deferred = identifyTask

.execute(identifyParams)

.addCallback(function(response) {

// response is an array of identify result objects

// Let's return an array of features.

return arrayUtils.map(response, function(result) {

var feature = result.feature;

var layerName = result.layerName;

feature.attributes.layerName = layerName;

if (layerName === 'Incidents') {

var taxParcelTemplate = new InfoTemplate("",

"${req_id} <br/> address: ${address}");

feature.setInfoTemplate(taxParcelTemplate);

} else if (layerName === 'Building Footprints') {

var buildingFootprintTemplate = new InfoTemplate("",

"Parcel ID: ${PARCELID}");

feature.setInfoTemplate(buildingFootprintTemplate);

}

return feature;

});

// InfoWindow expects an array of features from each deferred

// object that you pass. If the response from the task execution

// above is not an array of features, then you need to add a callback

// like the one above to post-process the response and return an

// array of features.

map.infoWindow.setFeatures([deferred]);

map.infoWindow.set("popupWindow", false);

initializeSidebar(map);

}

function initializeSidebar(map) {

var popup = map.infoWindow;

//when the selection changes update the side panel to display the popup info for the

//currently selected feature.

connect.connect(popup, "onSelectionChange", function() {

displayPopupContent(popup.getSelectedFeature());

});

//when the selection is cleared remove the popup content from the side panel.

connect.connect(popup, "onClearFeatures", function() {

//dom.byId replaces dojo.byId

dom.byId("featureCount").innerHTML = "Click to select feature(s)";

//registry.byId replaces dijit.byId

registry.byId("leftPane").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", function() {

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

});

}

function displayPopupContent(feature) {

if (feature) {

console.log(feature);

var content = feature.getContent();

registry.byId("leftPane").set("content", content);

}

function selectPrevious() {

map.infoWindow.selectPrevious();

}

function selectNext() {

map.infoWindow.selectNext();

}

//Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.

var imageParameters = new ImageParameters();

imageParameters.layerIds = [0, 1, 2];

imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

map.on("load", function() {

document.getElementById("layer0CheckBox").checked = true;

});

on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);

function updateLayerVisibility() {

var inputs = query(".list_item");

var inputCount = inputs.length;

//in this application layer 2 is always on.

visibleLayerIds = [];

for (var i = 0; i < inputCount; i++) {

if (inputs.checked) {

visibleLayerIds.push(inputs.value);

}

if (visibleLayerIds.length === 0) {

visibleLayerIds.push(-1);

}

dynLayer.setVisibleLayers(visibleLayerIds);

}

});

</script>

</head>

<body>

Layer List :

<br />

<input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Incident

<br />

</span>

<br />

</div>

<br />

<div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)

</div>

< Prev

</a>

Next >

</a>

</div>

</div>

</body>

</html>

All comments

jaykapalczynski

YOU WILL have to zoom out to see the features to click...

CHEERS TO BRADLEY for his Help....very appreciated.

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Identify with Popup</title>

<style>

html,

body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

margin: 0;

font-family: "Open Sans";

}

#leftPane {

width: 20%;

margin: 0;

border: none;

}

#map {

padding: 0;

}

.nav {

padding: 5px 10px;

background: #4479BA;

color: #FFF;

border-radius: 5px;

border: solid 1px #20538D;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);

}

#header {

text-align: left;

height: 100px;

border-bottom: solid 1px #ccc;

margin: 10;

}

</style>

var map;

require([

"esri/map",

"esri/InfoTemplate",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleMarkerSymbol",

"esri/tasks/IdentifyTask",

"esri/tasks/IdentifyParameters",

"esri/dijit/Popup",

"dojo/_base/array",

"esri/Color",

"dojo/dom-construct",

"dojo/on",

"dojo/_base/connect",

"dojo/dom",

"dijit/registry",

"dojo/parser",

"esri/arcgis/utils",

"esri/domUtils",

"esri/InfoTemplate",

"dojo/query",

"esri/layers/ImageParameters",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

], function(

Map,

InfoTemplate,

ArcGISDynamicMapServiceLayer,

SimpleFillSymbol,

SimpleMarkerSymbol,

IdentifyTask,

IdentifyParameters,

Popup,

arrayUtils,

Color,

domConstruct,

on,

connect,

dom,

registry,

parser,

arcgisUtils,

domUtils,

InfoTemplate,

query,

ImageParameters

) {

parser.parse();

//setup event handlers for the next/previous buttons

on(dom.byId("previous"), "click", selectPrevious);

on(dom.byId("next"), "click", selectNext);

var identifyTask, identifyParams;

var popup = new Popup({

markerSymbol: new SimpleMarkerSymbol("circle", 32, null,

new Color([0, 255, 0, 0.5])),

marginLeft: "20",

marginTop: "20"

}, domConstruct.create("div"));

map = new Map("map", {

basemap: "satellite",

center: [-83.275, 42.573],

zoom: 18,

infoWindow: popup

});

map.on("load", mapReady);

var parcelsURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/MapServer/";

dynLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {

opacity: .55

})

map.addLayer(dynLayer);

function mapReady() {

map.on("click", executeIdentifyTask);

//create identify tasks and setup parameters

identifyTask = new IdentifyTask(parcelsURL);

identifyParams = new IdentifyParameters();

identifyParams.tolerance = 3;

identifyParams.returnGeometry = true;

identifyParams.layerIds = [0];

identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

identifyParams.width = map.width;

identifyParams.height = map.height;

}

function executeIdentifyTask(event) {

identifyParams.geometry = event.mapPoint;

identifyParams.mapExtent = map.extent;

//SET THE TOLERANCE FOR THE MOUSE CLICK

identifyParams.tolerance = 8;

var deferred = identifyTask

.execute(identifyParams)

.addCallback(function(response) {

// response is an array of identify result objects

// Let's return an array of features.

return arrayUtils.map(response, function(result) {

var feature = result.feature;

var layerName = result.layerName;

feature.attributes.layerName = layerName;

if (layerName === 'Incidents') {

var taxParcelTemplate = new InfoTemplate("",

"${req_id} <br/> address: ${address}");

feature.setInfoTemplate(taxParcelTemplate);

} else if (layerName === 'Building Footprints') {

var buildingFootprintTemplate = new InfoTemplate("",

"Parcel ID: ${PARCELID}");

feature.setInfoTemplate(buildingFootprintTemplate);

}

return feature;

});

// InfoWindow expects an array of features from each deferred

// object that you pass. If the response from the task execution

// above is not an array of features, then you need to add a callback

// like the one above to post-process the response and return an

// array of features.

map.infoWindow.setFeatures([deferred]);

map.infoWindow.set("popupWindow", false);

initializeSidebar(map);

}

function initializeSidebar(map) {

var popup = map.infoWindow;

//when the selection changes update the side panel to display the popup info for the

//currently selected feature.

connect.connect(popup, "onSelectionChange", function() {

displayPopupContent(popup.getSelectedFeature());

});

//when the selection is cleared remove the popup content from the side panel.

connect.connect(popup, "onClearFeatures", function() {

//dom.byId replaces dojo.byId

dom.byId("featureCount").innerHTML = "Click to select feature(s)";

//registry.byId replaces dijit.byId

registry.byId("leftPane").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", function() {

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

});

}

function displayPopupContent(feature) {

if (feature) {

console.log(feature);

var content = feature.getContent();

registry.byId("leftPane").set("content", content);

}

function selectPrevious() {

map.infoWindow.selectPrevious();

}

function selectNext() {

map.infoWindow.selectNext();

}

//Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.

var imageParameters = new ImageParameters();

imageParameters.layerIds = [0, 1, 2];

imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

map.on("load", function() {

document.getElementById("layer0CheckBox").checked = true;

});

on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);

function updateLayerVisibility() {

var inputs = query(".list_item");

var inputCount = inputs.length;

//in this application layer 2 is always on.

visibleLayerIds = [];

for (var i = 0; i < inputCount; i++) {

if (inputs.checked) {

visibleLayerIds.push(inputs.value);

}

if (visibleLayerIds.length === 0) {

visibleLayerIds.push(-1);

}

dynLayer.setVisibleLayers(visibleLayerIds);

}

});

</script>

</head>

<body>

Layer List :

<br />

<input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Incident

<br />

</span>

<br />

</div>

<br />

<div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)

</div>

< Prev

</a>

Next >

</a>

</div>

</div>

</body>

</html>

jaykapalczynski

This html file should work....saw why it would not open for you....

Any other thoughts???

Click button in tool bar

zoom out and select a feature and hopefully selecting multiple features ( I want them to highlight as you scroll through the list in the side bar with the next and previous )

Note you have to have multiple features selected for the Next and Previous to appear

I am attempting to create a graphic at lines 404 and 516 , although a Highlight would is much more desired...

I dont think I can create at line 404 because all the features are present at this poitn if multiple are selected...
Thats why I was attempting at lines 516

Just dont know where to go next.... any thoughts would be appreciated.

Test2.zip

jaykapalczynski

In my Identify function I am grabbing the result.feature and returning the information on this features including Geometry etc...

Then trying to create a graphic and NOTHING.

Very confused here......tried it two ways and cannot get a Graphic nor the feature in question to highlight?

function executeIdentifyTask (event) {

// CALL initializeSidebar

action1 = initializeSidebar(app.map);

identifyTask = new IdentifyTask(DGIFDataurl);

identifyParams = new IdentifyParameters();

identifyParams.tolerance = 10;

identifyParams.returnGeometry = true;

identifyParams.layerIds = [0];

//identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;

identifyParams.width = app.map.width;

identifyParams.height = app.map.height;

identifyParams.geometry = event.mapPoint;

identifyParams.mapExtent = app.map.extent;

var deferred = identifyTask

.execute(identifyParams)

.addCallback(function (response) {

// response is an array of identify result objects

// Lets return an array of features.

return arrayUtils.map(response, function (result) {

var feature = result.feature;

var layerName = result.layerName;

//-----------------------------------------------------------------------------------------------------------

var resultFeatures = result.feature;

alert(print_r(resultFeatures)); //call it like this

for (var i = 0, il = resultFeatures.length; i < il; i++) {

//Get the current feature from the featureSet.

//Feature is a graphic

var graphic = resultFeatures;

// allow different symbols

markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 28,

new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new dojo.Color([255, 255, 255]), 2),

new dojo.Color([255, 0, 0, 0.85]));

lineSymbol = new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID,

new dojo.Color([0, 255, 255]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND,

esri.symbol.CartographicLineSymbol.JOIN_MITER, 5);

fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,

new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.85]));

// figure out which symbol to use

if (graphic.geometry.type === "point" || graphic.geometry.type === "multipoint") {

symbol = markerSymbol;

} else if (graphic.geometry.type === "line" || graphic.geometry.type === "polyline") {

symbol = lineSymbol;

} else {

symbol = fillSymbol;

}

graphic.setSymbol(symbol);

//Add graphic to the map graphics layer.

app.map.graphics.add(graphic);

}

//-----------------------------------------------------------------------------------------------------------

feature.attributes.layerName = layerName;

if (layerName === 'DGIF_GIS.DBO.Warblers') {

var BirdingTrailSites = new InfoTemplate("",

"<table style='width:100%'><tr><td style='width:100%; text-align:center; font-size:14px'>${Species}</td></tr></table>" +

"<table style='width:100%'><tr><td style='width:30%'><b>Species</b></td><td style='width:70%'>${Species}</td></tr></table>"

);

feature.setInfoTemplate(BirdingTrailSites);

}

return feature;

});

app.map.infoWindow.setFeatures([deferred]);

app.map.infoWindow.show(event.mapPoint);

} // END OF executeIdentifyTask

kenbuja

I wasn't able to get your script working, but take a look at this post over in GIS StackExchange. In it, I have the code where I flash a polygon that is selected in a dGrid. The application also shows how I add highlight graphics for selected features.

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.