Community
Select to view content in your preferred language

Identify tool implementation issue

2075
10
Jump to solution
10-11-2016 12:52 PM
NhuMai
by
New Contributor II
‎10-11-2016 12:52 PM

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/MapServe...", {
              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/MapServe...");

            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>
0 Kudos
10 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-17-2016 08:10 AM

Nhu,

   I would suggest just calling initFunctionality();

instead of 

map.on("load", initFunctionality);

as I believe that the map is already loaded before your Identify.js is loaded.

0 Kudos