YOU WILL have to zoom out to see the features to click...
CHEERS TO BRADLEY for his Help....very appreciated.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Identify with Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.10/js/esri/css/esri.css">
<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;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
#header {
text-align: left;
height: 100px;
border-bottom: solid 1px #ccc;
margin: 10;
}
</style>
<script src="https://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/map",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/Popup",
"dojo/_base/array",
"esri/Color",
"dojo/dom-construct",
"dojo/on",
"dojo/_base/connect",
"dojo/dom",
"dijit/registry",
"dojo/parser",
"esri/arcgis/utils",
"esri/domUtils",
"esri/InfoTemplate",
"dojo/query",
"esri/layers/ImageParameters",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
InfoTemplate,
ArcGISDynamicMapServiceLayer,
SimpleFillSymbol,
SimpleMarkerSymbol,
IdentifyTask,
IdentifyParameters,
Popup,
arrayUtils,
Color,
domConstruct,
on,
connect,
dom,
registry,
parser,
arcgisUtils,
domUtils,
InfoTemplate,
query,
ImageParameters
) {
parser.parse();
//setup event handlers for the next/previous buttons
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
var identifyTask, identifyParams;
var popup = new Popup({
markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
new Color([0, 255, 0, 0.5])),
marginLeft: "20",
marginTop: "20"
}, domConstruct.create("div"));
map = new Map("map", {
basemap: "satellite",
center: [-83.275, 42.573],
zoom: 18,
infoWindow: popup
});
map.on("load", mapReady);
var parcelsURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/MapServer/";
dynLayer = new ArcGISDynamicMapServiceLayer(parcelsURL, {
opacity: .55
})
map.addLayer(dynLayer);
function mapReady() {
map.on("click", executeIdentifyTask);
//create identify tasks and setup parameters
identifyTask = new IdentifyTask(parcelsURL);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [0];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
}
function executeIdentifyTask(event) {
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = map.extent;
//SET THE TOLERANCE FOR THE MOUSE CLICK
identifyParams.tolerance = 8;
var deferred = identifyTask
.execute(identifyParams)
.addCallback(function(response) {
// response is an array of identify result objects
// Let's return an array of features.
return arrayUtils.map(response, function(result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Incidents') {
var taxParcelTemplate = new InfoTemplate("",
"${req_id} <br/> address: ${address}");
feature.setInfoTemplate(taxParcelTemplate);
} else if (layerName === 'Building Footprints') {
var buildingFootprintTemplate = new InfoTemplate("",
"Parcel ID: ${PARCELID}");
feature.setInfoTemplate(buildingFootprintTemplate);
}
return feature;
});
});
// InfoWindow expects an array of features from each deferred
// object that you pass. If the response from the task execution
// above is not an array of features, then you need to add a callback
// like the one above to post-process the response and return an
// array of features.
map.infoWindow.setFeatures([deferred]);
map.infoWindow.set("popupWindow", false);
initializeSidebar(map);
}
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) {
console.log(feature);
var content = feature.getContent();
registry.byId("leftPane").set("content", content);
}
}
function selectPrevious() {
map.infoWindow.selectPrevious();
}
function selectNext() {
map.infoWindow.selectNext();
}
//Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.
var imageParameters = new ImageParameters();
imageParameters.layerIds = [0, 1, 2];
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
map.on("load", function() {
document.getElementById("layer0CheckBox").checked = true;
});
on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);
function updateLayerVisibility() {
var inputs = query(".list_item");
var inputCount = inputs.length;
//in this application layer 2 is always on.
visibleLayerIds = [];
for (var i = 0; i < inputCount; i++) {
if (inputs.checked) {
visibleLayerIds.push(inputs.value);
}
}
if (visibleLayerIds.length === 0) {
visibleLayerIds.push(-1);
}
dynLayer.setVisibleLayers(visibleLayerIds);
}
});
</script>
</head>
<body>
<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="checkBoxes">
Layer List :
<br />
<span id="layer_list">
<input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Incident
<br />
</span>
<br />
<br />
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<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="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>