AnsweredAssumed Answered

Definition Query on Zoom To/Tab click

Question asked by HustleHard on Feb 16, 2017
Latest reply on Feb 16, 2017 by HustleHard

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);
// }));
// },

});
});

Attachments

Outcomes