Hi Robert!
Thank you! I added in a button that clears the graphics and I would like for it to uncheck the checkboxes as well.
I also tried to tweak onClose so that when you close the widget, and click on a feature, the buffer is still there, and you get a pop-up describing the feature. I haven't been able to figure how to get the original map.on(.'click') to be silent.
in Widget.html:
<div><button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-event="click:_clearall" id="clearGraphics">Clear Graphics</button></div>
in Widget.js:
_clearall: function() {
console.log("button clicked");
this.map.graphics.clear();
var n = query(".box");
n.checked=false;
},
//onClose is placed after startup()
onClose: function(){
console.log('onClose');
var q = query(".box");
q.forEach(domConstruct.destroy);
}
Can you provide some tips? Thank you so much!
TA
Solved! Go to Solution.
TA,
Here is your code updated for that:
define(['dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'esri/map', 'esri/tasks/BufferParameters', 'esri/tasks/GeometryService', 'esri/graphic', 'esri/symbols/SimpleFillSymbol', 'esri/symbols/SimpleLineSymbol', 'esri/Color', 'dojo/_base/array', 'dojo/_base/lang', 'jimu/dijit/CheckBox', 'dojo/domReady!' ], function (declare, _WidgetsInTemplateMixin, BaseWidget, Map, BufferParameters, GeometryService, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, array, lang) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget, _WidgetsInTemplateMixin], { // Custom widget code goes here name: 'BufferTool', baseClass: 'jimu-widget-buffertool', distances: null, clickEvt: null, gsvc: null, postCreate: function () { this.inherited(arguments); this.distances = []; this.gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); }, _onChkboxesClicked: function() { this.distances = []; if(this.cbx05.getValue()){ this.distances.push(0.5); } if(this.cbx10.getValue()){ this.distances.push(1); } if(this.cbx15.getValue()){ this.distances.push(1.5); } if(this.cbx20.getValue()){ this.distances.push(2); } }, _clearall: function() { console.log("button clicked"); this.distances = []; this.map.graphics.clear(); this.cbx05.setValue(false); this.cbx10.setValue(false); this.cbx15.setValue(false); this.cbx20.setValue(false); }, //--------------------------------------- startup: function () { this.inherited(arguments); console.log('startup'); }, onClose: function(){ console.log('onClose'); this.clickEvt.remove(); }, onOpen: function(){ this.clickEvt = this.map.on('click', lang.hitch(this, function (evt) { this.map.graphics.clear(); var params = new BufferParameters(); params.geometries = [evt.mapPoint]; //buffer in linear units such as meters, km, miles etc. params.distances = this.distances; params.unit = GeometryService.UNIT_STATUTE_MILE; params.outSpatialReference = this.map.spatialReference; if(this.distances.length === 0){ return false; } this.gsvc.buffer(params, lang.hitch(this, function (geoms) { geoms.reverse(); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 255, 0.65]), 2), new Color([0, 0, 255, 0.35]) ); var symbol2 = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.65]), 2), new Color([255, 0, 0, 0.35]) ); var symbol3 = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255, 0.65]), 2), new Color([0, 0, 255, 0.35]) ); var symbol4 = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0, 0.65]), 2), new Color([255, 0, 0, 0.35]) ); var syms = [symbol, symbol2, symbol3, symbol4]; var graphic; array.map(geoms, lang.hitch(this, function(bufferGeom, index){ graphic = new Graphic(bufferGeom, syms[index]); this.map.graphics.add(graphic); })); })); })); } }); });
TA,
Here is your code updated for that:
define(['dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'esri/map', 'esri/tasks/BufferParameters', 'esri/tasks/GeometryService', 'esri/graphic', 'esri/symbols/SimpleFillSymbol', 'esri/symbols/SimpleLineSymbol', 'esri/Color', 'dojo/_base/array', 'dojo/_base/lang', 'jimu/dijit/CheckBox', 'dojo/domReady!' ], function (declare, _WidgetsInTemplateMixin, BaseWidget, Map, BufferParameters, GeometryService, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, array, lang) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget, _WidgetsInTemplateMixin], { // Custom widget code goes here name: 'BufferTool', baseClass: 'jimu-widget-buffertool', distances: null, clickEvt: null, gsvc: null, postCreate: function () { this.inherited(arguments); this.distances = []; this.gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); }, _onChkboxesClicked: function() { this.distances = []; if(this.cbx05.getValue()){ this.distances.push(0.5); } if(this.cbx10.getValue()){ this.distances.push(1); } if(this.cbx15.getValue()){ this.distances.push(1.5); } if(this.cbx20.getValue()){ this.distances.push(2); } }, _clearall: function() { console.log("button clicked"); this.distances = []; this.map.graphics.clear(); this.cbx05.setValue(false); this.cbx10.setValue(false); this.cbx15.setValue(false); this.cbx20.setValue(false); }, //--------------------------------------- startup: function () { this.inherited(arguments); console.log('startup'); }, onClose: function(){ console.log('onClose'); this.clickEvt.remove(); }, onOpen: function(){ this.clickEvt = this.map.on('click', lang.hitch(this, function (evt) { this.map.graphics.clear(); var params = new BufferParameters(); params.geometries = [evt.mapPoint]; //buffer in linear units such as meters, km, miles etc. params.distances = this.distances; params.unit = GeometryService.UNIT_STATUTE_MILE; params.outSpatialReference = this.map.spatialReference; if(this.distances.length === 0){ return false; } this.gsvc.buffer(params, lang.hitch(this, function (geoms) { geoms.reverse(); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 255, 0.65]), 2), new Color([0, 0, 255, 0.35]) ); var symbol2 = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.65]), 2), new Color([255, 0, 0, 0.35]) ); var symbol3 = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255, 0.65]), 2), new Color([0, 0, 255, 0.35]) ); var symbol4 = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0, 0.65]), 2), new Color([255, 0, 0, 0.35]) ); var syms = [symbol, symbol2, symbol3, symbol4]; var graphic; array.map(geoms, lang.hitch(this, function(bufferGeom, index){ graphic = new Graphic(bufferGeom, syms[index]); this.map.graphics.add(graphic); })); })); })); } }); });
Hi Robert!
Thank you for your help! I wish I had been able to figure this out without having to ask for your help so much ><
I do have several questions, if that's ok. If they're too broad or confusing, please let me know.
1. According to dojo documentation, _WidgetsInTemplateMixin goes along with _TemplatedMixin. How can this module be called by itself? *WidgetsInTemplateMixin is used with templated widgets, I think. So is this widget template invoked by jimu/BaseWidget? (where does "jimu" come from?)
2. What is the difference between a sub-widget and a DOM node?
3. How come you used jimu/dijit/CheckBox rather than dijit/form/CheckBox? when I google jimu/dijit/CheckBox I only get dojo/form/CheckBox
4. this.distances in _onChkboxesClicked looks like a local variable. How can params.distances see this.distances?
5. What does a leading underscore do for a function? Make it private?
Thank you!
TA
TA,