<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>
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(); } }); });
map.infoWindow.set("popupWindow", false); initializeSidebar(window.map);
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(); } });
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 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