dojo click event - 3.26 API version

370
5
Jump to solution
11-13-2018 02:39 PM
TraceStanford1
New Contributor III

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Trace,

  1. You never define stormDrainNodesDetails (line 6).
  2. You never call the IdentifyFeatures function in your code (line 12).
  3. 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)); 
0 Kudos
TraceStanford1
New Contributor III

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", "<b>Tax ID:</b> ${WCTID}<br><b>Address:</b> ${ADDRESS}<br><b>Lot:</b> ${LOT_UNIT}<br><b>Unit:</b> ${UNIT}<br><b>Subdivision:</b> ${SUBDIVISION}<br><b>Phase:</b> ${PHASE}<br><br><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] + "<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
                        stormDrainNodes.style.display = "block";
                        noattributes.style.display = "none";
                    }
                    if (!i) {
                        stormDrainNodes.style.display = "none";
                    }
                }); //END STORM DRAIN NODES
            }//if true
        });//idEvent

    });//require
}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
TraceStanford1
New Contributor III

Ahh Thank you!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos