Popup Info Window Not Showing in Attribute Inspector

SarojThapa1 · ‎12-15-2016

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>

RobertScheitlin__GISP · ‎12-15-2016

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.

View solution in original post

RobertScheitlin__GISP · ‎12-15-2016

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.