I am trying the code below...but the example uses a webmap...I have a feature service...trying to modify it to use the Feature Layer...
ArcGIS API for JavaScript Sandbox
I am missing something as I cannot get it to show up in the side bar...ANY thoughts????
<!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>Popup - Sidebar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "Open Sans";
}
#leftPane {
width: 20%;
margin: 0;
border: none;
}
#map {
padding: 0;
}
.nav {
padding: 5px 10px;
border: solid 1px grey;
}
#header {
text-align: center;
height: 60px;
border-bottom: solid 1px #ccc;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
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","esri/layers/FeatureLayer","esri/InfoTemplate"
], function(
ready,on,connect,dom,registry,domConstruct,parser,BorderContainer,ContentPane,Map,arcgisUtils,domUtils,Popup,FeatureLayer,InfoTemplate
) {
ready(function() {
parser.parse();
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
var map;
map = new Map("map", {
basemap: "gray",
center: [-79.665, 37.629],
zoom: 8
});
map.infoWindow.set("popupWindow", false);
var infoTemplateWMA = new InfoTemplate();
infoTemplateWMA.setTitle("WMA - ");
infoTemplateWMA.setContent("<table>" +
"<tr><td>Acres</td><td>${Acres}</td></tr>" +
"<tr><td>County_Nam</td><td>${County_Nam}</td></tr>" +
"<tr><td>City_Numbe</td><td>${City_Numbe}</td></tr>" +
"</table><hr>");
var WMA = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Public/VirginiaBoundary_UTMZone17N/MapServe...", {
mode: FeatureLayer.MODE_SNAPSHOT,
id: "DGIFWMAs",
opacity: .5,
visible: true,
outFields:["*"],
infoTemplate: infoTemplateWMA
});
map.addLayer(WMA);
map.on(initializeSidebar(window.map));
function initializeSidebar(map) {
alert("in side bar");
var popup = map.infoWindow;
connect.connect(popup, "onSelectionChange", function() {
displayPopupContent(popup.getSelectedFeature());
});
connect.connect(popup, "onClearFeatures", function() {
dom.byId("featureCount").innerHTML = "Click to select feature";
registry.byId("leftPane").set("content", "");
domUtils.hide(dom.byId("pager"));
});
connect.connect(popup, "onSetFeatures", function() {
displayPopupContent(popup.getSelectedFeature());
if (popup.features.length > 1) {
dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
domUtils.show(dom.byId("pager"))
} else {
dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
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();
}
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false"
region="left" style="width: 20%;height:100%;">
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"></div>
<div id="header" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
<div id="featureCount" style="margin-bottom:5px;">Click to select feature</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="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>