AnsweredAssumed Answered

popup example

Question asked by jay.kapalczynski on Mar 11, 2014
Latest reply on Mar 20, 2015 by rjcoleman
I am referencing this popup example. Although it shows it consuming an ArcGIS online web map. I want to access my Feature Service. I modified the code to include my Feature Service

https://developers.arcgis.com/javascript/jssamples/popup_sidepanel.html

The FS shown in code below is not the actual Service...just a junk URL

1. with out the Online Web Map how do I modify this to get the code to run initializeSidebar(window.map);
I tried this: map.on("load", initializeSidebar);

HTML
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
    data-dojo-props="design:'headline',gutters:false" 
    style="width:700px; height:400px;">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" 
        region="left" style="width: 30%;height:100%;">
        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" 
            data-dojo-props="region:'center'"></div>
        <div id="header2" data-dojo-type="dijit/layout/ContentPane" 
            data-dojo-props="region:'top'">
            <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
            <div id="pager" style="display:none;"> 
                <a href='javascript:void(0);' id ="previous" class='nav' style="text-decoration: none;">
                    < Prev
                </a>
                  
                <a href='javascript:void(0);' id="next" class='nav'  style="text-decoration: none;">
                    Next >
                </a>
            </div>
        </div>
    </div>
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>


JS
    var map;

    require([
        "dojo/ready", "dojo/on","dojo/_base/connect", "dojo/dom","dijit/registry","dojo/dom-construct","dojo/parser", 
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map","esri/arcgis/utils","esri/domUtils","esri/dijit/Popup"
    ], function(
        ready, on, connect,dom,registry,domConstruct,parser, 
        BorderContainer, ContentPane,Map,arcgisUtils,domUtils,Popup
    ) {
        ready(function(){

            parser.parse();

            //setup event handlers for the next/previous buttons
            on(dom.byId("previous"), "click", selectPrevious);
            on(dom.byId("next"), "click", selectNext);

       map = new Map("mapDiv", {
          basemap: "topo",
          center: [-77.4329, 37.5410],
          zoom: 7,
          slider: true
        });

 map.on("load", initializeSidebar);

  var featureLayer2 = new FeatureLayer("https://web1/arcgis/rest/services/Warbler_Map/Warbler_Map_Readonly/FeatureServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ['*']
          });
 map.addLayer(featureLayer2);

            function initializeSidebar(map){
                var popup = map.infoWindow;

                //when the selection changes update the side panel to display the popup info for the 
                //currently selected feature. 
                connect.connect(popup, "onSelectionChange", function(){
                    displayPopupContent(popup.getSelectedFeature());
                });

                //when the selection is cleared remove the popup content from the side panel. 
                connect.connect(popup, "onClearFeatures", function(){
                    //dom.byId replaces dojo.byId
                    dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                    //registry.byId replaces dijit.byId
                    registry.byId("leftPane").set("content", "");
                    domUtils.hide(dom.byId("pager"));
                });
                //When features are associated with the  map's info window update the sidebar with the new content. 
                connect.connect(popup, "onSetFeatures", function(){
                    displayPopupContent(popup.getSelectedFeature());
                    dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";

                    //enable navigation if more than one feature is selected 
                    popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
                });
            }
            function displayPopupContent(feature){
                if(feature){
                    var content = feature.getContent();
                    registry.byId("leftPane").set("content", content);
                }
            }
            function selectPrevious(){
                window.map.infoWindow.selectPrevious();
            }
            function selectNext(){
                window.map.infoWindow.selectNext();
            }
        });
    });

Outcomes