AnsweredAssumed Answered

zoom to selection on tab click

Question asked by HustleHard on Nov 23, 2016
Latest reply on Nov 29, 2016 by HustleHard

I'm trying to zoom to a selected memory store when you click the tab to switch to the grid. I've attached a screen shot to give you an idea of what I'm trying to do. Each tab (Tab 1, Tab 2, Tab 3) has a query behind them to show different data. When you click each tab, it shows a different grid of data. Currently when you click the magnifying glass it zooms to that single project. I'm trying to get it to zoom to all of that Tab's projects when you click on a different tab (extent of the features returned from the query). Here's the code I've been working with, which is the Project by Engineer widget. I'll also attach the widget. Any help would be much appreciated!

 

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',
'dijit/form/Button'
],
function (
declare,
_WidgetsInTemplateMixin,
BaseWidget,
SimpleFillSymbol,
Color,
Query,
on,
FeatureLayer,
Grid,
Selection,
TabContainer,
ContentPane,
array,
Memory,
lang
) {
//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);


// Map Feature Layer
this.devProjectsLayer = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", {
id: "devProjectsLayer",
opacity: 1,
outFields: ["*"]
});
//this.devProjectsLayer.setDefinitionExpression("PLANNER = 'LH' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'LH' AND STATUS LIKE 'APPROVED' OR PLANNER = 'LH' AND STATUS LIKE 'PROPOSED'")
this.map.addLayer(this.devProjectsLayer);


// Data Grid
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 = "ENGINEER = 'CC' AND STATUS LIKE 'ACTIVE' OR ENGINEER = 'CC' AND STATUS LIKE 'APPROVED' OR ENGINEER = 'CC' AND STATUS LIKE 'PROPOSED'";
evt.layer.queryFeatures(query, lang.hitch(this, function(featureSet) {
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);

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

tc.addChild(cp1);

this.devProjectsLayer2 = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", {
id: "devProjectsLayer",
opacity: 1,
outFields: ["*"]
});
this.map.addLayer(this.devProjectsLayer2);


// Data Grid Probably not needed
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 = "ENGINEER = 'NH' AND STATUS LIKE 'ACTIVE' OR ENGINEER = 'NH' AND STATUS LIKE 'APPROVED' OR ENGINEER = 'NH' AND STATUS LIKE 'PROPOSED'";
evt.layer.queryFeatures(query2, lang.hitch(this, function(featureSet) {
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: "Tab 2",
content: this.grid2,
selected: false
});
tc.addChild(cp2);

this.devProjectsLayer3 = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", {
id: "devProjectsLayer",
opacity: 1,
outFields: ["*"]
});
this.map.addLayer(this.devProjectsLayer3);


// Data Grid Probably not needed
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 = "ENGINEER = 'TR' AND STATUS LIKE 'ACTIVE' OR ENGINEER = 'TR' AND STATUS LIKE 'APPROVED' OR ENGINEER = 'TR' AND STATUS LIKE 'PROPOSED'";
query3.where = "STATUS LIKE 'ACTIVE' OR STATUS LIKE 'APPROVED' OR STATUS LIKE 'PROPOSED'";
evt.layer.queryFeatures(query3, lang.hitch(this, function(featureSet) {
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: "Tab 3",
content: this.grid3,
selected: false
});
tc.addChild(cp3);

// this.devProjectsLayer4 = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", {
// id: "devProjectsLayer",
// opacity: 1,
// outFields: ["*"]
// });
// this.map.addLayer(this.devProjectsLayer4);


// // Data Grid Probably not needed
// 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 = "PLANNER = 'NN' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'NN' AND STATUS LIKE 'APPROVED' OR PLANNER = 'NN' AND STATUS LIKE 'PROPOSED'";
// //query2.where = "PLANNER = 'JR'";
// evt.layer.queryFeatures(query4, lang.hitch(this, function(featureSet) {
// 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: "Tab 4",
// content: this.grid4,
// selected: false
// });
// 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);
}
alert("tab 2 OID clicked");
}));

this.grid2.on("tc.addChild(cp2):click", lang.hitch(this, function(e) {
//retrieve the ObjectId when someone clicks on the magnifying glass
if (e.target.alt) {
this.zoomFeatures(e.target.alt);
}
alert("tab has been clicked");
}));

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/Engineers/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
//I think this is okay. It's clearing OG selection, creating a new selection off the feature layer, then getting the extent of the selection. If tab click activates selection, should work 
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);
}));
},
// zoomRow2: 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