The infowindow popup of the feature layer is not being displayed on my map. I couldn't figure out how to have all Search, BasemapGallery, Legend, Navigation toolbar, and attribute inspector working on a map. The code is shown below:
<!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></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<style>
html, body{
height: 100%;
width: 100%;
margin-top: 10px;
overflow: hidden;
padding-bottom: 0;
margin-left: 0;
padding-left: 0;
}
#map {
padding-top: 8px;
width: 100%;
height: 100%;
padding-bottom: 20px;
margin-left: 0;
padding-left: 0;
}
#navToolbar {
border: 2px solid lightgray;
width: 14%;
border-radius: 10px;
}
.zoominIcon {
background-image: url(Images/zoom-in.png);
width: 16px;
height: 16px;
}
.zoomoutIcon {
background-image: url(Images/zoom-out.png);
width: 16px;
height: 16px;
}
.zoomfullextIcon {
background-image: url(Images/zoom-full.png);
width: 16px;
height: 16px;
}
.zoomprevIcon {
background-image: url(Images/zoom-previous.png);
width: 16px;
height: 16px;
}
.zoomnextIcon {
background-image: url(Images/zoom-next.png);
width: 16px;
height: 16px;
}
.panIcon {
background-image: url(Images/pan.png);
width: 16px;
height: 16px;
}
.deactivateIcon {
background-image: url(Images/deactivate.png);
width: 16px;
height: 16px;
}
#search {
display: block;
position: absolute;
z-index: 2;
top:53px;
left: 90px;
}
#rightPane {
width: 8%;
padding-bottom: 7.1%;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map, navToolbar;
require([
"esri/map",
"esri/toolbars/navigation",
"esri/dijit/Search",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/dijit/BasemapGallery",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/Color",
"esri/config",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/on",
"dojo/dom",
"dojo/parser",
"dojo/dom-construct",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dijit/TitlePane",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dojo/domReady!"
],
function (Map, Navigation,Search, FeatureLayer, InfoTemplate, BasemapGallery, Legend, ArcGISDynamicMapServiceLayer,
ImageParametrs, Color, esriConfig, SimpleFillSymbol, SimpleLineSymbol,
on, dom, parser, domConstruct, registry) {
parser.parse();
esriConfig.defaults.io.proxyUrl="/proxy/";
esri.config.defaults.geometryService = new esri.tasks.GeometryService("https://PATH/Geometry/GeometryServer/");
var legendLayers = [];
map = new Map("map", {
basemap: "topo",
center: [-88.55, 43.12],
zoom: 9,
slider: false
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function (msg) {
console.log("basemap gallery error: ", msg);
});
var pointsOfInterest = new esri.layers.FeatureLayer("https://RESTUrl/Endpoints/FeatureServer/1", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ['*'],
opacity:0
});
map.addLayer(pointsOfInterest);
var imageParameters = new ImageParametrs();
imageParameters.format = "jpeg";
var dynamicLayer = new ArcGISDynamicMapServiceLayer("https://RESTUrl/Endpoints/MapServer", {
id: 'Preferred Plan',
"imageParameters": imageParameters
});
legendLayers.push({ layer: dynamicLayer, title: 'Preferred Plan' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
map.addLayers([dynamicLayer]);
dojo.connect(map, "OnLayersAddResult", initEditor);
function initEditor(results) {
//only one layer
var featureLayer = results[0].layer;
var layerInfos = [{
'featureLayer':featureLayer,
'showAttachments':false,
'showDeleteButton':false,
'fieldInfos':[
{'fieldName':'Name', 'isEditable':false, 'label':'<b> Name:</b>'},
{'fieldName': 'Code', 'isEditable':false, 'label':'<b>Code:</b>'},
{'fieldName': 'Type', 'isEditable':true, 'label':'<b>Type:</b>'},
]
}];
//define the editor settings
var settings = {
map: map,
// templatePicker:templatePicker,
layerInfos:layerInfos
};
var params = {settings: settings};
//Create the editor widget
var editorWidget = new esri.dijit.editing.Editor(params);
editorWidget.startup();
//resize the info window (attribute inspector)
map.infoWindow.resize(495,495);
}
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomfullext").on("click", function () {
navToolbar.zoomToFullExtent();
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("zoomnext").on("click", function () {
navToolbar.zoomToNextExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
var search = new Search({
sources: [{
featureLayer: new FeatureLayer("https://RESTUrl/FeatureServer/5", {
outFields: ["*"],
opacity:0,
infoTemplate: new InfoTemplate("Region", "Region: ${Region}")
}),
outFields: ["Region"],
displayField: "Region",
suggestionTemplate: "Region:${Region}",
name: "Metroplex",
placeholder: "Enter a Region",
enableSuggestions: true
}],
map: map
}, "search");
search.startup();
});
</script>
</head>
<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 95%; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
</div>
</div>
<div id="navToolbar" data-dojo-type="dijit/Toolbar" style="position:absolute; right:200px; top:52px; z-Index:1000;">
<div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'"></div>
<div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'"></div>
</div>
<div id="search"></div>
<div style="position:absolute; right:200px; top:93px; z-Index:1;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</body>
</html>