|
POST
|
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?
... View more
02-16-2017
10:06 AM
|
0
|
4
|
1870
|
|
POST
|
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?
... View more
02-16-2017
09:41 AM
|
0
|
6
|
1870
|
|
POST
|
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); // })); // }, }); });
... View more
02-16-2017
08:09 AM
|
0
|
8
|
2402
|
|
POST
|
That worked great, thanks for taking the time to look at it. It ends up being more useful for some of the other main tabs (Projects by City Council Ward, etc) where they're in different regions of the city. Thanks again!
... View more
11-29-2016
07:07 AM
|
0
|
0
|
1135
|
|
POST
|
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); // })); // }, });
... View more
11-23-2016
01:01 PM
|
0
|
2
|
2180
|
|
POST
|
Not sure why it's not working for you in IE 11. It works fine on my end. I'll keep experimenting and let you know if I find anything.
... View more
11-16-2016
10:49 AM
|
0
|
0
|
1793
|
|
POST
|
Hey Jake Tired the new grid, and it shows different fields for the second tab (i.e first tab shows project name, second tab shows Global ID) but it's still the same data (OBJECTID<21), just different fields. Any suggestions on getting a totally different batch of data in the second tab (i.e. OBJECTID<50)? Thanks a bunch for your help
... View more
10-28-2016
07:21 AM
|
0
|
0
|
1159
|
|
POST
|
Hey Jake Curious if you know how to get a different selection to show up when each tab is clicked. I've got queries running to filter out the data, but when I click to change the tab, it doesn't change the data. Example: This is for a current projects map for a city, each tab is a different planner that works for the city. The first query works fine, but when clicking the second tab for the next planner, the data stays the same. 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("OURSERVER URL", { id: "devProjectsLayer", opacity: 1, outFields: ["*"] }); 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 = "PLANNER = 'LH' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'LH' AND STATUS LIKE 'APPROVED' OR PLANNER = 'LH' 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"); 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); } })); })); })); var tc = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode); //First Tab panel var theContent = this.dgrid; var cp1 = new ContentPane({ title: "Lori Hight", content: theContent, selected: true }); tc.addChild(cp1); // Map Feature Layer this.devProjectsLayer2 = new FeatureLayer("OUR SERVER URL", { id: "devProjectsLayer", opacity: 1, outFields: ["*"] }); this.map.addLayer(this.devProjectsLayer2); // Data Grid this.columns2 = [{ 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.devProjectsLayer2.setSelectionSymbol(highlightSymbol); this.devProjectsLayer2.on("column.label:click", lang.hitch(this, function(evt) { //WHAT TO PUT HERE SO IT LOADS WHEN THE TAB IS CHANGED!!!! WITH JUST "load" IT LOADS ON TOP OF LORI'S TABLE var query2 = new Query(); query2.where = "PLANNER = 'JR' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'JR' AND STATUS LIKE 'APPROVED' OR PLANNER = 'JR' 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" }); var projectDataGrid2 = declare([Grid, Selection]); this.grid2 = new projectDataGrid2({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns2 }, this.gridDiv); this.grid2.startup(); this.grid2.set("store", memStore2); this.grid2.set("sort", "NAME"); 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); } })); })); })); //var tc2 = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode); //Second Tab Panel theContent2 = this.dgrid; var cp2 = new ContentPane({ title: "Jay Ruchti", content: theContent2, selected: true }); tc.addChild(cp2); //Third Tab Panel theContent3 = this.dgrid; var cp3 = new ContentPane({ title: "Ty Robbins", content: theContent3, selected: true }); tc.addChild(cp3); //Fourth Tab Panel theContent4 = this.dgrid; var cp4 = new ContentPane({ title: "Nick Nelson", content: theContent4, selected: true }); tc.addChild(cp4); tc.startup(); }, // 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); })); } }); });
... View more
10-06-2016
09:43 AM
|
0
|
2
|
1159
|
|
POST
|
This is as far as I've gotten in terms of trying to get the Query into the Edit widget. I'm not sure whether I need to include a QueryTask, a FeatureSet, an AttributeInspector or a RelationshipQuery as well. _worksAfterCreate: function(settings) { // add close button to atiInspector this._addButtonToInspector(); // resize editPopup this.editPopup.resize(500, 251); // update templatePicker for responsive. this.editor.templatePicker.update(); //Add the layer for the query to run against //Add the query. Might not need // this.pinQuery = new Query ({ // spatialRelationship: Query.SPATIAL_REL_WITHIN, // outFields: ["PIN"] // }); //Execute the query. Used this.map.on to symbolize it's when the map is clicked this.editor.templatePicker.on("selection-change", lang.hitch(this, function() { var selected = this.editor.templatePicker.getSelected(); if (selected) { var featureLayer = selected.featureLayer; on.once(featureLayer, "before-apply-edits", lang.hitch(this, function(evt){ var pinLayer = new FeatureLayer ("REST URL FOR PARCELS", { id: "pinLayer", mode: FeatureLayer.MODE_SELECTION, outFields: ["*"] }); this.map.addLayer(pinLayer); var pinQuery = new Query(); //var pinQueryTask = new QueryTask("REST URL FOR PARCELS"); pinQuery.geometry = evt.mapPoint; pinQuery.outFields = ["PIN"]; pinQuery.spatialRelationship = Query.SPATIAL_REL_WITHIN; pinLayer.selectFeatures(pinQuery, FeatureLayer.SELECTION_NEW, function(features){ if(evt.adds && evt.adds.length > 0){ if(evt.adds[0].attributes.hasOwnProperty('PIN')){ evt.adds[0].attributes.PIN = ["PIN"]; //PIN = 'PIN'; returns PIN in field } this.editor.attributeInspector.refresh(); }}) })); } })); //just for BoxTheme setTimeout(lang.hitch(this, this._update), 900); this._addFilterEditor(settings); this._createOverDef.resolve(); },
... View more
09-29-2016
08:19 AM
|
0
|
0
|
500
|
|
POST
|
Curious if anyone's had any success with this. Here's the scenario: I have an app built with edit abilities. The user is placing points within parcels and one of the editable fields in the points feature is the Parcel PIN number. Currently they're clicking the parcel, copying the PIN, opening the Edit widget, placing a dot within the parcel, then pasting the PIN number into the field. I'm sure there's a way to run a Query in the background that fires on the click that creates the point and can autopopulate the PIN field, but it's beyond me. Anyone have any suggestions?
... View more
08-31-2016
08:41 AM
|
0
|
1
|
1332
|
|
POST
|
I've got the grid inserted, I just cant figure out how to insert the data. I figure it has something to do with the this.map.addLayers([this.devProjectsLayer]); but no where that I put it makes the data fill the dgrid. I'm guessing it's something simple and I'm just missing it. Thanks define(['dojo/_base/declare', 'jimu/BaseWidget', 'dijit/_WidgetsInTemplateMixin', 'dojo/_base/html', 'dojo/query', 'dojo/_base/array', 'dojo/_base/sniff', 'dijit/layout/TabContainer', 'dijit/layout/ContentPane', 'dgrid/OnDemandGrid', 'dgrid/Selection', 'dojo/store/Memory', 'esri/layers/FeatureLayer', 'esri/symbols/SimpleFillSymbol', 'esri/Color', 'dojo/_base/lang', 'dijit/form/Button' ], function(declare, BaseWidget, _WidgetsInTemplateMixin, html, query, array, sniff, TabContainer, ContentPane, Grid, Selection, Memory, FeatureLayer, SimpleFillSymbol, Color, lang ) { var devProjectsGrid = declare([Grid, Selection]); var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], { baseClass: 'jimu-widget-modaltab', devProjectsLayer: null, dgrid: null, postCreate: function() { this.inherited(arguments); var columns = [{ label: "Zoom", //wasn't able to inject an HTML <div> with image here field: "OBJECTID", formatter: lang.hitch(this, this.makeZoomButton) }, { label: "Project Name", field: "NAME" }]; //restrict sorting to the Project name field for (var i = 0; i < columns.length; i++) { if (i == 1) { columns.sortable = true; } else { columns.sortable = false; } } this.dgrid = new devProjectsGrid({ bufferRows: Infinity, columns: columns }, this.grid); this.devProjectsLayer = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1 ", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "NAME"] }); //define a selection symbol 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 = "1=1"; 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" }); this.dgrid.set("store", memStore); //this.dgrid.set("sort", "NAME"); this.dgrid.set("sort", "NAME"); this.dgrid.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.map.addLayers([this.devProjectsLayer]); }, startup: function() { this.inherited(arguments); var tc = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode); //First Tab panel var theContent = this.dgrid; var cp1 = new ContentPane({ title: "Ward 1", content: theContent, selected: true }); tc.addChild(cp1); //Second Tab Panel theContent = this.dgrid; var cp2 = new ContentPane({ title: "Ward 2", content: theContent, selected: true }); tc.addChild(cp2); //Third Tab Panel theContent = this.dgrid; var cp3 = new ContentPane({ title: "Ward 3", content: theContent, selected: true }); tc.addChild(cp3); //Fourth Tab Panel theContent = this.dgrid; var cp4 = new ContentPane({ title: "Ward 4", content: theContent, selected: true }); tc.addChild(cp4); tc.startup(); }, 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); })); }, makeZoomButton: function(id) { //set the feature 'id' as the alt value for the image so that it can be used to query below var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='" + this.folderUrl + "/images/zoom.png' alt='" + id + "'"; zBtn = zBtn + " width='18' height='18'></div>"; return zBtn; } }); return clazz; });
... View more
08-16-2016
07:39 AM
|
0
|
5
|
2310
|
|
POST
|
This is awesome. Thanks for posting this. This gives me a great reference to help me adapt some of those regular JavaScript API samples to widget. Thanks again!
... View more
08-10-2016
09:34 AM
|
0
|
0
|
1426
|
|
POST
|
Anyone have any experience or suggestions on how to get a dgrid in a side panel with the zoom to function? Here's what I'm trying to get into the Tab side panel https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=fl_zoomgrid Not sure if anyone has any insight into this, I've been bashing around and can't seem to make it work. Thanks Tyler
... View more
08-10-2016
07:37 AM
|
0
|
2
|
2766
|
|
POST
|
Anyone have any experience with this? Here's a brief run down of what I'm looking to do: Keep our City's template the same (Launchpad Theme). Add a permanent side panel (similar to the Plateau/Tab Theme option) to the Launchpad theme. This is going to be a map showing Current Projects in our city, so I'd like to have separate tabs within the panel showing: A tab for Current Projects separated by Wards. A tab for Current Projects separated by Assigned Planner. A tab for Current Projects separated by Assigned Engineer. Trying to make all the Current Project lists clickable so it'll zoom to the project when clicked. Is the best way to go about this grabbing all the DockablePanel css and info from the Plateau Theme and mashing it into the Launchpad theme? Then create a widget for each tab that I want in the side panel? Haven't developed a widget yet so not sure if it'll be the correct application for the above issue. Any input is greatly appreciated, even if it's just whether this will be the right application for a custom widget. Thanks
... View more
07-27-2016
08:32 AM
|
1
|
1
|
1578
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 10-23-2018 08:48 AM | |
| 1 | 07-27-2016 08:32 AM | |
| 5 | 05-16-2016 11:11 AM | |
| 3 | 03-18-2016 10:07 AM | |
| 19 | 03-18-2016 10:05 AM |
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:23 AM
|