popup example

[jaykapalczynski]

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();
            }
        });
    });

[jaykapalczynski]

I can get a general popup to work fine...
just cant seem how to transition from WebMap to my Feature class in the example above. How to get the results to the side panel

I can see the side panel
I can see my features
I can click a feature and get a popup
But cant figure out how to add the below code snip to the FeatureLayer being added....

map.infoWindow.set("popupWindow", false);
initializeSidebar(window.map);

I see the above in the WebMap from the example in last post....

    var map;

    require([
        "dojo/ready", "dojo/on","dojo/_base/connect", "dojo/dom","dijit/registry","dojo/dom-construct","dojo/parser",
        "esri/dijit/Popup","esri/dijit/PopupTemplate", "esri/layers/FeatureLayer",
 "esri/layers/ArcGISDynamicMapServiceLayer",
 "esri/InfoTemplate",
        "esri/renderers/UniqueValueRenderer", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol",
 "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map","esri/arcgis/utils","esri/domUtils","esri/dijit/Popup"
    ], function(
        ready, on, connect,dom,registry,domConstruct,parser,
        Popup,PopupTemplate, FeatureLayer,
 ArcGISDynamicMapServiceLayer,
 InfoTemplate,
 UniqueValueRenderer,SimpleRenderer,SimpleMarkerSymbol,SimpleLineSymbol,
        BorderContainer, ContentPane,Map,arcgisUtils,domUtils,Popup
    ) {

       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
        });

 var infoTemplate = new InfoTemplate();
          infoTemplate.setTitle("Population in ${Species}");
          infoTemplate.setContent("<b>2007 :D: </b>${Habitat}<br/>");

//map.on("load", initializeSidebar);

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

  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();
            }


    });

[jaykapalczynski]

Can I even do this with a FeatureLayer?  Seems I would just have to
*  turn off popups for the Feature Layer
*  then push the results to the side panel....
but thats the part I cannot figure out...anyone out there give me  hand...I can create a JSFiddle if that helps...

Here is a JSFiddle...it references a web map....I want to reference a point FC in a service I am hosting...cant figure out how to do this.

http://jsfiddle.net/Jaykapalczynski/7uRDF/4/

Points to click are off to the left under the + - zoom buttons...

My concern is how to deal with these which are withing the Web Map reference when I remove the web Map and replace with a Feature Layer pointing to a Feature service

window.map = response.map;
//set the popup's popupWindow property to false. This prevents the popup from displaying
map.infoWindow.set("popupWindow", false);
initializeSidebar(window.map);

Thanks

[jaykapalczynski]

Anyone have thoughts or some help?
Appreciated

[TyroneLigon]

Couldn't get your Fiddle feature layer to load because of the password dialog (I'm guessing); I'm on an intranet so I can't post my code.

I tried adapting the side panel example to load the popup window content in a jQuery dialog. I had problems with the "infoWindow.selectPrevious()" and "infoWindow.selectNext()" commands (as in they don't seem to exist - maybe because I'm using JSAPI v. 3.7?) so I went in a different direction.

My app has a basemap, feature layer, and cluster layer. Data are loaded by server query; if the response has a time extent it's loaded in the feature layer, otherwise it's loaded into the cluster layer. The map is initialized with "showInfoWindowOnClick" to false; the map's info window is set to a popup object; the popup listens for "set-features" events; the feature layer listens for "click" events.

When the user clicks on the feature layer, all features at the click point are put in an array and the array is added to the popup window which triggers the "set-features" event; the popup window's "show" function is not executed. The content from the popup's selected feature is passed through a function to the jQuery dialog, which opens on top of the map in the lower left hand corner. "Next" and "Previous" buttons are part of the dialog; I have a feature index variable and use that to call the "popup.select" function when either of those buttons are clicked. Since the cluster layer has its own click function, I changed the cluster layer code to make sure the popup doesn't display.

Don't know if any of this helps you; seems to me at the very least your feature layer needs a click listener to route the feature to the info window and thus trigger the appropriate event.

[AkshayHarshe]

Hi,

Here are the steps how to do it.

1. Firstly, using the "Popup content in side panel" sample you can use the usual method to add a basemap/ map. remove the code that uses the webmap.

2. instead of using webmap then set the popupWindow to false just like the sample does, BUT instead of passing "window.map" to "initializeSidebar" function pass just the 'map' you created in above step.

3. create a object of InfoTemplate class to show/format your attribute values in the sidebar.
you can check rest endpoint of your feature service to get fields and field names that are there in the feature layer and format accordingly.
please check: https://developers.arcgis.com/javascript/jssamples/widget_formatInfoWindow.html

4. Create the feature layer from your feature service. While you write the constructor consume the template you created in step 3.
e.g var FLayer = new FeatureLayer("http://...."){
    mode: FeatureLayer.MODE_ONDEMAND,
    outFields: ["YOURFIELD1","YOURFIELD2"], //IN THE SAME ORDER AS TEMPLATE.
    infoTemplate: YOURTEMPLATE
   });

5. You don't need to change anything in "initializeSidebar()" except replace window.map to just map as we are not creating the map from response.

6. You may not need the navigation buttons as they are used in the sample map which i think has feature overlap.



Thanks,
Akshay Harshe
ESRI Support

[RyanColeman]

Thanks for your help with this Akshay, I got your sample working but when I click on a group of points its only ever selects one feature. Is this a limitation of the feature layer vs. arcgis online or is there some setting I need to change to select several points at once and cycle through them?

Thanks,

Ryan