AnsweredAssumed Answered

Identify tool implementation issue

Question asked by ingenue3911 on Oct 11, 2016
Latest reply on Oct 17, 2016 by rscheitlin

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>

Outcomes