topic Re: Switch statement JS in ArcGIS JavaScript Maps SDK Questions

Switch statement JS

AlexGole1 — Tue, 27 May 2014 17:34:16 GMT

Hi all,
I am trying to create a GIS data portal that allows users to select one out three diffent methods for data extraction.
1) extract by graphic extent
2) extract by extent of a county
3) extract by unit (calfire)

Here is my problem. I am using a switch statement that allow the users to select either one of these methods independently as shown on this thread.

However, when I trigger the either one of the cases within my function by pushing on a download button. It seems like the GPtool cant access any input data for some reasons.

errors I get for each of the functions described above :

TypeError: Unable to get property 'geometry' of undefined or null reference  TypeError: Unable to get property 'style' of undefined or null reference  TypeError: Unable to get property 'style' of undefined or null reference

My code:

var extractMethod = "extractByPoly";    var extractMethod = "extractByCounty";    var extractMethod = "extractByUnit";        function myFunction() {     //var extractMethod = "extractByPoly";     //var extractMethod = "extractByCounty";     //var extractMethod = "extractByUnit";      switch (extractMethod) {         default:              //function extractData() {             //get clip layers             var clipLayers = [];             if (registry.byId("layer1").get("checked")) {                 clipLayers.push("SRA");             }             if (registry.byId("layer2").get("checked")) {                 clipLayers.push("Burn");             }             if (clipLayers.length === 0 || map.graphics.graphics.length === 0) {                 alert("Select layers to extract and draw an area of interest.");                 return;             }              var featureSet = new FeatureSet();             var features = [];             features.push(map.graphics.graphics[0]);             featureSet.features = features;              var params3 = {                 "Layers_to_Clip": clipLayers,                 "Area_of_Interest": featureSet,                 "Feature_Format": registry.byId("formatBox").get("value")             };              domStyle.set(loading2, "display", "inline-block");             gp.submitJob(params3, completeCallback, statusCallback2, function (error) {                 alert(error);                 domStyle.set(loading2, "display", "none");             });             //}             break;          case "extractByCounty":             //function executeQueryTask(county) {             var clipLayers = [];             if (registry.byId("layer1").get("checked")) {                 clipLayers.push("SRA");             }             if (registry.byId("layer2").get("checked")) {                 clipLayers.push("Burn");             }             if (clipLayers.length === 0) {                 alert("No layers to clip, please select a layer you would like to clip...");                 return;             }              var county = document.getElementById("sel_county").value             var unit = document.getElementById("sel_unit").value             var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Counties/MapServer/0");                                       var query = new Query();             query.returnGeometry = true;             query.outFields = ["NAME_PCASE"];             query.where = "NAME_PCASE = '" + county + "'";             query.outSpatialReference = map.spatialReference;             queryTask.execute(query, function (featureSet) {                 var AOI = featureSet.features[0].geometry;                 var graphic = new Graphic(AOI);                 var features = [];                 features.push(graphic);                 var fSet = new FeatureSet();                 fSet.features = features;                   var params = {                     "Layers_to_Clip": clipLayers,                     "Area_of_Interest": fSet,                     "Feature_Format": registry.byId("formatBox").get("value")                 };                    domStyle.set(loading, "display", "inline-block");                 gp.submitJob(params, completeCallback, statusCallback, function (error) {                     alert(error);                     domStyle.set(loading, "display", "none");                 });             });             //}             break;           case "extractByUnit":             //function executeQueryTask1(unit) {             var clipLayers = [];             if (registry.byId("layer1").get("checked")) {                 clipLayers.push("SRA");             }             if (registry.byId("layer2").get("checked")) {                 clipLayers.push("Burn");             }             if (clipLayers.length === 0) {                 alert("No layers to clip, please select a layer you would like to clip...");                 return;             }              var unit = document.getElementById("sel_unit").value             var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Layers/MapServer/1");                          var query = new Query();             query.returnGeometry = true;             query.outFields = ["UNITCODE"];             query.where = "UNITCODE = '" + unit + "'";             query.outSpatialReference = map.spatialReference;             queryTask.execute(query, function (featureSet) {                 var AOI = featureSet.features[0].geometry;                 var graphic = new Graphic(AOI);                 var features = [];                 features.push(graphic);                 var fSet = new FeatureSet();                 fSet.features = features;                   var params2 = {                     "Layers_to_Clip": clipLayers,                     "Area_of_Interest": fSet,                     "Feature_Format": registry.byId("formatBox").get("value")                 };                    domStyle.set(loading1, "display", "inline-block");                 gp.submitJob(params2, completeCallback, statusCallback1, function (error) {                     alert(error);                     domStyle.set(loading1, "display", "none");                 });             });             //}     } }

Any idea why I get these errors?

Re: Switch statement JS

JeffPace — Tue, 27 May 2014 17:39:12 GMT

more than likely its a scope issue, but without seeing how you call "myfunction" its hard to tell

Re: Switch statement JS

AlexGole1 — Sun, 12 Dec 2021 04:32:18 GMT

more than likely its a scope issue, but without seeing how you call "myfunction" its hard to tell

CSS:

<button id="extract" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'DownIcon', showLabel:false">
            Extract Data
            </button>

JS:

registry.byId("extract").on("click", myFunction);

Re: Switch statement JS

JeffPace — Tue, 27 May 2014 18:53:45 GMT

ok well since its getting into the myFunction, you are calling it correctly

however it looks like the extractMethod variable is null in the function, is this a global variable?

Re: Switch statement JS

AlexGole1 — Tue, 27 May 2014 19:00:35 GMT

ok well since its getting into the myFunction, you are calling it correctly

however it looks like the extractMethod variable is null in the function, is this a global variable?

Yes, extractMethod is a global variable as suggested by Steve Cole in the precedent thread.
http://forums.arcgis.com/threads/110370-One-button-to-independently-trigger-functions-of-users-choice?p=390586#post390586

Re: Switch statement JS

OwenEarley — Sun, 12 Dec 2021 04:32:20 GMT

In your code it appears that the only places that could cause the following error message:

TypeError: Unable to get property 'geometry' of undefined or null reference

Is when you attempt to read the geometry property of the first feature in a query task result set:

var AOI = featureSet.features[0].geometry;  // Possible problem here if there are no features

Try checking that you have a result before attempting to access the geometry:

queryTask.execute(query, function (featureSet) {
    if (featureSet.features.length === 0) {
        alert("Query task did not return any features");
        return;
    } else {
        var AOI = featureSet.features[0].geometry; 
        var graphic = new Graphic(AOI);
        etc�?�
    }
});

Without being able to test the code I am guessing that the two style property errors may be related to the first issue - as the API may be attempting to render a null geometry.

Also, you are declaring the extractMethod variable 3 times. This is effectively overwriting the same variable each time.

var extractMethod = "extractByPoly";
var extractMethod = "extractByCounty";
var extractMethod = "extractByUnit";

Declare this variable once and then change the value via UI events.

Owen
www.spatialxp.com.au

Re: Switch statement JS

SteveCole — Sun, 12 Dec 2021 16:46:23 GMT

Alex-

Now that I see your code in the JSBin, I'm hoping I can clear up the confusion about my initial approach about using the Switch statement.

First, the initial variable declaration for extractMethod should be moved way up in your code. Add it to your series of global variables immediately before your Require() line:

      var gp, map, toc, dynaLayer1, query, queryTask;
      var symbol, infoTemplate, extractMethod;
   var AOI, graphic, clipFeatureSet, clipFeature;

Once you move it, delete those three lines that you currently have.

Next, modify your selectionToolbar "draw-end" function like this:

            selectionToolbar.on("draw-end", function (e) {
               selectionToolbar.deactivate();

               var symbol3 = new SimpleFillSymbol(
                  "solid",
                  new SimpleLineSymbol("dash", new Color([255, 0, 0]), 2),
                  new Color([255, 255, 0, 0.25])
               );

               var graphic = new Graphic(e.geometry, symbol3);
               map.graphics.add(graphic);
               extractMethod = "extractByPoly";
            });

From what I can tell, you are missing event listeners for your two combo boxes (County and Unit) so you need to create them:

        registry.byId("sel_county").on("change", function () {
            extractMethod = "extractByCounty";
         });

        registry.byId("sel_unit").on("change", function () {
            extractMethod = "extractByUnit";
         });

I think this will finally set values for extractMethod such that the switch statement will then do what it's supposed to do.

Steve

Re: Switch statement JS

AlexGole1 — Sun, 12 Dec 2021 04:32:29 GMT

My extract by graphic works like a charm! However the it does not seem like it selects anything in the combobox still

var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Layers/MapServer/1");
            var query = new Query();
            query.returnGeometry = true;
            query.outFields = ["UNITCODE"];
            query.where = "UNITCODE = '" + extractMethod + "'";
            query.outSpatialReference = map.spatialReference;
            queryTask.execute(query, function (featureSet) {
                 if (featureSet.features.length === 0) {
                     alert("Query task did not return any features");
                 return;
                } else {
    var AOI = featureSet.features[0].geometry;
                var graphic = new Graphic(AOI, symbol);
                var features = [];
                features.push(graphic);
                var fSet = new FeatureSet();
                fSet.features = features;


                var params2 = {
                    "Layers_to_Clip": clipLayers,
                    "Area_of_Interest": fSet,
                    "Feature_Format": registry.byId("formatBox").get("value")
                };



                domStyle.set(loading1, "display", "inline-block");
                gp.submitJob(params2, completeCallback, statusCallback1, function (error) {
                    alert(error);
                    domStyle.set(loading1, "display", "none");
                });
    }
            });
            //}
   break;

Re: Switch statement JS

SteveCole — Sun, 12 Dec 2021 04:32:31 GMT

Ah. so I remove the following code before the query?
var unit = document.getElementById("sel_unit").value

No- leave that. Otherwise, you won't know what Unit the user has selected. The code I posted for the listener is ONLY for keeping track of what the user does (they drew a polygon so extract by polygon, they selected a unit from the combo box so extract by unit, etc). Hopefully you see that the variable extractMethod is constantly populated and overwritten every time the user does one of those three things- draw a shape, select an item in the County combo box, or select a Unit in the Unit combo box.

In theory, the Extract button (and the switch statement) will look at what the most recent value for extractMethod is. You could do all three options and if you last drew a polygon, that's what the switch statement should act on.

Your follow up post makes me wonder if the change event is "change" or "onChange". Here's a simple test to see whether or not the listener is properly set up. Add the following line of code inside the function:

        registry.byId("sel_county").on("change", function () {
            extractMethod = "extractByCounty";
            console.log("You are selecting a county!");
         });

        registry.byId("sel_unit").on("change", function () {
            extractMethod = "extractByUnit";
            console.log("You are selecting a unit!");
         });

Watch the console when you pick an item from either combo box. You should see the statement show up once you select an item. If it's not, then there's something off with my event code, either I have the wrong event name or something else. Try this and post what you observe.

Re: Switch statement JS

SteveCole — Sun, 12 Dec 2021 16:46:26 GMT

Ok, that's helpful. The event listener I gave you isn't firing. Alter the code slightly as shown below:

        dom.byId("sel_county").on("change", function () {
            extractMethod = "extractByCounty";
            console.log("You are selecting a county!");
         });

        dom.byId("sel_unit").on("change", function () {
            extractMethod = "extractByUnit";
            console.log("You are selecting a unit!");
         });

Re: Switch statement JS

AlexGole1 — Sun, 12 Dec 2021 04:32:37 GMT

Ok, that's helpful. The event listener I gave you isn't firing. Alter the code slightly as shown below:

        dom.byId("sel_county").on("change", function () {
            extractMethod = "extractByCounty";
            console.log("You are selecting a county!");
         });

        dom.byId("sel_unit").on("change", function () {
            extractMethod = "extractByUnit";
            console.log("You are selecting a unit!");
         });

Sorry to keep posting Steve. Now I get the following error:

TypeError: dom.byId(...).on is not a function

Re: Switch statement JS

SteveCole — Sun, 12 Dec 2021 04:32:39 GMT

No worries. Let's try this instead:

        on(dom.byId("sel_county"), "change", function () {
            extractMethod = "extractByCounty";
            console.log("You are selecting a county!");
         });

        on(dom.byId("sel_unit"), "change", function () {
            extractMethod = "extractByUnit";
            console.log("You are selecting a unit!");
         });

Re: Switch statement JS

SteveCole — Sun, 12 Dec 2021 16:46:28 GMT

Ok, I *think* this is it. 😄

Substitute onChange for Change:

        on(dom.byId("sel_county"), "onChange", function () {
            extractMethod = "extractByCounty";
            console.log("You are selecting a county!");
         });

        on(dom.byId("sel_unit"), "onChange", function () {
            extractMethod = "extractByUnit";
            console.log("You are selecting a unit!");
         });

Re: Switch statement JS

AlexGole1 — Sun, 12 Dec 2021 04:32:45 GMT

Ok, I *think* this is it. 😄

Substitute onChange for Change:

        on(dom.byId("sel_county"), "onChange", function () {
            extractMethod = "extractByCounty";
            console.log("You are selecting a county!");
         });

        on(dom.byId("sel_unit"), "onChange", function () {
            extractMethod = "extractByUnit";
            console.log("You are selecting a unit!");
         });

🙂 well I cant start the app anymore Here is what I get.[ATTACH=CONFIG]34145[/ATTACH]

Maybe the combobox should be created in JS not html like this http://jsfiddle.net/phusick/Hp5jr/ ?? It seems like the script works fine in ie11 not Mozilla, but the listener still does not fire up for some reasons

Re: Switch statement JS

SteveCole — Wed, 28 May 2014 21:25:30 GMT

Can you refresh the code in your jsbin link with what you now have?

I don't think that having the combo boxes created on the HTML side instead of the JS side should matter. Something else must be going on.

This is probably a non-factor but I would change your opening <style> HTML tag at the top to this:
[HTML]<style type="text/css">[/HTML]

Re: Switch statement JS

AlexGole1 — Wed, 28 May 2014 21:29:47 GMT

Can you refresh the code in your jsbin link with what you now have?

I don't think that having the combo boxes created on the HTML side instead of the JS side should matter. Something else must be going on.

This is probably a non-factor but I would change your opening <style> HTML tag at the top to this:
[HTML]<style type="text/css">[/HTML]

http://jsbin.com/tifuw/2/edit

I have my stylesheet on a seperate stylesheet on my computer

Re: Switch statement JS

AlexGole1 — Sun, 12 Dec 2021 04:32:48 GMT

Error I get after spinning a bit


"Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null"

Re: Switch statement JS

AlexGole1 — Sun, 12 Dec 2021 04:32:50 GMT

Error I get after spinning a bit


"Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null"

Steve,
Jeff Pace figured out that the listener would work this way:

on(registry.byId("sel_unit"), "Change", function () {
            extractMethod = "extractByUnit";
            console.log("You are selecting a unit!");
         });

Now It still does not transmit the value to the query in the switch statement.

Re: Switch statement JS

OwenEarley — Mon, 02 Jun 2014 23:24:06 GMT

I created a cut-down version of your code here: http://jsbin.com/dimifaju

Try running this in Chrome with the developer tools open - showing the console output.

From what I can see the toolbar events are all working and your extractMethod variable is being updated.

Also, clicking on the Extract Data button calls myFunction and the extractMethod variable is available.

In switch statements I put the default as the last option. For these type of switching functions I also
normally place the actual code for a task in their own functions. This makes it easier to read and simplifies testing as you can pass test values directly into the functions.

function myFunction() {  console.log("Extract using method:", extractMethod);  switch (extractMethod) {     case "extractByCounty":    console.log("Switch result is: extractByCounty");    var county = document.getElementById("sel_county").value;    extractByCounty(county);    break;   case "extractByUnit":    console.log("Switch result is: extractByUnit");    var unit = document.getElementById("sel_unit").value;    extractByUnit(unit);    break;   default:    console.log("Switch result (default) is: ", extractMethod);         extractByPolygon();    break;  } }  function extractByPolygon(){  console.log("Run extractByPolygon code");   // code to extract by polygon }  function extractByUnit(unit){  console.log("Run extractByUnit code:", unit);  // code to extract by unit }  function extractByCounty(county){  console.log("Run extractByCounty code:", county);  // code to extract by county }

Now It still does not transmit the value to the query in the switch statement.

Not sure why this is - try a console.log (see code above) as the first line to see if it is being called. The jsbin version (http://jsbin.com/dimifaju) is working as expected in this regard.

Owen
www.spatialxp.com.au

Re: Switch statement JS

SteveCole — Tue, 03 Jun 2014 01:16:18 GMT

@Alex- I'm glad Jeff's fresh eyes was able to figure out what I was missing.

@Owen- what you posted looks like it's doing what I was originally suggesting. I think you've got the right solution.

Steve