AnsweredAssumed Answered

Popup Info Window Not Showing in Attribute Inspector

Question asked by sarojthapa60 on Dec 15, 2016
Latest reply on Dec 15, 2016 by rscheitlin

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>

Outcomes