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>
Solved! Go to Solution.
Saroj,
The biggest issue I see in your code (beside you mixing legacy and AMD coding styles - not good) is that you are trying to init the editor widget with a ArcGISDynamicMapServiceLayer and not a FeatureLayer that is using a FeatureServer url.
map.addLayers([dynamicLayer]);
dojo.connect(map, "OnLayersAddResult", initEditor);
function initEditor(results) {
//only one layer
var featureLayer = results[0].layer;
Also there is no need to use the depreciated dojo.connect when a couple of lines above you already have a on event already attached to the layers-add-result, so you could just add the initEditor to that event handler as well.
Saroj,
The biggest issue I see in your code (beside you mixing legacy and AMD coding styles - not good) is that you are trying to init the editor widget with a ArcGISDynamicMapServiceLayer and not a FeatureLayer that is using a FeatureServer url.
map.addLayers([dynamicLayer]);
dojo.connect(map, "OnLayersAddResult", initEditor);
function initEditor(results) {
//only one layer
var featureLayer = results[0].layer;
Also there is no need to use the depreciated dojo.connect when a couple of lines above you already have a on event already attached to the layers-add-result, so you could just add the initEditor to that event handler as well.