I'm trying to implement an identify tool akin to the sample found here. However, I am having issues getting it to work. Below, i've tried to print to the console when initFunctionality() is called--this never occurs. Strangely, I occasionally get a TypeError: map is not defined. Refreshing the page gets me past this, but I have a feeling this is linked.
The map is created in Map.js:
var map;
var baseMapLayerWorld;
require([
"esri/map", "esri/dijit/Search", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"
], function (Map, Search, DynamicMapServiceLayer, FeatureLayer, InfoTemplate) {
baseMapLayerWorld = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer");
map = new Map("map", {
center: [-150, -17], // lon, lat
zoom: 8
});
map.addLayers([baseMapLayerWorld]);
});The identify tool is implemented in Identify.js:
var bldgResults, parcelResults, symbol;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"dojo/on",
"dojo/parser",
"esri/Color",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dojo/domReady!"
],
function (
Map, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,
IdentifyTask, IdentifyParameters, on, parser, Color, registry
) {
parser.parse();
var identifyTask, identifyParams;
map.on("load", initFunctionality);
var landBaseLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer", {
opacity: 0.2
});
map.infoWindow.on("show", function () {
registry.byId("tabs").resize();
});
map.addLayer(landBaseLayer);
function initFunctionality () {
map.on("click", doIdentify);
console.log("GOT HERE");
identifyTask = new IdentifyTask("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [0, 2];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
map.infoWindow.resize(415, 200);
map.infoWindow.setContent(registry.byId("tabs").domNode);
map.infoWindow.setTitle("Identify Results");
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2),
new Color([255, 255, 0, 0.25]));
}
function doIdentify (event) {
map.graphics.clear();
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = map.extent;
identifyTask.execute(identifyParams, function (idResults) {
addToMap(idResults, event);
});
}
function addToMap (idResults, event) {
bldgResults = { displayFieldName: null, features: [] };
parcelResults = { displayFieldName: null, features: [] };
for (var i = 0, il = idResults.length; i < il; i++) {
var idResult = idResults[i];
if (idResult.layerId === 0) {
if (!bldgResults.displayFieldName) { bldgResults.displayFieldName = idResult.displayFieldName; }
bldgResults.features.push(idResult.feature);
}
else if (idResult.layerId === 2) {
if (!parcelResults.displayFieldName) { parcelResults.displayFieldName = idResult.displayFieldName; }
parcelResults.features.push(idResult.feature);
}
}
registry.byId("bldgTab").set("content", buildingResultTabContent(bldgResults));
registry.byId("parcelTab").set("content", parcelResultTabContent(parcelResults));
map.infoWindow.show(event.screenPoint,
map.getInfoWindowAnchor(event.screenPoint));
}
function buildingResultTabContent (results) {
var template = "";
var features = results.features;
template += "<i>Total features returned: " + features.length + "</i>";
template += "<table border='1'>";
template += "<tr><th>ID</th><th>Address</th></tr>";
var parcelId;
var fullSiteAddress;
for (var i = 0, il = features.length; i < il; i++) {
parcelId = features[i].attributes['PARCELID'];
fullSiteAddress = features[i].attributes['Full Site Address'];
template += "<tr>";
template += "<td>" + parcelId + " <a href='#' onclick='showFeature(bldgResults.features[" + i + "]); return false;'>(show)</a></td>";
template += "<td>" + fullSiteAddress + "</td>";
template += "</tr>";
}
template += "</table>";
return template;
}
function parcelResultTabContent (results) {
var template = "";
var features = results.features;
template = "<i>Total features returned: " + features.length + "</i>";
template += "<table border='1'>";
template += "<tr><th>ID</th><th>Year Built</th><th>School District</th><th>Description</th></tr>";
var parcelIdNumber;
var residentialYearBuilt;
var schoolDistrictDescription;
var propertyDescription;
for (var i = 0, il = features.length; i < il; i++) {
parcelIdNumber = features[i].attributes['Parcel Identification Number'];
residentialYearBuilt = features[i].attributes['Residential Year Built'];
schoolDistrictDescription = features[i].attributes['School District Description'];
propertyDescription = features[i].attributes['Property Description'];
template += "<tr>";
template += "<td>" + parcelIdNumber + " <a href='#' onclick='showFeature(parcelResults.features[" + i + "]); return false;'>(show)</a></td>";
template += "<td>" + residentialYearBuilt + "</td>";
template += "<td>" + schoolDistrictDescription + "</td>";
template += "<td>" + propertyDescription + "</td>";
template += "</tr>";
}
template += "</table>";
return template;
}
});
function showFeature (feature) {
map.graphics.clear();
feature.setSymbol(symbol);
map.graphics.add(feature);
}I add the map to the page in index.html like this:
<!DOCTYPE html>
<html dir="ltr">
<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" />
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css">
<link rel="stylesheet" href="css/widget_styles.css">
<script>
var dojoConfig = {
//parseOnLoad: true,
packages: [
{
name: "agsjs",
//location: location.pathname.replace(/\/[^/]+$/, "") + '../../agsjs'
"location": '/SPE_SIG/agsjs' // for xdomain load
}]
};
</script>
<script src="https://js.arcgis.com/3.17/"></script>
<script src="js/Map.js"></script>
<script src="js/Legend.js"></script>
<script src="js/Search.js"></script>
<script src="js/Identify.js"></script>
<script type="text/javascript">
dojo.require("dojox.layout.ExpandoPane");
</script>
</head>
<body class="claro">
<div id="content"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane"
data-dojo-type="dojox/layout/ExpandoPane"
data-dojo-props="region:'right',title:'Widgets',startExpanded:false">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Légende', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title:'Pane 2'">
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow: hidden;width: 100%; height: 100%; margin: 0;">
</div>
<div id="search"></div>
</div>
</body>
</html>
