nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Switch statement JS

AlexGole1

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?

Find more posts tagged with

Accepted answers

OwenEarley

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

All comments

AlexGole1

you can access my app publicly here:

http://testegis.fire.ca.gov/its/alexapps/clipandship/index.html

AlexGole1

Since your app is an internal application, it's really hard for us on the outside to troubleshoot what you're seeing. Your description makes me think there's a "cart in front of the horse" situation whereby part of your code is trying to use an object before it's returned from a query. In other words, "e" might be null because the code is accessing it before it gets populated. I've been tripped up by this type of situation before and it's frustrating to remedy.

I tried pulling out your dependencies on the code and from what limited things I can do, I'm not experiencing an error like you posted. Line 205 also doesn't seem to make sense in the code I have in front of me. Where is that? Is that in the addGraphic function we just added a post or two ago?

You are right since it's not a public app it must be had to see what is going on. I attached my app with only the latest code and what I think is necessary for it to make it run. Some images might be missing. The only thing you wont have access to are the GP tool but you can use the sample GP tool here from this code, it does the same thing as mine:

https://developers.arcgis.com/javascript/jssamples/gp_clipasync.html

And you wont be able to access my two data layers unit and counties

I think the error message is referring to an error that occured in the ESRI API 3.9. Maybe because of the misuse of the API in my code.

Thank you for all the time spent on this. I really appreciate. I am learning a lot thanks to you and the other guys who helped me.
Alex

Clipandship - Copy (3).zip

evtguy

Since your app is an internal application, it's really hard for us on the outside to troubleshoot what you're seeing. Your description makes me think there's a "cart in front of the horse" situation whereby part of your code is trying to use an object before it's returned from a query. In other words, "e" might be null because the code is accessing it before it gets populated. I've been tripped up by this type of situation before and it's frustrating to remedy.

I tried pulling out your dependencies on the code and from what limited things I can do, I'm not experiencing an error like you posted. Line 205 also doesn't seem to make sense in the code I have in front of me. Where is that? Is that in the addGraphic function we just added a post or two ago?

AlexGole1

Does it give you a line number when it errors? It looks like you only have one instance of an "e" variable in the "draw-complete" event handler.

A type error is an error that happens when the variable has a value that is different than what should normally be present. For example, you buy a product with assembly instructions but it only comes with instructions in Spanish. Code specific examples are passing a numeric value when something expects text, a function expects a polyline as input and you pass it a point, etc.

In this case, e should have some sort of value but for whatever reason, it is null (or empty).

First things first- make a backup of your project / HTML file before proceeding. You've gotten to a certain point so if things get screwed up, you want a recent spot to start again.

Back up? Good. Here's something to try: let's tweak your initSelectionToolbar function. First, modify the function like this:
         function initSelectionToolbar() {
            map.graphics.clear();

            selectionToolbar = new Draw(map);
            selectionToolbar.on("draw-end", addGraphic);
         }
Next, add a NEW function to your project named addGraphic:
function addGraphic(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";
            }
Most ESRI samples tend to shy away from using inline functions within event handlers and usually make a call to some other function within the project. I'm wondering if that's the issue here...

Steve

Thanks Steve! I tried your solution but I get the same error

TypeError: e is null       /3.9/(line205)

and then here is the NOT clear at all description of the error:

.cache["dojo/dom-style"]/</l.set@http://js.arcgis.com/3.9/:136http://127.0.0.1/Clipandship/Sample14.html:344 .cache["esri/tasks/Task"]/</d<._successHandler@http://js.arcgis.com/3.9/:500 .cache["esri/tasks/QueryTask"]/</d<._handler@http://js.arcgis.com/3.9/:1391http://js.arcgis.com/3.9/:174 .cache["esri/tasks/QueryTask"]/</d<.execute/<.load@http://js.arcgis.com/3.9/:1387http://js.arcgis.com/3.9/:640 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75http://js.arcgis.com/3.9/:636 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:75 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:75 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75http://js.arcgis.com/3.9/:191 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 .cache["dojo/Deferred"]/</a@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 .cache["dojo/Deferred"]/</a@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 .cache["dojo/Deferred"]/</a@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 m@http://js.arcgis.com/3.9/:157 f@http://js.arcgis.com/3.9/:160

The query returns fine, the geometry returns fine as showed here:

{"displayFieldName":"NAME_PCASE","fieldAliases":{"NAME_PCASE":"NAME_PCASE"},"geometryType":"esriGeometryPolygon","spatialReference":{"wkid":102100,"latestWkid":3857},"fields":[{"name":"NAME_PCASE","type":"esriFieldTypeString","alias":"NAME_PCASE","length":40}],"features":[{"attributes":{"NAME_PCASE":"Amador"},"geometry":{"rings":[[[-13366405.54622118,4679183.5292336093],[-13366408.500613371,4676607.93449526],[-13366401.718231125,4673895.8587084692],[-13366403.702313054,4668085.3689144133],[-13366396.034404758,4668085.1344282823],[-13366400.831451345,4665497.5970672229],[-13366401.861406215,4661304.9277501674],[-13366410.580302747,4657338.6184302801],[-13366410.664397134,4652914.6460015653],[-13366412.591153229,4651707.281880768],[-13366441.5974274,4651698.5911074057],[-13366453.152847191,4651701.5166428825],[-13366466.655153036,4651692.9827292729],[-13366546.901805598,4651688.4913324062],[-13366570.057272101,4651682.8291643728],[-13366592.301112154,4651673.2883800501],[-13366608.708902633,4651671.2459100373],[-13366635.832216404,4651658.6566127045],[-13366667.727691818,4651649.4280354334],[-13366728.556206429,4651640.4763607373],[-13366745.938966284,4651641.0274053961],[-13366800.085875837,4651619.0479039568],[-13366819.4339015,4651615.1830413081],[-13366895.760241358,4651583.0119334171],[-13366925.670265833,4651573.0793578112],[-13366951.790278206,4651566.864210465],[-13366972.067358896,4651559.1690005772]

in IE11 I get this error:

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

I am not sure...

evtguy

Does it give you a line number when it errors? It looks like you only have one instance of an "e" variable in the "draw-complete" event handler.

A type error is an error that happens when the variable has a value that is different than what should normally be present. For example, you buy a product with assembly instructions but it only comes with instructions in Spanish. Code specific examples are passing a numeric value when something expects text, a function expects a polyline as input and you pass it a point, etc.

In this case, e should have some sort of value but for whatever reason, it is null (or empty).

First things first- make a backup of your project / HTML file before proceeding. You've gotten to a certain point so if things get screwed up, you want a recent spot to start again.

Back up? Good. Here's something to try: let's tweak your initSelectionToolbar function. First, modify the function like this:

         function initSelectionToolbar() {
            map.graphics.clear();

            selectionToolbar = new Draw(map);
            selectionToolbar.on("draw-end", addGraphic);
         }

Next, add a NEW function to your project named addGraphic:

function addGraphic(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";
            }

Most ESRI samples tend to shy away from using inline functions within event handlers and usually make a call to some other function within the project. I'm wondering if that's the issue here...

Steve

AlexGole1

Everything works like it is supposed to be. I applied Owen's edits above which seems like it is the way to go.
However I cannot get rid of this error:

TypeError: e is null

As you can see on the image the query works fine, the value is fed to the feature set correctly but it still retuns an error saying "e is null"

[ATTACH=CONFIG]34316[/ATTACH]

Here is my latest and greatest jsbin example.

Capture.PNG

AlexGole1

UI Events = User Interface events. What we're saying is that the value for the variable extractMethod should only be set as a result of an action taken by a user using your web app. The value should only be set/modified if the user

a.) draws a polygon,
b.) selects a county from the county combo box list, or
c.) selects a unit from the unit combo box list.

All three of these actions are basically UI events.

Owen states "declare this variable once" and that's what I was suggesting my moving it way up in your code to the very top, before the Require() stuff. Provided you have incorporated what Owen last posted in his jsbin example, you should   DELETE the following lines that were in your original code posted:
var extractMethod = "extractByPoly";
var extractMethod = "extractByCounty";
var extractMethod = "extractByUnit";
Remember earlier in this thread when I posted this code snippet?
      var gp, map, toc, dynaLayer1, query, queryTask;
      var symbol, infoTemplate, extractMethod;
   var AOI, graphic, clipFeatureSet, clipFeature;
The variable is declared as global and ready to use (you don't necessarily need to assign a value to declare a variable).

Hope this clears up some of the confusion!

Steve

Thanks Steve that clears it up! These terms are much clearer to me now!

Now, thanks to you, Owen and Jeff I have a functioning listener and the default case works like a charm. The switch case seems to overwrite the global variable value like should too! However I am still getting a null value error in my console.log

TypeError {stack: "TypeError: Cannot read property 'style' of nullâ?µ  â?¦allback (http://js.arcgis.com/3.9/init.js:75:350)", message: "Cannot read property 'style' of null"}
message: "Cannot read property 'style' of null"
stack: "TypeError: Cannot read property 'style' of nullâ?µ    at Object.l.set (http://js.arcgis.com/3.9/init.js:136:409)â?µ    at http://127.0.0.1/Clipandship/Sample13.html:339:25â?µ    at d._successHandler (http://js.arcgis.com/3.9/init.js:500:240)â?µ    at d._handler (http://js.arcgis.com/3.9/init.js:1391:359)â?µ    at http://js.arcgis.com/3.9/init.js:174:23â?µ    at Object.c.load (http://js.arcgis.com/3.9/init.js:1387:350)â?µ    at http://js.arcgis.com/3.9/init.js:640:344â?µ    at c (http://js.arcgis.com/3.9/init.js:74:221)â?µ    at d (http://js.arcgis.com/3.9/init.js:74:10)â?µ    at resolve.callback (http://js.arcgis.com/3.9/init.js:75:350)"
__proto__: Error
 "TypeError: Cannot read property 'style' of null
    at Object.l.set (http://js.arcgis.com/3.9/init.js:136:409)
    at http://127.0.0.1/Clipandship/Sample13.html:339:25
    at d._successHandler (http://js.arcgis.com/3.9/init.js:500:240)
    at d._handler (http://js.arcgis.com/3.9/init.js:1391:359)
    at http://js.arcgis.com/3.9/init.js:174:23
    at Object.c.load (http://js.arcgis.com/3.9/init.js:1387:350)
    at http://js.arcgis.com/3.9/init.js:640:344
    at c (http://js.arcgis.com/3.9/init.js:74:221)
    at d (http://js.arcgis.com/3.9/init.js:74:10)
    at resolve.callback (http://js.arcgis.com/3.9/init.js:75:350)"

I don't understand why since the listener works fine and it seems like there is a selection made...

evtguy

UI Events = User Interface events. What we're saying is that the value for the variable extractMethod should only be set as a result of an action taken by a user using your web app. The value should only be set/modified if the user

a.) draws a polygon,
b.) selects a county from the county combo box list, or
c.) selects a unit from the unit combo box list.

All three of these actions are basically UI events.

Owen states "declare this variable once" and that's what I was suggesting my moving it way up in your code to the very top, before the Require() stuff. Provided you have incorporated what Owen last posted in his jsbin example, you should DELETE the following lines that were in your original code posted:

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

Remember earlier in this thread when I posted this code snippet?

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

The variable is declared as global and ready to use (you don't necessarily need to assign a value to declare a variable).

Hope this clears up some of the confusion!

Steve

AlexGole1

@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

Steve or Owen, can you explain this portion of Owen's answer please:

[HTML]Also, you are declaring the extractMethod variable 3 times. This is effectively overwriting the same variable each time.
Code:
var extractMethod = "extractByPoly";
var extractMethod = "extractByCounty";
var extractMethod = "extractByUnit";
Declare this variable once and then change the value via UI events.

Owen[/HTML]

Should I have just one variable then? Also when Owen said "change the value via UI events." As a newbie in JS what is a UI events? As I understand it, it is a button, drop down menu or something like it that I add to the user interface? If I understood correctly. The user wont be able to change "methods" seemlessly and will have select manually from a UI event like a button, drop down? If any of you could clarify that would be a huge help. Thank you for all your help! Alex

evtguy

@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

OwenEarley

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.

AlexGole1

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.

AlexGole1

Error I get after spinning a bit


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

AlexGole1

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

evtguy

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]

AlexGole1

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

Capture.jpg

evtguy

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!");
         });

AlexGole1

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!");
         });

No errors this time but the listener is still no firing up. I dont get "You are selecting a unit!"

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!");
         });

   
  
   function initSelectionToolbar() {
            map.graphics.clear();

            selectionToolbar = new Draw(map);
            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";
            });
         }

         function activateTool(tool) {
            map.graphics.clear();
            // The draw.activate expects a string like "polygon" or "freehand_polygon".
            selectionToolbar.activate(tool);
         }
  
   
   
   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;

evtguy

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!");
         });

AlexGole1

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

evtguy

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!");
         });

AlexGole1

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.

Alright I tried but nothing happens. The console shows no statements like :"You are selecting a unit!" I tried both, change and onChange methods.

Here is my code

   registry.byId("stop").on("click", function () {
   map.graphics.clear();
            selectionToolbar.deactivate();
          });
  
  registry.byId("polygon").on("click", function () {
            activateTool(this.id);
         });

        registry.byId("freehandpolygon").on("click", function () {
            activateTool(this.id);
         });
   
   registry.byId("extract").on("click", myFunction);
   
   
   registry.byId("sel_county").on("onChange", function () {
            extractMethod = "extractByCounty";
            console.log("You are selecting a county!");
         });

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

   
  
   function initSelectionToolbar() {
            map.graphics.clear();

            selectionToolbar = new Draw(map);
            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";
            });
         }

         function activateTool(tool) {
            map.graphics.clear();
            // The draw.activate expects a string like "polygon" or "freehand_polygon".
            selectionToolbar.activate(tool);
         }
  
   
   
   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 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 = '" + 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 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 = '" + 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;
    
 }
}

evtguy

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.

AlexGole1

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;

AlexGole1

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

Ah. so I remove the following code before the query?

var unit = document.getElementById("sel_unit").value

and replace it (outside of the switch statement) by

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

I did not know anything about this listenner. Thank you for your help!

evtguy

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

AlexGole1

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

First of all, I would like to thank you Owen for your help and insight. Thanks to you I feel I made some progress. Also your web site looks great! I will it around to the CalFire team.

Now here is the error I get:

TypeError: e is null
 

The resource from this URL is not text: http://js.arcgis.com/3.9/

.cache["dojo/dom-style"]/</l.set@http://js.arcgis.com/3.9/:136http://127.0.0.1/Clipandship/Sample9.html:347 .cache["esri/tasks/Task"]/</d<._successHandler@http://js.arcgis.com/3.9/:500 .cache["esri/tasks/QueryTask"]/</d<._handler@http://js.arcgis.com/3.9/:1391http://js.arcgis.com/3.9/:174 .cache["esri/tasks/QueryTask"]/</d<.execute/<.load@http://js.arcgis.com/3.9/:1387http://js.arcgis.com/3.9/:640 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75http://js.arcgis.com/3.9/:636 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:75 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:75 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75 c@http://js.arcgis.com/3.9/:74 d@http://js.arcgis.com/3.9/:74 .cache["dojo/_base/Deferred"]/</b.Deferred/this.callback@http://js.arcgis.com/3.9/:75http://js.arcgis.com/3.9/:191 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 .cache["dojo/Deferred"]/</a@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 .cache["dojo/Deferred"]/</a@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 .cache["dojo/Deferred"]/</a@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</k@http://js.arcgis.com/3.9/:196 .cache["dojo/Deferred"]/</r@http://js.arcgis.com/3.9/:195 .cache["dojo/Deferred"]/</f/this.resolve@http://js.arcgis.com/3.9/:197 m@http://js.arcgis.com/3.9/:157 f@http://js.arcgis.com/3.9/:160

Whatever "extraction methods" I select turns out to be null. I cannot explain why.

[HTML]Declare this variable once and then change the value via UI events.[/HTML]

Also, I still have a global variable called three time that can be overwritten because I do not see any other ways to allow the users to choose any of the three methods seamlessly (without having to deal with UI events such as check boxes or drop down combobox to select each method independently).

My overall goal is to have an app that allows users to extract data in three different ways with only one button they have to click to download/extract the data and a tool bar that approximately like on the picture attached.

[ATTACH=CONFIG]34136[/ATTACH][ATTACH=CONFIG]34137[/ATTACH]

Also is it possible to call a function locate outside of the switch loop after a querytask.on as written below?

queryTask.on("complete", addToMap)

PS: Here is my code http://jsbin.com/tifuw/1/edit

The only thing extra that I did not remove is the TOC.js

button.PNG

Toolbar.PNG

OwenEarley

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

AlexGole1

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

JeffPace1

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?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.