From 18bbfdfdc58525bbdbe4171b43d3ac1ccdbf4211 Mon Sep 17 00:00:00 2001 From: AlexThomasEOG Date: Wed, 13 Jan 2016 20:13:28 -0600 Subject: [PATCH 1/5] Added support to add & remove layer(s) from the Layer Control //add new layer function _setupSampleLayer(args) { var layer = args.layer; var target = args.target; layer.setVisibility(true); layer.opacity = 1; for (var i = 0; i < 8; i++) { var eLayerInfo = layer.layerInfos[i]; eLayerInfo.defaultVisibility = true } }; function _loadSampleLayer() { var imageParameters = new esri.layers.ImageParameters(); imageParameters.layerIds = [0,1,2,3,4,5,6,7]; imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW; var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http:///arcgis/rest/services//MapServer", {id: "MyMapService", visible : true, imageParameters : imageParameters } ); layer.on("load", function(args) { _setupSampleLayer(args); }); layer.on("error", function(args) { debugger; }); this.app.map.addLayer(layer); this.app.map.on("layer-add-result", function(args) { var layer = args.layer; var error = args.error; var layerInfo = { title : "My Sample Title", type : "dynamic", layer : layer } dojo.publish('layerControl/addLayerControls', [[layerInfo]]); }); } //remove layer dojo.publish("layerControl/removeLayerControls", [["My Sample Title"]]) --- viewer/js/gis/dijit/LayerControl.js | 44 +++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 3 deletions(-) diff --git a/viewer/js/gis/dijit/LayerControl.js b/viewer/js/gis/dijit/LayerControl.js index ec2d89265..9a380bb1b 100644 --- a/viewer/js/gis/dijit/LayerControl.js +++ b/viewer/js/gis/dijit/LayerControl.js @@ -118,10 +118,22 @@ define([ this.overlayReorder = false; this.vectorReorder = false; } - // load only the modules we need + this._addLayerControls(this.layerInfos); + this._subscribeToTopics(); + }, + _subscribeToTopics() { + this._removeLayerControlsHandler = topic.subscribe('layerControl/removeLayerControls', lang.hitch(this, function (layerTitles) { + this._removeLayerControls(layerTitles); + })); + this._addLayerControlsHandler = topic.subscribe('layerControl/addLayerControls', lang.hitch(this, function (layerInfos) { + this._addLayerControls(layerInfos); + })); + }, + _addLayerControls: function(layerInfos) { + // load only the modules we need var modules = []; // push layer control mods - array.forEach(this.layerInfos, function (layerInfo) { + array.forEach(layerInfos, function (layerInfo) { // check if control is excluded var controlOptions = layerInfo.controlOptions; if (controlOptions && controlOptions.exclude === true) { @@ -139,7 +151,7 @@ define([ }, this); // load and go require(modules, lang.hitch(this, function () { - array.forEach(this.layerInfos, function (layerInfo) { + array.forEach(layerInfos, function (layerInfo) { // exclude from widget var controlOptions = layerInfo.controlOptions; if (controlOptions && controlOptions.exclude === true) { @@ -152,6 +164,32 @@ define([ }, this); this._checkReorder(); })); + }, + // remove the control given an array of layerTitles + _removeLayerControls: function (layerTitles) { + // helper function to determine which children's title have a match in the layerTitles parameter + var _filterList = function (entry) { + return layerTitles.reduce(function(prior,curr){ return (curr === entry.layerTitle)||prior}, false); + } + // get a list of ALL the layers that meet the criteria + var layerControlList = this._overlayContainer.getChildren().filter( function(c) { return _filterList(c)}).concat( + this._vectorContainer.getChildren().filter( function(c) { return _filterList(c)}).concat( + this.getChildren().filter( function(c) { return _filterList(c)}) + ) + ); + // follow the same logic as when the layers were added + array.forEach(layerControlList, lang.hitch(this, function (layerControl) { + if (this.separated) { + if (layerControl._layerType === 'overlay') { + this._overlayContainer.removeChild(layerControl); + } else { + this._vectorContainer.removeChild(layerControl); + } + } + else { + this.removeChild(layerControl); + } + })); }, // create layer control and add to appropriate _container _addControl: function (layerInfo, Control) { From cdf2533ef36d6ea1490074b95d558f6bbe7fff72 Mon Sep 17 00:00:00 2001 From: AlexThomasEOG Date: Thu, 14 Jan 2016 13:36:16 -0600 Subject: [PATCH 2/5] Corrected file according to eslint standardized the format of the .js file --- viewer/js/gis/dijit/LayerControl.js | 71 ++++++++++++++++------------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/viewer/js/gis/dijit/LayerControl.js b/viewer/js/gis/dijit/LayerControl.js index 9a380bb1b..bea969f22 100644 --- a/viewer/js/gis/dijit/LayerControl.js +++ b/viewer/js/gis/dijit/LayerControl.js @@ -118,19 +118,19 @@ define([ this.overlayReorder = false; this.vectorReorder = false; } - this._addLayerControls(this.layerInfos); - this._subscribeToTopics(); + this._addLayerControls(this.layerInfos); + this._subscribeToTopics(); }, - _subscribeToTopics() { + _subscribeToTopics: function () { this._removeLayerControlsHandler = topic.subscribe('layerControl/removeLayerControls', lang.hitch(this, function (layerTitles) { - this._removeLayerControls(layerTitles); + this._removeLayerControls(layerTitles); })); this._addLayerControlsHandler = topic.subscribe('layerControl/addLayerControls', lang.hitch(this, function (layerInfos) { - this._addLayerControls(layerInfos); + this._addLayerControls(layerInfos); })); - }, - _addLayerControls: function(layerInfos) { - // load only the modules we need + }, + _addLayerControls: function (layerInfos) { + // load only the modules we need var modules = []; // push layer control mods array.forEach(layerInfos, function (layerInfo) { @@ -164,32 +164,39 @@ define([ }, this); this._checkReorder(); })); - }, + }, // remove the control given an array of layerTitles _removeLayerControls: function (layerTitles) { - // helper function to determine which children's title have a match in the layerTitles parameter - var _filterList = function (entry) { - return layerTitles.reduce(function(prior,curr){ return (curr === entry.layerTitle)||prior}, false); - } - // get a list of ALL the layers that meet the criteria - var layerControlList = this._overlayContainer.getChildren().filter( function(c) { return _filterList(c)}).concat( - this._vectorContainer.getChildren().filter( function(c) { return _filterList(c)}).concat( - this.getChildren().filter( function(c) { return _filterList(c)}) - ) - ); - // follow the same logic as when the layers were added - array.forEach(layerControlList, lang.hitch(this, function (layerControl) { - if (this.separated) { - if (layerControl._layerType === 'overlay') { - this._overlayContainer.removeChild(layerControl); - } else { - this._vectorContainer.removeChild(layerControl); - } - } - else { - this.removeChild(layerControl); - } - })); + // helper function to determine which children's title have a match in the layerTitles parameter + function _filterList (entry) { + return layerTitles.reduce(function (prior, curr) { + return (curr === entry.layerTitle) || prior; + }, false); + } + // get a list of ALL the layers that meet the criteria + var layerControlList = this._overlayContainer.getChildren().filter(function (c) { + return _filterList(c); + }).concat( + this._vectorContainer.getChildren().filter(function (c) { + return _filterList(c); + })).concat( + this.getChildren().filter(function (c) { + return _filterList(c); + })); + + + // follow the same logic as when the layers were added + array.forEach(layerControlList, lang.hitch(this, function (layerControl) { + if (this.separated) { + if (layerControl._layerType === 'overlay') { + this._overlayContainer.removeChild(layerControl); + } else { + this._vectorContainer.removeChild(layerControl); + } + } else { + this.removeChild(layerControl); + } + })); }, // create layer control and add to appropriate _container _addControl: function (layerInfo, Control) { From f1fa53c5f8d6b6d8fcc38f70371f9ec079bbfd1b Mon Sep 17 00:00:00 2001 From: AlexThomasEOG Date: Tue, 19 Jan 2016 16:07:47 -0600 Subject: [PATCH 3/5] Handle the case where a layer is added and re-added and destroying controls when necessary var myLayer; function _setupSampleLayer(args) { var layer = args.layer; var target = args.target; layer.setVisibility(true); layer.opacity = 1; for (var i = 0; i < 8; i++) { var eLayerInfo = layer.layerInfos[i]; eLayerInfo.defaultVisibility = true } }; function _loadSampleLayer() { var imageParameters = new esri.layers.ImageParameters(); imageParameters.layerIds = [0,1,2,3,4,5,6,7]; imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW; myLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://hougissrv02:6080/arcgis/rest/services/Integrations_iApps/DEN_iAppsBase/MapServer", {id: "MyMapService", visible : true, imageParameters : imageParameters } ); myLayer.on("load", function(args) { _setupSampleLayer(args); }); myLayer.on("error", function(args) { debugger; }); this.app.map.addLayer(myLayer); this.app.map.on("layer-add-result", function(args) { var layer = args.layer; var error = args.error; var layerInfo = { title : "My Sample Title", type : "dynamic", layer : layer } dojo.publish('layerControl/addLayerControls', [[layerInfo]]); }); } dojo.publish("layerControl/removeLayerControls", [[myLayer]]) --- viewer/js/gis/dijit/LayerControl.js | 15 +++--- .../LayerControl/controls/_DynamicFolder.js | 17 +++++-- .../LayerControl/controls/_DynamicSublayer.js | 50 +++++++++++-------- .../dijit/LayerControl/plugins/legendUtil.js | 22 ++++---- 4 files changed, 62 insertions(+), 42 deletions(-) diff --git a/viewer/js/gis/dijit/LayerControl.js b/viewer/js/gis/dijit/LayerControl.js index bea969f22..1b9f71e43 100644 --- a/viewer/js/gis/dijit/LayerControl.js +++ b/viewer/js/gis/dijit/LayerControl.js @@ -122,8 +122,8 @@ define([ this._subscribeToTopics(); }, _subscribeToTopics: function () { - this._removeLayerControlsHandler = topic.subscribe('layerControl/removeLayerControls', lang.hitch(this, function (layerTitles) { - this._removeLayerControls(layerTitles); + this._removeLayerControlsHandler = topic.subscribe('layerControl/removeLayerControls', lang.hitch(this, function (layers) { + this._removeLayerControls(layers); })); this._addLayerControlsHandler = topic.subscribe('layerControl/addLayerControls', lang.hitch(this, function (layerInfos) { this._addLayerControls(layerInfos); @@ -165,12 +165,12 @@ define([ this._checkReorder(); })); }, - // remove the control given an array of layerTitles - _removeLayerControls: function (layerTitles) { - // helper function to determine which children's title have a match in the layerTitles parameter + // remove the control given an array of layers + _removeLayerControls: function (layers) { + // helper function to determine which children's layer have a match in the layers parameter function _filterList (entry) { - return layerTitles.reduce(function (prior, curr) { - return (curr === entry.layerTitle) || prior; + return layers.reduce(function (prior, curr) { + return (curr === entry.layer) || prior; }, false); } // get a list of ALL the layers that meet the criteria @@ -196,6 +196,7 @@ define([ } else { this.removeChild(layerControl); } + layerControl.destroy(); })); }, // create layer control and add to appropriate _container diff --git a/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js b/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js index a48e7115e..184512574 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js +++ b/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js @@ -33,6 +33,7 @@ define([ // ^args templateString: folderTemplate, _expandClickHandler: null, + _handlers: [], postCreate: function () { this.inherited(arguments); // Should the control be visible or hidden? @@ -47,7 +48,7 @@ define([ } else { this._setSublayerCheckbox(false, checkNode); } - on(checkNode, 'click', lang.hitch(this, function () { + this._handlers.push(on(checkNode, 'click', lang.hitch(this, function () { if (domAttr.get(checkNode, 'data-checked') === 'checked') { this._setSublayerCheckbox(false, checkNode); } else { @@ -55,18 +56,18 @@ define([ } this.control._setVisibleLayers(); this._checkboxScaleRange(); - })); + }))); html.set(this.labelNode, this.sublayerInfo.name); this._expandClick(); if (this.sublayerInfo.minScale !== 0 || this.sublayerInfo.maxScale !== 0) { this._checkboxScaleRange(); - this.control.layer.getMap().on('zoom-end', lang.hitch(this, '_checkboxScaleRange')); + this._handlers.push(this.control.layer.getMap().on('zoom-end', lang.hitch(this, '_checkboxScaleRange'))); } }, // add on event to expandClickNode _expandClick: function () { var i = this.icons; - this._expandClickHandler = on(this.expandClickNode, 'click', lang.hitch(this, function () { + this._handlers.push(this._expandClickHandler = on(this.expandClickNode, 'click', lang.hitch(this, function () { var expandNode = this.expandNode, iconNode = this.expandIconNode; if (domStyle.get(expandNode, 'display') === 'none') { @@ -82,7 +83,7 @@ define([ }).play(); domClass.replace(iconNode, i.folder, i.folderOpen); } - })); + }))); }, // set checkbox based on layer so it's always in sync _setSublayerCheckbox: function (checked, checkNode) { @@ -106,6 +107,12 @@ define([ if ((min !== 0 && scale > min) || (max !== 0 && scale < max)) { domClass.add(node, 'layerControlCheckIconOutScale'); } + }, + destroy: function () { + this.inherited(arguments); + this._handlers.forEach(function (h) { + h.remove(); + }); } }); return _DynamicFolder; diff --git a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js index e5749ee90..051d96202 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js +++ b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js @@ -17,23 +17,23 @@ define([ 'dojo/text!./templates/Sublayer.html', 'dojo/i18n!./../nls/resource' ], function ( - declare, - lang, - array, - on, - domClass, - domStyle, - domAttr, - fx, - html, - Menu, - MenuItem, - topic, - WidgetBase, - TemplatedMixin, - sublayerTemplate, - i18n -) { + declare, + lang, + array, + on, + domClass, + domStyle, + domAttr, + fx, + html, + Menu, + MenuItem, + topic, + WidgetBase, + TemplatedMixin, + sublayerTemplate, + i18n + ) { var _DynamicSublayer = declare([WidgetBase, TemplatedMixin], { control: null, sublayerInfo: null, @@ -43,6 +43,7 @@ define([ templateString: sublayerTemplate, i18n: i18n, _expandClickHandler: null, + _handlers: [], postCreate: function () { this.inherited(arguments); // Should the control be visible or hidden? @@ -58,7 +59,7 @@ define([ this._setSublayerCheckbox(false, checkNode); } - on(checkNode, 'click', lang.hitch(this, function () { + this._handlers.push(on(checkNode, 'click', lang.hitch(this, function () { if (domAttr.get(checkNode, 'data-checked') === 'checked') { this._setSublayerCheckbox(false, checkNode); } else { @@ -66,16 +67,16 @@ define([ } this.control._setVisibleLayers(); this._checkboxScaleRange(); - })); + }))); html.set(this.labelNode, this.sublayerInfo.name); this._expandClick(); if (this.sublayerInfo.minScale !== 0 || this.sublayerInfo.maxScale !== 0) { this._checkboxScaleRange(); - this.control.layer.getMap().on('zoom-end', lang.hitch(this, '_checkboxScaleRange')); + this._handlers.push(this.control.layer.getMap().on('zoom-end', lang.hitch(this, '_checkboxScaleRange'))); } //set up menu if (this.control.controlOptions.menu && - this.control.controlOptions.menu.length) { + this.control.controlOptions.menu.length) { domClass.add(this.labelNode, 'menuLink'); domClass.add(this.iconNode, 'menuLink'); this.menu = new Menu({ @@ -120,6 +121,7 @@ define([ domClass.replace(iconNode, i.expand, i.collapse); } })); + this._handlers.push(this._expandClickHandler); }, // set checkbox based on layer so it's always in sync _setSublayerCheckbox: function (checked, checkNode) { @@ -143,6 +145,12 @@ define([ if ((min !== 0 && scale > min) || (max !== 0 && scale < max)) { domClass.add(node, 'layerControlCheckIconOutScale'); } + }, + destroy: function () { + this.inherited(arguments); + this._handlers.forEach(function (h) { + h.remove(); + }); } }); return _DynamicSublayer; diff --git a/viewer/js/gis/dijit/LayerControl/plugins/legendUtil.js b/viewer/js/gis/dijit/LayerControl/plugins/legendUtil.js index 714fab7ec..2ad840d60 100644 --- a/viewer/js/gis/dijit/LayerControl/plugins/legendUtil.js +++ b/viewer/js/gis/dijit/LayerControl/plugins/legendUtil.js @@ -172,15 +172,19 @@ define([ }, row, 'last'); domConst.place(this._image(legend, layerId, layer), symbol); - }, this); - // place legend in the appropriate sublayer expandNode - // or if a single layer use control expandNode - if (layer.layerInfos.length > 1) { - var sublayerExpandNode = registry.byId(layer.id + '-' + _layer.layerId + '-sublayer-control').expandNode; - html.set(sublayerExpandNode, ''); //clear "No Legend" placeholder - domConst.place(table, sublayerExpandNode); - } else { - domConst.place(table, expandNode); + }, this); + if (layer.layerInfos.reduce(function (prior, curr) { + return (curr.id === _layer.layerId) || prior; + }, false)) { + // place legend in the appropriate sublayer expandNode + // or if a single layer use control expandNode + if (layer.layerInfos.length > 1) { + var sublayerExpandNode = registry.byId(layer.id + '-' + _layer.layerId + '-sublayer-control').expandNode; + html.set(sublayerExpandNode, ''); //clear "No Legend" placeholder + domConst.place(table, sublayerExpandNode); + } else { + domConst.place(table, expandNode); + } } }, this); }, From ab3186e23827ffed9ce7d6d292f9b55cfc7cd67a Mon Sep 17 00:00:00 2001 From: AlexThomasEOG Date: Tue, 19 Jan 2016 17:08:38 -0600 Subject: [PATCH 4/5] Add ability to control ordering of new layer in LayerControl var myLayer; function _setupSampleLayer(args) { var layer = args.layer; var target = args.target; layer.setVisibility(true); layer.opacity = 1; for (var i = 0; i < 8; i++) { var eLayerInfo = layer.layerInfos[i]; eLayerInfo.defaultVisibility = true } }; function _loadSampleLayer(requestedPosition) { var imageParameters = new esri.layers.ImageParameters(); imageParameters.layerIds = [0,1,2,3,4,5,6,7]; imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW; myLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http:///arcgis/rest/services//MapServer", {id: "MyMapService", visible : true, imageParameters : imageParameters } ); myLayer.on("load", function(args) { _setupSampleLayer(args); }); myLayer.on("error", function(args) { debugger; }); this.app.map.addLayer(myLayer ); var signal = this.app.map.on("layer-add-result", function(args) { signal.remove() var layer = args.layer; var error = args.error; var layerInfo = { title : "My Sample Title", type : "dynamic", layer : layer, position : requestedPosition } dojo.publish('layerControl/addLayerControls', [[layerInfo]]); }); } // function _removeSampleLayer() { dojo.publish("layerControl/removeLayerControls", [[myLayer]]); this.app.map.removeLayer(myLayer); } _loadSampleLayer(0); _removeSampleLayer(); //pause _loadSampleLayer(1); _removeSampleLayer(); //pause _loadSampleLayer(2); _removeSampleLayer(); --- viewer/js/gis/dijit/LayerControl.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/viewer/js/gis/dijit/LayerControl.js b/viewer/js/gis/dijit/LayerControl.js index 1b9f71e43..d25f0e7d2 100644 --- a/viewer/js/gis/dijit/LayerControl.js +++ b/viewer/js/gis/dijit/LayerControl.js @@ -177,14 +177,12 @@ define([ var layerControlList = this._overlayContainer.getChildren().filter(function (c) { return _filterList(c); }).concat( - this._vectorContainer.getChildren().filter(function (c) { - return _filterList(c); - })).concat( - this.getChildren().filter(function (c) { - return _filterList(c); - })); - - + this._vectorContainer.getChildren().filter(function (c) { + return _filterList(c); + })).concat( + this.getChildren().filter(function (c) { + return _filterList(c); + })); // follow the same logic as when the layers were added array.forEach(layerControlList, lang.hitch(this, function (layerControl) { if (this.separated) { @@ -216,14 +214,15 @@ define([ }, layerInfo.controlOptions) }); layerControl.startup(); + var position = layerInfo.position || 0; if (this.separated) { if (layerControl._layerType === 'overlay') { - this._overlayContainer.addChild(layerControl, 'first'); + this._overlayContainer.addChild(layerControl, position); } else { - this._vectorContainer.addChild(layerControl, 'first'); + this._vectorContainer.addChild(layerControl, position); } } else { - this.addChild(layerControl, 'first'); + this.addChild(layerControl, position); } }, // move control up in controller and layer up in map From 46ab98cfa611616b002f9515c4b34a87b07daa8b Mon Sep 17 00:00:00 2001 From: roemhildtg Date: Thu, 28 Jan 2016 17:03:21 -0600 Subject: [PATCH 5/5] Change topic 'LayerControl' to 'layerControl' --- viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js index e5749ee90..72aa7dcaf 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js +++ b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js @@ -91,7 +91,7 @@ define([ //create the menu item var item = new MenuItem(menuItem); item.set('onClick', lang.hitch(this, function () { - topic.publish('LayerControl/' + menuItem.topic, { + topic.publish('layerControl/' + menuItem.topic, { layer: this.control.layer, subLayer: this.sublayerInfo, iconNode: this.iconNode, @@ -146,4 +146,4 @@ define([ } }); return _DynamicSublayer; -}); \ No newline at end of file +});