Hello All,
For identify sample here, can you combine all the identify results in one content page? Also, just highlight the layer 0?
Thank you.
Solved! Go to Solution.
James,
Here is the sample modified to have all results in the popup without paging (not sure about the only highlighting layer 0):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Identify Task - 4.1</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
<script src="https://js.arcgis.com/4.1/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(
Map, MapView, TileLayer,
IdentifyTask, IdentifyParameters,
arrayUtils, on, dom
) {
var identifyTask, params;
// URL to the map service where the identify will be performed
var soilURL =
"https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer";
// Add the map service as a TileLayer for fast rendering
// Tile layers are composed of non-interactive images. For that reason we'll
// use IdentifyTask to query the service to add interactivity to the app
var parcelsLyr = new TileLayer({
url: soilURL,
opacity: 0.85
});
var map = new Map({
basemap: "osm"
});
map.add(parcelsLyr);
var view = new MapView({
map: map,
container: "viewDiv",
center: [-120.174, 47.255],
zoom: 7
});
view.then(function() {
// executeIdentifyTask() is called each time the view is clicked
on(view, "click", executeIdentifyTask);
// Create identify task for the specified map service
identifyTask = new IdentifyTask(soilURL);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 3;
params.layerIds = [0, 1, 2];
params.layerOption = "top";
params.width = view.width;
params.height = view.height;
});
// Executes each time the view is clicked
function executeIdentifyTask(event) {
// Set the geometry to the location of the view click
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
dom.byId("viewDiv").style.cursor = "wait";
// This function returns a promise that resolves to an array of features
// A custom popupTemplate is set for each feature based on the layer it
// originates from
identifyTask.execute(params).then(function(response) {
var results = response.results;
var retVal = {};
var rsltContent = arrayUtils.map(results, function(result) {
var contentString;
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Soil Survey Geographic') {
contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dom. Cond. Order %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dom. Cond. Suborder %"] + "%)<br><strong>Dominant Drainage Class:</strong> " +
feature.attributes["Dom. Cond. Drainage Class"] + " (" + feature.attributes["Dom. Cond. Drainage Class %"] + "%)" + "<br><strong>Farmland Class:</strong> " + feature.attributes["Farmland Class"];
}
else if (layerName === 'State Soil Geographic') {
contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dominant %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dominant Sub-Order %"] + "%)";
}
else if (layerName === 'Global Soil Regions') {
contentString = "<h3>" + layerName + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"];
}
return contentString;
}).join("<br><br>");
retVal.content = rsltContent;
retVal.count = results.length;
return retVal;
}).then(showPopup);
// Shows the results of the Identify in a popup once the promise is resolved
function showPopup(results) {
view.popup.content = results.content;
view.popup.title = "All Soil Data: (" + results.count + " results)";
view.popup.open({location: event.mapPoint});
dom.byId("viewDiv").style.cursor = "auto";
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
You can change the layerOption property of the IdentifyParameters to return the results from all the layers rather than the top layer.
params.layerOption = "all"; (line 85 in the sample)
To return the results from a specific layer, change the layerIds property
James,
Here is the sample modified to have all results in the popup without paging (not sure about the only highlighting layer 0):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Identify Task - 4.1</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
<script src="https://js.arcgis.com/4.1/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(
Map, MapView, TileLayer,
IdentifyTask, IdentifyParameters,
arrayUtils, on, dom
) {
var identifyTask, params;
// URL to the map service where the identify will be performed
var soilURL =
"https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer";
// Add the map service as a TileLayer for fast rendering
// Tile layers are composed of non-interactive images. For that reason we'll
// use IdentifyTask to query the service to add interactivity to the app
var parcelsLyr = new TileLayer({
url: soilURL,
opacity: 0.85
});
var map = new Map({
basemap: "osm"
});
map.add(parcelsLyr);
var view = new MapView({
map: map,
container: "viewDiv",
center: [-120.174, 47.255],
zoom: 7
});
view.then(function() {
// executeIdentifyTask() is called each time the view is clicked
on(view, "click", executeIdentifyTask);
// Create identify task for the specified map service
identifyTask = new IdentifyTask(soilURL);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 3;
params.layerIds = [0, 1, 2];
params.layerOption = "top";
params.width = view.width;
params.height = view.height;
});
// Executes each time the view is clicked
function executeIdentifyTask(event) {
// Set the geometry to the location of the view click
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
dom.byId("viewDiv").style.cursor = "wait";
// This function returns a promise that resolves to an array of features
// A custom popupTemplate is set for each feature based on the layer it
// originates from
identifyTask.execute(params).then(function(response) {
var results = response.results;
var retVal = {};
var rsltContent = arrayUtils.map(results, function(result) {
var contentString;
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Soil Survey Geographic') {
contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dom. Cond. Order %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dom. Cond. Suborder %"] + "%)<br><strong>Dominant Drainage Class:</strong> " +
feature.attributes["Dom. Cond. Drainage Class"] + " (" + feature.attributes["Dom. Cond. Drainage Class %"] + "%)" + "<br><strong>Farmland Class:</strong> " + feature.attributes["Farmland Class"];
}
else if (layerName === 'State Soil Geographic') {
contentString = "<h3>" + feature.attributes["Map Unit Name"] + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + " (" + feature.attributes["Dominant %"] + "%)" + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"] + " (" + feature.attributes["Dominant Sub-Order %"] + "%)";
}
else if (layerName === 'Global Soil Regions') {
contentString = "<h3>" + layerName + "</h3><strong>Dominant order:</strong> " + feature.attributes["Dominant Order"] + "<br><strong>Dominant sub-order:</strong> " + feature.attributes["Dominant Sub-Order"];
}
return contentString;
}).join("<br><br>");
retVal.content = rsltContent;
retVal.count = results.length;
return retVal;
}).then(showPopup);
// Shows the results of the Identify in a popup once the promise is resolved
function showPopup(results) {
view.popup.content = results.content;
view.popup.title = "All Soil Data: (" + results.count + " results)";
view.popup.open({location: event.mapPoint});
dom.byId("viewDiv").style.cursor = "auto";
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Nice...I interpreted the question totally differently!
Thank you Robert. This is what I am looking.