I have a feature layer with specific countries on top of another feature layer showing all the countries of the world.
If you click on these specific countries an info window pops up. The info window should show the name of the country. But it doesn't.
The code is as follows. What is wrong with it?
<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>Feature Layer Only Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
require([
"dojo/dom-construct",
"esri/map",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"dojo/domReady!"
], function(
domConstruct,
Map,
InfoTemplate,
FeatureLayer,
Extent
) {
var bounds = new Extent({
"xmin":-20037509,
"ymin":-8283276,
"xmax":20037509,
"ymax":17929239,
"spatialReference":{"wkid":102100}
});
var map = new Map("map", {
extent: bounds
});
var url = "https://services8.arcgis.com/qruYQAspohLtOguC/ArcGIS/rest/services/englishspeakingcountries/FeatureServer/0";
var template = new InfoTemplate("Country", "${ADMIN}");
var fl = new FeatureLayer(url, {
id: "englishspeakingcountries_0",
infoTemplate: template
});
map.addLayer(fl);
var url_2 = "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries/FeatureServer/0"
var fl2 = new FeatureLayer(url_2);
map.addLayer(fl2, 0);
}
);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Using the Network tab in the Chrome developer tools, I found that queries to the feature services returned only the
ObjectIdfield and geometry for each feature. Use theoutFieldsproperty to fix this: