Hi everyone
I try to show all results of several layers immediately in an InfoWindow without navigating over the arrow in the top right corner of InfoWindow (next / previous feature layer). Is that possible?
As a test, I use the following example
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Identify with Popup</title> <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css"> <style> html, body, #map { height:100%; width:100%; margin:0; padding:0; } </style> <script src="https://js.arcgis.com/3.27/"></script> <script> var map; require([ "esri/map", "esri/InfoTemplate", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/dijit/Popup", "dojo/_base/array", "esri/Color", "dojo/dom-construct", "dojo/domReady!" ], function ( Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup, arrayUtils, Color, domConstruct ) { var identifyTask, identifyParams; var popup = new Popup({ fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])) }, 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://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer"; map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, { opacity: 0.55 })); 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, 2]; 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; 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 === 'Tax Parcels') { var taxParcelTemplate = new InfoTemplate("", "${Postal Address} <br/> Owner of record: ${First Owner Name}"); feature.setInfoTemplate(taxParcelTemplate); } else if (layerName === 'Building Footprints') { console.log(feature.attributes.PARCELID); 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.show(event.mapPoint); } }); </script> </head> <body> <div id="map"></div> </body> </html>
Thanks in advance
Solved! Go to Solution.
Denis,
You have to manually set the infoWindows content:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Identify with Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;
require([
"esri/map",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/Popup",
"dojo/_base/array",
"esri/Color",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
arrayUtils, Color, domConstruct
) {
var identifyTask, identifyParams;
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, 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://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, {
opacity: 0.55
}));
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, 2];
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;
identifyTask
.execute(identifyParams)
.addCallback(function(response) {
// response is an array of identify result objects
// Let's return an array of features.
var tpcontent = "<ul>";
var bfcontent = "<ul>";
arrayUtils.map(response, function(result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Tax Parcels') {
var taxParcelTemplate = new InfoTemplate("",
"${Postal Address} <br/> Owner of record: ${First Owner Name}");
feature.setInfoTemplate(taxParcelTemplate);
tpcontent += "<li>" + feature.attributes["Postal Address"] + "<br/> Owner of record: " + feature.attributes["First Owner Name"] + "</li>";
} else if (layerName === 'Building Footprints') {
var buildingFootprintTemplate = new InfoTemplate("",
"Parcel ID: ${PARCELID}");
feature.setInfoTemplate(buildingFootprintTemplate);
bfcontent += "<li>" + "Parcel ID: " + feature.attributes.PARCELID + "</li>";
}
});
//build the content info
var fContent = "";
if(bfcontent !== "<ul>"){
fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul><br/><u><strong>Building Footprints</strong></u><br/>" + bfcontent + "</ul>";
}else{
fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul>";
}
map.infoWindow.setContent(fContent);
map.infoWindow.show(event.mapPoint);
});
}
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Denis,
You have to manually set the infoWindows content:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Identify with Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;
require([
"esri/map",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/Popup",
"dojo/_base/array",
"esri/Color",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
arrayUtils, Color, domConstruct
) {
var identifyTask, identifyParams;
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, 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://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, {
opacity: 0.55
}));
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, 2];
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;
identifyTask
.execute(identifyParams)
.addCallback(function(response) {
// response is an array of identify result objects
// Let's return an array of features.
var tpcontent = "<ul>";
var bfcontent = "<ul>";
arrayUtils.map(response, function(result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Tax Parcels') {
var taxParcelTemplate = new InfoTemplate("",
"${Postal Address} <br/> Owner of record: ${First Owner Name}");
feature.setInfoTemplate(taxParcelTemplate);
tpcontent += "<li>" + feature.attributes["Postal Address"] + "<br/> Owner of record: " + feature.attributes["First Owner Name"] + "</li>";
} else if (layerName === 'Building Footprints') {
var buildingFootprintTemplate = new InfoTemplate("",
"Parcel ID: ${PARCELID}");
feature.setInfoTemplate(buildingFootprintTemplate);
bfcontent += "<li>" + "Parcel ID: " + feature.attributes.PARCELID + "</li>";
}
});
//build the content info
var fContent = "";
if(bfcontent !== "<ul>"){
fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul><br/><u><strong>Building Footprints</strong></u><br/>" + bfcontent + "</ul>";
}else{
fContent = "<u><strong>Tax Parcels</strong></u><br/>" + tpcontent + "</ul>";
}
map.infoWindow.setContent(fContent);
map.infoWindow.show(event.mapPoint);
});
}
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Great ,
That's it. Helped again.
Thanks a lot Robert!!!