dojo click event - 3.26 API version

TraceStanford1 · ‎11-13-2018

I am trying to write a function identifyFeatures() that creates a simple marker symbol and collapsible panel with attributes when the user clicks on the map, but nothing is happening upon clicking, so I'm doing something wrong. I'm upgrading this site from an earlier version of the API, and this is the last part that I can't get to work...

Is there anybody that could take a look at the function in the index.js file in the js folder and help me? It would be greatly appreciated

RobertScheitlin__GISP · ‎11-14-2018

Trace,

Here is what you need to get the attributes panel displaying:

function identifyFeatures() {
  require([
          "esri/tasks/QueryTask",
          "esri/tasks/query",
          "esri/Color",
          "esri/geometry/Extent",
          "esri/SpatialReference",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/graphic",
          "dojo/on",
          "dojo/dom",
          "dojo/domReady!"
     ], function (QueryTask, Query, Color, Extent, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, on, dom) {

    on(map, "click", function (evt) {
      map.graphics.clear();
      var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X, 8, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0])), new Color(0, 0, 255));

      dojo.byId("noattributes").style.display = "block";

      if (stormwaterDrainsOn === true) {
        $('#attributesPanel').panel('open');

        //BEGIN STORM DRAIN NODES
        var queryStormDrainNodesTask = new QueryTask("http://maps.sgcity.org/arcgisweb/rest/services/StormFeatures/MapServer/6");
        var queryStormDrainNodesFeature = new Query();
        queryStormDrainNodesFeature.returnGeometry = false;
        queryStormDrainNodesFeature.outFields = ["TYPE", "CLEANOUT", "SIZE", "GEOGRAPHY", "ELEVATION", "DEPTH", "INVERT", "IN_OUT", "OWNERSHIP",
                                                                      "INSTALL_DA", "LID_TYPE", "LID_DIA", "MH_TYPE", "CLEANED_YR", "COND_DATE", "COND_RTG"];
        queryStormDrainNodesFeature.outSpatialReference = map.spatialReference;

        queryStormDrainNodesFeature.geometry = new Extent(evt.mapPoint.x - 5, evt.mapPoint.y - 5, evt.mapPoint.x + 5, evt.mapPoint.y + 5,
          new SpatialReference({
            wkid: 3567
          }));

        queryStormDrainNodesTask.execute(queryStormDrainNodesFeature, function (results) {
          stormDrainNodesDetails = "";

          for (var i = 0, il = results.features.length; i < il; i++) {
            var graphic = results.features[i];
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);

            var featureAttributes = results.features[i].attributes;
            for (var att in featureAttributes) {
              stormDrainNodesDetails = stormDrainNodesDetails + featureAttributes[att] + "<br />";
              dojo.byId("stormDrainNodesResults").innerHTML = "<small><b>Type: </b>" + featureAttributes.TYPE +
                "<br><b>Cleanout: </b>" + featureAttributes.CLEANOUT +
                "<br><b>Size: </b>" + featureAttributes.SIZE +
                "<br><b>Geography: </b>" + featureAttributes.GEOGRAPHY +
                "<br><b>Elevation: </b>" + featureAttributes.ELEVATION +
                "<br><b>Depth: </b>" + featureAttributes.DEPTH +
                "<br><b>Invert: </b>" + featureAttributes.INVERT +
                "<br><b>In_Out: </b>" + featureAttributes.IN_OUT +
                "<br><b>Ownership: </b>" + featureAttributes.OWNERSHIP +
                "<br><b>Install Date: </b>" + featureAttributes.INSTALL_DA +
                "<br><b>Lid Type: </b>" + featureAttributes.LID_TYPE +
                "<br><b>Lid Diameter: </b>" + featureAttributes.LID_DIA +
                "<br><b>MH Type: </b>" + featureAttributes.MH_TYPE +
                "<br><b>Year Cleaned: </b>" + featureAttributes.CLEANED_YR +
                "<br><b>Cond. Date: </b>" + featureAttributes.COND_DATE +
                "<br><b>Condt. Rtg: </b>" + featureAttributes.COND_RTG +
                "</small>";
            } //att
            dojo.byId("stormDrainNodes").style.display = "block";
            $("#stormDrainNodes").collapsible( "option", "collapsed", false );
            dojo.byId("noattributes").style.display = "none";
          }
          if (!i) {
            dojo.byId("stormDrainNodes").style.display = "none";
          }
        }); //END STORM DRAIN NODES
      } //if true
    }); //idEvent

  }); //require
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Just remember I can not debug your whole app for you.

View solution in original post

RobertScheitlin__GISP · ‎11-14-2018

Trace,

You never define stormDrainNodesDetails (line 6).
You never call the IdentifyFeatures function in your code (line 12).
You did not construct the SimpleMarkerSymbol correctly (line 34).

/*jshint -W117 */
/*jshint -W098 */
"use strict";
var dojo, esri;
var map, streetsMap, streetsBase, streetsTiles, imageryMap, imageryBase, imageryTiles;
var stormwaterDrainsLayer, trafficControlLayer, stormDrainNodesDetails;
var stormwaterDrainsOn = true;
...

...     
    search.startup();
    identifyFeatures();
}); //End REQUIRE

...

function identifyFeatures() {
     require([
          "esri/tasks/QueryTask",
          "esri/tasks/query",
          "esri/Color",
          "esri/geometry/Extent",
          "esri/SpatialReference",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/graphic",
          "dojo/on",
          "dojo/dom",
          "dojo/domReady!"
     ], function (QueryTask, Query, Color, Extent, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, on, dom) {

          on(map, "click", function (evt) {
               map.graphics.clear();
               var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X, 8, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0])), new Color(0, 0, 255)); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TraceStanford1 · ‎11-14-2018

Hey thanks for replying! I think I fixed those issues, but am still not getting the event to work. I've been looking at this for a few days and am going crazy trying to figure out why it's not working...Maybe I just need to start from scratch

/*jshint -W117 */
/*jshint -W098 */
"use strict";
var dojo, esri;
var map, streetsMap, streetsBase, streetsTiles, imageryMap, imageryBase, imageryTiles;
var stormwaterDrainsLayer, trafficControlLayer, stormDrainNodesDetails;
var stormwaterDrainsOn = true;
var trafficControlOn = true;
var gsvc, document, $, queryTask, window;
var tb, idValue = "parcels";

var printLayout, printFormat;

require([
"esri/tasks/GeometryService",
"esri/geometry/Extent",
"esri/map",
//"esri/Color",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
//"esri/layers/ArcGISImageServiceLayer",
//"esri/layers/ImageParameters",
"esri/layers/VectorTileLayer",
"esri/dijit/Search",
"esri/tasks/locator",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function (
   GeometryService,
   Extent,
   Map,
   //Color,
   ArcGISTiledMapServiceLayer,
   ArcGISDynamicMapServiceLayer,
   //ArcGISImageServiceLayer,
   //ImageParameters,
   VectorTileLayer,
   Search,
   Locator,
   FeatureLayer,
   InfoTemplate,
   on,
   dom
) {
   gsvc = new GeometryService("https://maps.sgcity.org/arcgisweb/rest/services/Utilities/Geometry/GeometryServer");

   var initialExtent = new Extent({
       "xmin": 989913.278,
       "ymin": 9973304.167,
       "xmax": 1080913.278,
       "ymax": 10047484.722,
       "spatialReference": {
           "wkid": 3567
       }
   });

   map = new Map("ui-map", {
       extent: initialExtent
   });

map.on("load", setStreets);

showLayers();

streetsMap = new ArcGISTiledMapServiceLayer("https://maps.sgcity.org/arcgisweb/rest/services/SGCity_Hillshade/MapServer");
map.addLayer(streetsMap);

   streetsTiles = new VectorTileLayer("https://tiles.arcgis.com/tiles/sSyqU2G01sKVqGZA/arcgis/rest/services/SGCity_Streets_VTiles/VectorTil...");
   map.addLayer(streetsTiles);

   streetsBase = new ArcGISDynamicMapServiceLayer("https://maps.sgcity.org/arcgisweb/rest/services/SGCityStreetsParcels/MapServer");
   map.addLayer(streetsBase);

   imageryMap = new ArcGISTiledMapServiceLayer("https://maps.sgcity.org/arcgisweb/rest/services/SGCityImagery/MapServer");
   map.addLayer(imageryMap);
   //imagery2016 = new esri.layers.ArcGISImageServiceLayer("https://maps.sgcity.org/arcgisweb/rest/services/Aerials2016/ImageServer", {
       //minScale: "200"
   //});
   //map.addLayer(imagery2016);

imageryBase = new ArcGISDynamicMapServiceLayer("https://maps.sgcity.org/arcgisweb/rest/services/SGCityImagery_Dynamic/MapServer");
map.addLayer(imageryBase);

imageryTiles = new VectorTileLayer("https://tiles.arcgis.com/tiles/sSyqU2G01sKVqGZA/arcgis/rest/services/SGCityImagery_VectorTiles/Vecto...");
map.addLayer(imageryTiles);

   var search = new Search({
       enableButtonMode: false, //this enables the search widget to display as a single button
       enableLabel: false,
       enableInfoWindow: true,
       enableHighlight: false,
       showInfoWindowOnSelect: true,
       activeSource: new Locator("https://maps.sgcity.org/arcgisweb/rest/services/UnitStreetComposite/GeocodeServer"),
       map: map
   }, "search");

var sources = [];

   /*ADDRESS*/
   sources.push({
       locator: new Locator("https://maps.sgcity.org/arcgisweb/rest/services/UnitStreetComposite/GeocodeServer"),
       singleLineFieldName: "SingleLine",
       name: "Addresses",
       outFields: ["*"],
       placeholder: "Search Local Addresses",
       maxResults: 3,
       maxSuggestions: 6,
       enableSuggestions: false,
       minCharacters: 0
   });

   /*STREETS*/
   sources.push({
       featureLayer: new FeatureLayer("https://maps.sgcity.org/arcgisweb/rest/services/SGCityStreetsBasemap/MapServer/92"),
       searchFields: ["NAME"],
       displayField: "NAME",
       exactMatch: false,
       outFields: ["NAME"],
       suggestQueryParams: {
           orderByFields: ["NAME"]
       },
       name: "Street Names",
       placeholder: "Search local street names",
       maxResults: 6,
       maxSuggestions: 6,

       //Create an InfoTemplate and include three fields
       infoTemplate: new InfoTemplate("Streets", "Name: ${NAME}"),
       enableSuggestions: true,
       minCharacters: 0
   });

   /*SUBDIVISIONS*/
   sources.push({
       featureLayer: new FeatureLayer("https://maps.sgcity.org/arcgisweb/rest/services/SGCityStreetsBasemap/MapServer/93"),
       searchFields: ["SUBNAME"],
       displayField: "SUBNAME",
       exactMatch: false,
       outFields: ["SUBNAME"],
       suggestQueryParams: {
           orderByFields: ["SUBNAME"]
       },
       name: "Subdivisions",
       placeholder: "Subdivision name and phase",
       maxResults: 6,
       maxSuggestions: 10,

       infoTemplate: new InfoTemplate("Subdivisions", "Name: ${SUBNAME}"),
       enableSuggestions: true,
       minCharacters: 0
   });

   /*TAX ID*/
   sources.push({
       featureLayer: new FeatureLayer("https://maps.sgcity.org/arcgisweb/rest/services/SGCityStreetsBasemap/MapServer/79"),
       searchFields: ["WCTID"],
       displayField: "WCTID",
       exactMatch: false,
       outFields: ["WCTID", "SUBDIVISION", "PHASE", "LOT_UNIT", "ADDRESS", "ACCOUNT", "UNIT"],
       suggestQueryParams: {
           orderByFields: ["WCTID"]
       },
       name: "Tax ID",
       placeholder: "Tax ID number",
       maxResults: 6,
       maxSuggestions: 10,

infoTemplate: new InfoTemplate("Parcel", "Tax ID: ${WCTID} Address: ${ADDRESS} Lot: ${LOT_UNIT} Unit: ${UNIT} Subdivision: ${SUBDIVISION} Phase: ${PHASE} <a href='http://eweb.washco.utah.gov:8080/recorder/taxweb/account.jsp?accountNum=${ACCOUNT}' target='_blank'>View public information for this property</a>"),
 enableSuggestions: true,
 minCharacters: 0
 });

search.set("sources", sources);

search.startup();
identifyFeatures();
}); //End REQUIRE

function identifyFeatures() {
   require([
       "esri/tasks/QueryTask",
       "esri/tasks/query",
       "esri/Color",
       "esri/geometry/Extent",
       "esri/SpatialReference",
       "esri/symbols/SimpleMarkerSymbol",
       "esri/symbols/SimpleLineSymbol",
       "esri/graphic",
       "dojo/on",
       "dojo/domReady!"
   ], function (QueryTask, Query, Color, Extent, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, on) {

       on(map, "click", function (evt) {
           map.graphics.clear();
           var line = new SimpleLineSymbol();
           line.setWidth(1.25);
           line.setColor(new Color([255, 0, 0, 1]));
           var symbol = new SimpleMarkerSymbol();
           symbol.setColor(new Color([255, 0, 0, 1]));
           symbol.setOutline(line);
           symbol.setSize(8);
           symbol.setStyle(SimpleMarkerSymbol.STYLE_X);

noattributes.style.display = "block";

if (stormwaterDrainsOn === true) {

               //BEGIN STORM DRAIN NODES
               var queryStormDrainNodesTask = new QueryTask("http://maps.sgcity.org/arcgisweb/rest/services/StormFeatures/MapServer/6");
               var queryStormDrainNodesFeature = new Query();
               queryStormDrainNodesFeature.returnGeometry = false;
               queryStormDrainNodesFeature.outFields = ["TYPE", "CLEANOUT", "SIZE", "GEOGRAPHY", "ELEVATION", "DEPTH", "INVERT", "IN_OUT", "OWNERSHIP",
                                                       "INSTALL_DA", "LID_TYPE", "LID_DIA", "MH_TYPE", "CLEANED_YR", "COND_DATE", "COND_RTG"];

               queryStormDrainNodesFeature.geometry = new Extent(evt.mapPoint.x - 5, evt.mapPoint.y - 5, evt.mapPoint.x + 5, evt.mapPoint.y + 5,
                   new SpatialReference({
                       wkid: 3567
                   }));

               queryStormDrainNodesTask.execute(queryStormDrainNodesFeature, function (results) {
                   stormDrainNodesDetails = "";
                   var graphic = new Graphic(evt.mapPoint, symbol);

for (var i = 0, il = results.features.length; i < il; i++) {
 var graphic = results.features;
 graphic.setSymbol(symbol);
 map.graphics.add(graphic);

var featureAttributes = results.features.attributes;
 for (var att in featureAttributes) {
 stormDrainNodesDetails = stormDrainNodesDetails + featureAttributes[att] + " ";
 dojo.byId("stormDrainNodesResults").innerHTML = "Type: " + featureAttributes.TYPE +
 " Cleanout: " + featureAttributes.CLEANOUT +
 " Size: " + featureAttributes.SIZE +
 " Geography: " + featureAttributes.GEOGRAPHY +
 " Elevation: " + featureAttributes.ELEVATION +
 " Depth: " + featureAttributes.DEPTH +
 " Invert: " + featureAttributes.INVERT +
 " In_Out: " + featureAttributes.IN_OUT +
 " Ownership: " + featureAttributes.OWNERSHIP +
 " Install Date: " + featureAttributes.INSTALL_DA +
 " Lid Type: " + featureAttributes.LID_TYPE +
 " Lid Diameter: " + featureAttributes.LID_DIA +
 " MH Type: " + featureAttributes.MH_TYPE +
 " Year Cleaned: " + featureAttributes.CLEANED_YR +
 " Cond. Date: " + featureAttributes.COND_DATE +
 " Condt. Rtg: " + featureAttributes.COND_RTG+
 "";
 }//att
 stormDrainNodes.style.display = "block";
 noattributes.style.display = "none";
 }
 if (!i) {
 stormDrainNodes.style.display = "none";
 }
 }); //END STORM DRAIN NODES
 }//if true
 });//idEvent

});//require
}

RobertScheitlin__GISP · ‎11-14-2018

Trace,

Here is what you need to get the attributes panel displaying:

function identifyFeatures() {
  require([
          "esri/tasks/QueryTask",
          "esri/tasks/query",
          "esri/Color",
          "esri/geometry/Extent",
          "esri/SpatialReference",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/graphic",
          "dojo/on",
          "dojo/dom",
          "dojo/domReady!"
     ], function (QueryTask, Query, Color, Extent, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, on, dom) {

    on(map, "click", function (evt) {
      map.graphics.clear();
      var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X, 8, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0])), new Color(0, 0, 255));

      dojo.byId("noattributes").style.display = "block";

      if (stormwaterDrainsOn === true) {
        $('#attributesPanel').panel('open');

        //BEGIN STORM DRAIN NODES
        var queryStormDrainNodesTask = new QueryTask("http://maps.sgcity.org/arcgisweb/rest/services/StormFeatures/MapServer/6");
        var queryStormDrainNodesFeature = new Query();
        queryStormDrainNodesFeature.returnGeometry = false;
        queryStormDrainNodesFeature.outFields = ["TYPE", "CLEANOUT", "SIZE", "GEOGRAPHY", "ELEVATION", "DEPTH", "INVERT", "IN_OUT", "OWNERSHIP",
                                                                      "INSTALL_DA", "LID_TYPE", "LID_DIA", "MH_TYPE", "CLEANED_YR", "COND_DATE", "COND_RTG"];
        queryStormDrainNodesFeature.outSpatialReference = map.spatialReference;

        queryStormDrainNodesFeature.geometry = new Extent(evt.mapPoint.x - 5, evt.mapPoint.y - 5, evt.mapPoint.x + 5, evt.mapPoint.y + 5,
          new SpatialReference({
            wkid: 3567
          }));

        queryStormDrainNodesTask.execute(queryStormDrainNodesFeature, function (results) {
          stormDrainNodesDetails = "";

          for (var i = 0, il = results.features.length; i < il; i++) {
            var graphic = results.features[i];
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);

            var featureAttributes = results.features[i].attributes;
            for (var att in featureAttributes) {
              stormDrainNodesDetails = stormDrainNodesDetails + featureAttributes[att] + "<br />";
              dojo.byId("stormDrainNodesResults").innerHTML = "<small><b>Type: </b>" + featureAttributes.TYPE +
                "<br><b>Cleanout: </b>" + featureAttributes.CLEANOUT +
                "<br><b>Size: </b>" + featureAttributes.SIZE +
                "<br><b>Geography: </b>" + featureAttributes.GEOGRAPHY +
                "<br><b>Elevation: </b>" + featureAttributes.ELEVATION +
                "<br><b>Depth: </b>" + featureAttributes.DEPTH +
                "<br><b>Invert: </b>" + featureAttributes.INVERT +
                "<br><b>In_Out: </b>" + featureAttributes.IN_OUT +
                "<br><b>Ownership: </b>" + featureAttributes.OWNERSHIP +
                "<br><b>Install Date: </b>" + featureAttributes.INSTALL_DA +
                "<br><b>Lid Type: </b>" + featureAttributes.LID_TYPE +
                "<br><b>Lid Diameter: </b>" + featureAttributes.LID_DIA +
                "<br><b>MH Type: </b>" + featureAttributes.MH_TYPE +
                "<br><b>Year Cleaned: </b>" + featureAttributes.CLEANED_YR +
                "<br><b>Cond. Date: </b>" + featureAttributes.COND_DATE +
                "<br><b>Condt. Rtg: </b>" + featureAttributes.COND_RTG +
                "</small>";
            } //att
            dojo.byId("stormDrainNodes").style.display = "block";
            $("#stormDrainNodes").collapsible( "option", "collapsed", false );
            dojo.byId("noattributes").style.display = "none";
          }
          if (!i) {
            dojo.byId("stormDrainNodes").style.display = "none";
          }
        }); //END STORM DRAIN NODES
      } //if true
    }); //idEvent

  }); //require
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Just remember I can not debug your whole app for you.

TraceStanford1 · ‎11-14-2018

Ahh Thank you!

RobertScheitlin__GISP · ‎11-14-2018

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.