topic Re: getting a TypeError in ArcGIS JavaScript Maps SDK Questions

getting a TypeError

joepublic — Sat, 18 Oct 2014 11:50:33 GMT

I am still new to esri's js-api. I am getting the error below at line 149 (queryTask.execute(cntryq);) in the attached file.

I have no idea how to resolve this error

TypeError {stack: "TypeError: undefined is not a function↵ at coun…ndler (http://js.arcgis.com/3.10/init.js:490:212)", message: "undefined is not a function"}

message: "undefined is not a function"
stack: "TypeError: undefined is not a function↵ at countries (http://tobagoborn.com/esri/examples/p1p2c.html:149:15)↵ at cntrycds (http://tobagoborn.com/esri/examples/p1p2c.html:163:5)↵ at http://tobagoborn.com/esri/examples/p1p2c.html:179:7↵ at S._resolve (http://js.arcgis.com/3.10/js/esri/layers/FeatureLayer.js:64:294)↵ at k (http://js.arcgis.com/3.10/js/esri/layers/FeatureLayer.js:65:355)↵ at c (http://js.arcgis.com/3.10/init.js:74:221)↵ at d (http://js.arcgis.com/3.10/init.js:74:10)↵ at resolve.callback (http://js.arcgis.com/3.10/init.js:75:350)↵ at Object.n._resDfd (http://js.arcgis.com/3.10/init.js:758:31)↵ at e._successHandler (http://js.arcgis.com/3.10/init.js:490:212)"

Re: getting a TypeError

DanPatterson_Retired — Sat, 18 Oct 2014 12:11:23 GMT

can you redirect your post to an appropriate Place to facilitate answering

Re: getting a TypeError

joepublic — Sat, 18 Oct 2014 12:21:02 GMT

Where is the appropriate place??

Re: getting a TypeError

DanPatterson_Retired — Sat, 18 Oct 2014 12:27:44 GMT

See the big Places link to the left of your avatar, click on it, then you can select a Space and post/move your question there. I am guessing you have some sort of java question but it could go in several spots, ie what are you using/developing. you will get better response if you use places/spaces and tags to direct your questions otherwise they end up in the void

Re: getting a TypeError

joepublic — Sat, 18 Oct 2014 12:39:23 GMT

I am using ESRI's javascript API so I think I need someone from ESRI to look at it

Correct??

Re: getting a TypeError

DanPatterson_Retired — Sat, 18 Oct 2014 12:42:35 GMT

If someone from Esri has to look at it, then you had better send a request to tech support. If you want help, this is a user site and Esri staff do mingle in our midst as well.

Re: getting a TypeError

MatthewLewis — Tue, 21 Oct 2014 14:41:39 GMT

Ok... firstly this code needs a tidy up! Split out your code and use standards, otherwise know one will want to read it and help you.

I've played around and improved the structure. I don't seem to be getting any TypeErrors

Re: getting a TypeError

joepublic — Tue, 21 Oct 2014 19:06:17 GMT

Mathew,

Thanks for the quick code review and the assist.

I agree my code is rather crude and inefficient.

My original plan was to use esri-leaflet api but it could not handle related tables.

This api is new to me and at the moment I need to get a working version asap.

Once it done, I do plan to figure how everything works while I clean up the code.

Will review what you sent and let you know if I have any questions

Chris

Re: getting a TypeError

MatthewLewis — Wed, 22 Oct 2014 08:21:06 GMT

No problem, give me a shout if you need more help. I'm not always online but I try and check it regularly

Re: getting a TypeError

joepublic — Thu, 23 Oct 2014 04:20:15 GMT

Mathew, et al

I tried redoing my code similar to what attaching but have encountered errors. So I am back to my original code and was able to solve the TypeError.

Now for the last part..... I need to be able to click on the countries highlighted (based on the button clicked). Clicking on a highlighted country, triggers a query of the related table (tableURL) and the results of the query are displayed in the side panel on the right.

Can you or someone show me how I can add an onclick event and a relatedquery to my script?

Hope what I want makes sense

Re: getting a TypeError

MatthewLewis — Thu, 23 Oct 2014 08:15:55 GMT

Glad to hear you solved the issue. Could you post the solution so others will benefit when they look at this in the future?

An onclick event can be done in a number of ways. I've highlighted two of the simplest below.

1) in the HTML - W3School

<button onclick="myFunction()">Click me</button>

2) using an dojo on click event - Working with events | Guide | ArcGIS API for JavaScript ‌

map.on("click", myClickHandler);

OR some thing like the following.

registry.byId("zoomprev").on("click", function () {
// do what you want here.
});

Re: getting a TypeError

joepublic — Thu, 23 Oct 2014 13:06:33 GMT

I did not explain what I want clearly.

Here is a scenario: I click on the project map button and the country USA is highlighted. I want to click on the USA which will in turn triggers a query of the related table (tableURL)

In my script I have a function (countries()) that executes a queryTask and a map.graphics.add(graphic) that adds the highlighted countries layer.

So next I use either map.on("click", myClickHandler) or dojo.connect(map, "onClick", myClickHandler); with a function myClickHandler(){ query of related table goes here }

My question: How do I tell it which country I clicked on and execute the relatedQuery?

----------------------------------------------------------------------------------------------------------------------------------

Solution to the typeError:

Make sure the order of the items in the require array matches the items in the associated function

require([

"esri/map",

"esri/tasks/query",

"esri/layers/FeatureLayer",

"esri/tasks/QueryTask",

"esri/tasks/RelationshipQuery",

"dojo/domReady!"

], function(Map,Query, FeatureLayer, QueryTask, RelationshipQuery)

Re: getting a TypeError

joepublic — Thu, 23 Oct 2014 13:07:40 GMT

I added an updated script to my original post

Re: getting a TypeError

RobertScheitlin__GISP — Thu, 23 Oct 2014 13:54:39 GMT

Joe,

All you need to do is attach a click event to the maps graphics.

<!DOCTYPE html>
<!-- ADDING A FEATURE LAYER  AND DISPLAYING COUNTRIES-->
<html>
  <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">
      <title>Feature layer part one</title>
      <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
      <script src="http://js.arcgis.com/3.10/"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   
      <style>
      html, body,  #container
      {
        width : 100%;
        height : 100%;
        background-color: #FFF;
      }
      #container, div
      {
        float: left;
        /*border-style:solid;
        border-style:solid;
        border-width:5px;
        border-color:green;*/
      }
   
      #mapDiv
      {
        width:  100%;
        height:  100%;
        width : 75%;
        margin:  0;
        padding: 0;
      }
      #sidecol
      {
        width : 25%;
        height: 100%;
        border-width: 5px;
        border-color:green;
        overflow: scroll;
      }
      </style>
  </head>
  <body class="claro">
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default" id="NSM" value="NSM">News</button>
    <button type="button" class="btn btn-default" id="SDG" value="SDG">SDG Status</button>
    <button type="button" class="btn btn-default" id="CMP" value ="CMP">City Models/Plans</button>
    <button type="button" class="btn btn-default" id="CSM" value ="CSM">Story Maps</button>
    <button type="button" class="btn btn-default" id="EDU" value ="EDU">Educational Games</button>
    <button type="button" class="btn btn-default" id="USR" value ="USR">User Submitted</button>
    <button type="button" class="btn btn-default" id="OPM" value ="OPM">Project Map</button>
    <!-- button type="button" class="btn btn-default">Create a new map</button>
    <button type="button" class="btn btn-default">MDG Status</button -->
  </div>


  <div name="container" id="container">
    <div id="mapDiv"></div>
    <div id="sidecol"> </div>
  </div>

  <script>
    var countries;
    var buttonPicked;
    var buttonType;
    var countryCode = [];
    var whrString = ""
    var map, featureLayer, relatedTable;

    var map, featureLayer, relatedTable;
    var featureURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/0";
    var relatedURL = "http://dev.consciousglobalchange.org/arcgis/rest/services/MEP/webmap_catalog/FeatureServer/1";

        require(["esri/map", "dojo/domReady!"], function(Map)
        {
            map = new Map("mapDiv",
            {
                center: [-5.049, 38.485],
                zoom: 2,
                basemap: "gray"
            });
        });


    function clickType(e) {
      if (!relatedTable)
      {
        // The related table hasn't loaded properly yet. Abort!
        alert("Still waiting to connect to the related table.");
        return;
      }

      // "this" refers to the button that was clicked, since this is function added to onClick.
      // "value" reads the "value" attribute from the button.
      var type = this.value;
      require([ //"esri/tasks/query"
      "esri/map",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "esri/tasks/QueryTask",
      "dojo/on",
      "esri/tasks/RelationshipQuery",
      "dojo/domReady!"
      ], function(Map, Query, FeatureLayer, QueryTask, on, RelationshipQuery)
      {
        var q = new Query();  //Pull UN Country Code
        q.outFields = ["*"];
        q.where = "TYPE = '" + type + "'";
        q.outFields = ["un_country"];

        function countries(uncode)
        {
            //build query task
            alert( 'country codes: ' + uncode);
            var queryTask = new QueryTask(featureURL);
            //build query filter
            var cntryq = new Query();
            cntryq.returnGeometry = true;
            cntryq.outFields = ["*"];
            cntryq.where =    "UN in (" + uncode + ")";

            //Can listen for onComplete event to process results or
            //can use the callback option in the queryTask.execute method.
            dojo.connect(queryTask, "onComplete", function(featureSet)
            {
                map.graphics.clear();
                var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));

                //QueryTask returns a featureSet.  Loop through features
                //in the featureSet and add them to the map.
                var data = featureSet.features;
                console.log(data);

                dojo.forEach(data,function(feature)
                {
                    var graphic = feature;
                    graphic.setSymbol(symbol);
                    map.graphics.add(graphic);
                    map.graphics.on('click', function(evt){
                        console.log(evt.graphic.attributes);
                    });
                });
            });

            queryTask.execute(cntryq);
            whrString = ""
        } //end of Countries

        function cntrycds(allcds)
        {
          //alert(allcds);
          whrString = ""
          for (var i = 0; i < allcds.length; i++)
          {
              //alert(allcds);
              whrString += allcds + ", ";
          }
          whrString = whrString.slice(0, -2); 
          countries(whrString);
          //alert(allcds);
        }

        relatedTable.queryFeatures(q, function(featureSet)
        {
          countryCode = [];
          //console.log(featureSet.features);
          var data = featureSet.features;
          for (i = 0; i < data.length; i++)
          {
            countryCode = data.attributes.un_country;
            //console.log(data.attributes.un_country);
            //alert(countryCode);
          }
          cntrycds(countryCode);
        });
      });  //end of require
    } //end clickType

    require([
      "esri/map",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/tasks/query",
      "esri/tasks/QueryTask",
      "dojo/on",
      "esri/tasks/RelationshipQuery",
      "dojo/domReady!"
      ], function(Map, ArcGISTiledMapServiceLayer, FeatureLayer, Query, QueryTask, on, RelationshipQuery) 
      {
        var table = new FeatureLayer(relatedURL,
        {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
        });

        table.on("load", function (e)
        {
            // The layer is now loaded and is ready to be used for queries etc.
            relatedTable = e.layer;
        });
    }); //end require

    $('#NSM').click(clickType);
    $('#SDG').click(clickType);
    $('#CMP').click(clickType);
    $('#CSM').click(clickType);
    $('#EDU').click(clickType);
    $('#USR').click(clickType);
    $('#OPM').click(clickType);
  </script>
  </body>
</html>

With the click vent on the graphics layer you can get the exact graphic clicked and thus it's attributes that would have the information on which country was clicked.

I did not check the rest of your codes logic.

Re: getting a TypeError

joepublic — Fri, 24 Oct 2014 03:08:24 GMT

Robert,

Thanks for the simple solution to clicking on the country. Now I want to query the related table.

I created a function tableRecords() that is called when you click on a country.

I know that I have to use the objectid to find all the records in the related table. How do I write the query

to find the records and display the results in the side panel div

function tableRecords(evt)

{

console.log(evt.graphic.attributes);

//alert(evt.graphic.attributes.OBJECTID);

var relatedQ = new esri.tasks.RelationshipQuery();

relatedQ.outFields = ["*"];

relatedQ.relationshipId = 0;

relatedQ.objectIds = [evt.graphic.attributes.OBJECTID];

relatedTable.queryRelatedFeatures(relatedQ, function(relatedRecords)

{

var tableObjId = relatedRecords[evt.graphic.attributes.OBJECTID];

console.log(tableObjId);

});

} //end tableRecords

see attached