popup example

Question

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

Click to select feature(s)

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

RyanColeman · Answer

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

Akshay Harshe · Answer

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

Popup_Sidepanel_withFS_Sol.txt.zip

TyroneLigon · Answer

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.