Definition Query on Zoom To/Tab click

[TylerDunn2]

So been chipping away at an app I'm building for some coworkers. I've attached some images to show what it looks like. On the left is a panel with 4 tabs (Alphabetical, By Engineer, By Planner, By Ward). Inside these tabs are another set of tabs to show the different options (Example: By Ward has Ward 1 tab, Ward 2 tab, Ward 3 Tab and Ward 4 tab). Each tab has a list of projects in that area, and when clicking the top tab it zooms to that area. Here's where I need a hand:

I'm trying to make it so when it zooms to that tab (ex. Ward 1), it definition queries out Ward 1 projects and only shows them on the map. I'm trying to build this so employees can print their own maps with our layouts, so it'd be beneficial if the map only shows the data they've clicked the tab of. 

Attached is the Wards example and some screen shots. Any help or suggestions would be awesome.

define([
'dojo/_base/declare',
'dijit/_WidgetsInTemplateMixin',
'jimu/BaseWidget',
'esri/symbols/SimpleFillSymbol',
'esri/Color',
'esri/tasks/query',
'dojo/on',
'esri/layers/FeatureLayer',
"dgrid/OnDemandGrid",
"dgrid/Selection",
'dijit/layout/TabContainer',
'dijit/layout/ContentPane',
"dojo/_base/array",
'dojo/store/Memory',
'dojo/_base/lang',
"esri/graphicsUtils",
"esri/tasks/GeometryService",
"esri/tasks/ProjectParameters",
'dijit/form/Button'
],
function (
declare,
_WidgetsInTemplateMixin,
BaseWidget,
SimpleFillSymbol,
Color,
Query,
on,
FeatureLayer,
Grid,
Selection,
TabContainer,
ContentPane,
array,
Memory,
lang,
graphicsUtils,
GeometryService,
ProjectParameters
) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget, _WidgetsInTemplateMixin], {

baseClass: 'jimu-widget-datagrid',
name: 'DataGrid',
label: 'Data Grid',
columns: null,
devProjectsLayer: null,

//methods to communication with app container:

postCreate: function () {
this.inherited(arguments);
console.log('postCreate');
},

startup: function () {
this.inherited(arguments);
var geomSvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

//Tab 1

// Map Feature Layer
this.devProjectsLayer = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", {
id: "devProjectsLayer",
mode: FeatureLayer.MODE_ONDEMAND,
opacity: .5,
outFields: ["*"]
});
this.devProjectsLayer.setDefinitionExpression("WARD = '1' AND STATUS LIKE 'ACTIVE' OR WARD = '1' AND STATUS LIKE 'APPROVED' OR WARD = '1' AND STATUS LIKE 'PROPOSED'");
this.map.addLayer(this.devProjectsLayer);

// Data Grid 1
this.columns = [{
label: "Zoom",
field: "OBJECTID",
formatter: this.createZoomButton
}, {
label: "Project Name",
field: "NAME"
}];

// Define selection graphic
var highlightSymbol = new SimpleFillSymbol().setColor(new Color([50, 205, 50, 0.25]));
this.devProjectsLayer.setSelectionSymbol(highlightSymbol);

this.devProjectsLayer.on("load", lang.hitch(this, function(evt) {
var query = new Query();
query.where = "WARD = '1' AND STATUS LIKE 'ACTIVE' OR WARD = '1' AND STATUS LIKE 'APPROVED' OR WARD = '1' AND STATUS LIKE 'PROPOSED'";
evt.layer.queryFeatures(query, lang.hitch(this, function(featureSet) {
var myFeatureExtent = graphicsUtils.graphicsExtent(featureSet.features);
var items = array.map(featureSet.features, function(feature) {
return feature.attributes;
});

//idProperty must be set manually if value is something other than 'id'
var memStore = new Memory({
data: items,
idProperty: "OBJECTID"
});

var projectDataGrid = declare([Grid, Selection]);
this.grid = new projectDataGrid({
bufferRows: Infinity,
minRowsPerPage: "1000",
columns: this.columns
}, this.gridDiv);
this.grid.startup();
this.grid.set("store", memStore);
this.grid.set("sort", "NAME");

var tc = new TabContainer({
style: "height: 100%; width: 100%;"
}, this.customContentNode);

tc.watch("selectedChildWidget", lang.hitch(this, function(name, oval, nval){
if(nval.extent !== this.map.spatialReference){
var params = new ProjectParameters();
params.outSR = this.map.spatialReference;
params.geometries = [nval.extent];
geomSvc.project(params, lang.hitch(this, function(geoms){
this.map.setExtent(geoms[0], true);
}));
}else{
this.map.setExtent(nval.extent, true);
}
}));

var cp1 = new ContentPane({
title: "Ward 1",
content: this.grid,
selected: true
});
cp1.extent = myFeatureExtent;

tc.addChild(cp1);

//Tab 2
this.devProjectsLayer2 = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", {
id: "devProjectsLayer2",
mode: FeatureLayer.MODE_ONDEMAND,
opacity: .5,
outFields: ["*"]
});
this.devProjectsLayer2.setDefinitionExpression("WARD = '2' AND STATUS LIKE 'ACTIVE' OR WARD = '2' AND STATUS LIKE 'APPROVED' OR WARD = '2' AND STATUS LIKE 'PROPOSED'");
this.map.addLayer(this.devProjectsLayer2);

// Data Grid 2
this.columns = [{
label: "Zoom",
field: "OBJECTID",
formatter: this.createZoomButton
}, {
label: "Project Name",
field: "NAME"
}];
this.devProjectsLayer2.on("load", lang.hitch(this, function(evt) {
var query2 = new Query();
query2.where = "WARD = '2' AND STATUS LIKE 'ACTIVE' OR WARD = '2' AND STATUS LIKE 'APPROVED' OR WARD = '2' AND STATUS LIKE 'PROPOSED'";
evt.layer.queryFeatures(query2, lang.hitch(this, function(featureSet) {
var myFeatureExtent2 = graphicsUtils.graphicsExtent(featureSet.features);
var items2 = array.map(featureSet.features, function(feature) {
return feature.attributes;
});

//idProperty must be set manually if value is something other than 'id'
var memStore2 = new Memory({
data: items2,
idProperty: "OBJECTID"
});
this.grid2 = new projectDataGrid({
bufferRows: Infinity,
minRowsPerPage: "1000",
columns: this.columns
}, this.gridDiv2);
this.grid2.startup();
this.grid2.set("store", memStore2);
this.grid2.set("sort", "NAME");

var cp2 = new ContentPane({
title: "Ward 2",
content: this.grid2,
selected: false
});
cp2.extent = myFeatureExtent2;
tc.addChild(cp2);

//Tab 3

this.devProjectsLayer3 = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", {
id: "devProjectsLayer3",
mode: FeatureLayer.MODE_ONDEMAND,
opacity: .5,
outFields: ["*"]
});
this.devProjectsLayer3.setDefinitionExpression("WARD = '3' AND STATUS LIKE 'ACTIVE' OR WARD = '3' AND STATUS LIKE 'APPROVED' OR WARD = '3' AND STATUS LIKE 'PROPOSED'");
this.map.addLayer(this.devProjectsLayer3);

// Data Grid 3
this.columns = [{
label: "Zoom",
field: "OBJECTID",
formatter: this.createZoomButton
}, {
label: "Project Name",
field: "NAME"
}];
this.devProjectsLayer3.on("load", lang.hitch(this, function(evt) {
var query3 = new Query();
query3.where = "WARD = '3' AND STATUS LIKE 'ACTIVE' OR WARD = '3' AND STATUS LIKE 'APPROVED' OR WARD = '3' AND STATUS LIKE 'PROPOSED'";
evt.layer.queryFeatures(query3, lang.hitch(this, function(featureSet) {
var myFeatureExtent3 = graphicsUtils.graphicsExtent(featureSet.features);
var items3 = array.map(featureSet.features, function(feature) {
return feature.attributes;
});

//idProperty must be set manually if value is something other than 'id'
var memStore3 = new Memory({
data: items3,
idProperty: "OBJECTID"
});
this.grid3 = new projectDataGrid({
bufferRows: Infinity,
minRowsPerPage: "1000",
columns: this.columns
}, this.gridDiv3);
this.grid3.startup();
this.grid3.set("store", memStore3);
this.grid3.set("sort", "NAME");

var cp3 = new ContentPane({
title: "Ward 3",
content: this.grid3,
selected: false
});
cp3.extent = myFeatureExtent3;
tc.addChild(cp3);

//Tab 4

this.devProjectsLayer4 = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", {
id: "devProjectsLayer4",
mode: FeatureLayer.MODE_ONDEMAND,
opacity: .5,
outFields: ["*"]
});
this.devProjectsLayer4.setDefinitionExpression("WARD = '4' AND STATUS LIKE 'ACTIVE' OR WARD = '4' AND STATUS LIKE 'APPROVED' OR WARD = '4' AND STATUS LIKE 'PROPOSED'");
this.map.addLayer(this.devProjectsLayer4);

// Data Grid 4
this.columns = [{
label: "Zoom",
field: "OBJECTID",
formatter: this.createZoomButton
}, {
label: "Project Name",
field: "NAME"
}];
this.devProjectsLayer4.on("load", lang.hitch(this, function(evt) {
var query4 = new Query();
query4.where = "WARD = '4' AND STATUS LIKE 'ACTIVE' OR WARD = '4' AND STATUS LIKE 'APPROVED' OR WARD = '4' AND STATUS LIKE 'PROPOSED'";
evt.layer.queryFeatures(query4, lang.hitch(this, function(featureSet) {
var myFeatureExtent4 = graphicsUtils.graphicsExtent(featureSet.features);
var items4 = array.map(featureSet.features, function(feature) {
return feature.attributes;
});

//idProperty must be set manually if value is something other than 'id'
var memStore4 = new Memory({
data: items4,
idProperty: "OBJECTID"
});
this.grid4 = new projectDataGrid({
bufferRows: Infinity,
minRowsPerPage: "1000",
columns: this.columns
}, this.gridDiv4);
this.grid4.startup();
this.grid4.set("store", memStore4);
this.grid4.set("sort", "NAME");

var cp4 = new ContentPane({
title: "Ward 4",
content: this.grid4,
selected: false
});
cp4.extent = myFeatureExtent4;
tc.addChild(cp4);

tc.startup();

this.grid.on(".field-OBJECTID:click", lang.hitch(this, function(e) {
//retrieve the ObjectId when someone clicks on the magnifying glass
if (e.target.alt) {
this.zoomRow(e.target.alt);
}
}));

this.grid2.on(".field-OBJECTID:click", lang.hitch(this, function(e) {
//retrieve the ObjectId when someone clicks on the magnifying glass
if (e.target.alt) {
this.zoomRow(e.target.alt);
}
}));

this.grid3.on(".field-OBJECTID:click", lang.hitch(this, function(e) {
//retrieve the ObjectId when someone clicks on the magnifying glass
if (e.target.alt) {
this.zoomRow(e.target.alt);
}
}));

this.grid4.on(".field-OBJECTID:click", lang.hitch(this, function(e) {
//retrieve the ObjectId when someone clicks on the magnifying glass
if (e.target.alt) {
this.zoomRow(e.target.alt);
}
}));
}));
}));
}));
}));
}));
}));
}));
}));
},

// Create zoom button
createZoomButton: function (id) {
var zoomButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/Wards/images/zoom.png' myAttri='Zoom' alt='" + id + "'";
zoomButton = zoomButton + " width='18' height='18' title='Zoom to Feature'></div>";
return zoomButton;
},

// Zoom to Selected Feature
zoomRow: function(id) {
this.devProjectsLayer.clearSelection();
var query = new Query();
query.objectIds = [id];
this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) {
//zoom to the selected feature
var devProjectsExtent = features[0].geometry.getExtent().expand(5.0);
this.map.setExtent(devProjectsExtent);
}));
},

// // Zoom to Selected Features from Tab
// zoomFeatures: function(id) {
// this.devProjectsLayer.clearSelection();
// var query = new Query();
// query.objectIds = [id];
// this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) {
// //zoom to the selected feature
// var devProjectsExtent = features[0].geometry.getExtent().expand(5.0);
// this.map.setExtent(devProjectsExtent);
// }));
// },

});
});

[RobertScheitlin__GISP]

Tyler,

   So what I can gather from your code is that you add a FeatureLayer to the map with a defeintion Query set from each of your wards (so the same layer url but a different def query for each ward). So it seems that you just want to set the visibility of the FeatureLayers that are not the ward you have selected to be false. Something like:

                        tc.watch("selectedChildWidget", lang.hitch(this, function(name, oval, nval) {
                            switch (nval.title) {
                                case "Ward 1":
                                    devProjectsLayer.visible = true;
                                    devProjectsLayer2.visible = false;
                                    devProjectsLayer3.visible = false;
                                    devProjectsLayer4.visible = false;
                                    break;
                                case "Ward 2":
                                    devProjectsLayer.visible = false;
                                    devProjectsLayer2.visible = true;
                                    devProjectsLayer3.visible = false;
                                    devProjectsLayer4.visible = false;
                                    break;
                                case "Ward 3":
                                    devProjectsLayer.visible = false;
                                    devProjectsLayer2.visible = false;
                                    devProjectsLayer3.visible = true;
                                    devProjectsLayer4.visible = false;
                                    break;
                                case "Ward 4":
                                    devProjectsLayer.visible = false;
                                    devProjectsLayer2.visible = false;
                                    devProjectsLayer3.visible = false;
                                    devProjectsLayer4.visible = true;
                                    break;
                            }
                            if (nval.extent !== this.map.spatialReference) {
                                var params = new ProjectParameters();
                                params.outSR = this.map.spatialReference;
                                params.geometries = [nval.extent];
                                geomSvc.project(params, lang.hitch(this, function(geoms) {
                                    this.map.setExtent(geoms[0], true);
                                }));
                            } else {
                                this.map.setExtent(nval.extent, true);
                            }
                        }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[TylerDunn2]

Yeah you're spot on. So when I click the Wards tab, 4 "DevProjects - Current Projects" operational layers appear in the layer list. They all have the definition query applied to them so if I toggle them on and off it shows the different and correct projects per Ward. I tried the code you sent and it threw an error of devProjectsLayer being undefined so I changed it to this.devProjectsLayer. That didn't throw an error, but it also didn't change the visibility of the other layer. Any follow up suggestions? Think it's a mode: setting issue in the featureLayer setting?

[RobertScheitlin__GISP]

Tyler,

   Oh I forget the "this" part:

                        tc.watch("selectedChildWidget", lang.hitch(this, function(name, oval, nval) {
                            switch (nval.title) {
                                case "Ward 1":
                                    this.devProjectsLayer.visible = true;
                                    this.devProjectsLayer2.visible = false;
                                    this.devProjectsLayer3.visible = false;
                                    this.devProjectsLayer4.visible = false;
                                    break;
                                case "Ward 2":
                                    this.devProjectsLayer.visible = false;
                                    this.devProjectsLayer2.visible = true;
                                    this.devProjectsLayer3.visible = false;
                                    this.devProjectsLayer4.visible = false;
                                    break;
                                case "Ward 3":
                                    this.devProjectsLayer.visible = false;
                                    this.devProjectsLayer2.visible = false;
                                    this.devProjectsLayer3.visible = true;
                                    this.devProjectsLayer4.visible = false;
                                    break;
                                case "Ward 4":
                                    this.devProjectsLayer.visible = false;
                                    this.devProjectsLayer2.visible = false;
                                    this.devProjectsLayer3.visible = false;
                                    this.devProjectsLayer4.visible = true;
                                    break;
                            }
                            if (nval.extent !== this.map.spatialReference) {
                                var params = new ProjectParameters();
                                params.outSR = this.map.spatialReference;
                                params.geometries = [nval.extent];
                                geomSvc.project(params, lang.hitch(this, function(geoms) {
                                    this.map.setExtent(geoms[0], true);
                                }));
                            } else {
                                this.map.setExtent(nval.extent, true);
                            }
                        }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[TylerDunn2]

Hey Robert,

Fortunately with the "this" added, it doesn't throw the undefined error, but it still doesn't turn off the other devProjectsLayers to only show the selected one. Think it's a LayerList issue or a featureLayer mode: issue?

[RobertScheitlin__GISP]

Tyler,

   I don't think either of those would be the issue. Try debugging the code by placing a console statement in the switch cases to see if you are getting into the code where the layers visibility is being changed.

[TylerDunn2]

It's accessing it and I'm getting the alerts in console:

tc.watch("selectedChildWidget", lang.hitch(this, function(name, oval, nval) {
switch (nval.title) {
case "Ward 1":
this.devProjectsLayer.visible = true;
this.devProjectsLayer2.visible = false;
this.devProjectsLayer3.visible = false;
this.devProjectsLayer4.visible = false;
console.log("ward 1");
break;
case "Ward 2":
this.devProjectsLayer.visible = false;
this.devProjectsLayer2.visible = true;
this.devProjectsLayer3.visible = false;
this.devProjectsLayer4.visible = false;
console.log("ward 2");
break;
case "Ward 3":
this.devProjectsLayer.visible = false;
this.devProjectsLayer2.visible = false;
this.devProjectsLayer3.visible = true;
this.devProjectsLayer4.visible = false;
console.log("ward 3");
break;
case "Ward 4":
this.devProjectsLayer.visible = false;
this.devProjectsLayer2.visible = false;
this.devProjectsLayer3.visible = false;
this.devProjectsLayer4.visible = true;
console.log("ward 4");
break;
}
if (nval.extent !== this.map.spatialReference) {
var params = new ProjectParameters();
params.outSR = this.map.spatialReference;
params.geometries = [nval.extent];
geomSvc.project(params, lang.hitch(this, function(geoms) {
this.map.setExtent(geoms[0], true);
}));
} else {
this.map.setExtent(nval.extent, true);
}
}));

But it's still leaving the other layers on. Any other ideas? Would this actually uncheck the visible box in the layer list? 

[RobertScheitlin__GISP · Accepted solution]

Tyler,

  OK I see. Use this code then:

                        tc.watch("selectedChildWidget", lang.hitch(this, function(name, oval, nval) {
                            switch (nval.title) {
                                case "Ward 1":
                                    this.devProjectsLayer.setVisibility(true);
                                    this.devProjectsLayer2.setVisibility(false);
                                    this.devProjectsLayer3.setVisibility(false);
                                    this.devProjectsLayer4.setVisibility(false);
                                    break;
                                case "Ward 2":
                                    this.devProjectsLayer.setVisibility(false);
                                    this.devProjectsLayer2.setVisibility(true);
                                    this.devProjectsLayer3.setVisibility(false);
                                    this.devProjectsLayer4.setVisibility(false);
                                    break;
                                case "Ward 3":
                                    this.devProjectsLayer.setVisibility(false);
                                    this.devProjectsLayer2.setVisibility(false);
                                    this.devProjectsLayer3.setVisibility(true);
                                    this.devProjectsLayer4.setVisibility(false);
                                    break;
                                case "Ward 4":
                                    this.devProjectsLayer.setVisibility(false);
                                    this.devProjectsLayer2.setVisibility(false);
                                    this.devProjectsLayer3.setVisibility(false);
                                    this.devProjectsLayer4.setVisibility(true);
                                    break;
                            }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[TylerDunn2]

Jackpot. You never cease to amaze Robert. Thanks a ton!