Clear Checkboxes and remove map click event

3118
3
Jump to solution
08-04-2015 01:06 PM
TaN
by
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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);

            }));

          }));

        }));

      }

    });

  });

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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);

            }));

          }));

        }));

      }

    });

  });

View solution in original post

TaN
by
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

TA,

  1. Yes _WidgetBase and _TemplatedMixin are invoked by jimu/BaseWidget
  2. The sub-widget is the js code that the html template is used by (i.e. data-dojo-attach-point="start" in the template means that in the Widget.js you can use this.start to get a reference to the html element from the template).
  3. I like the appearance of jimu/dijit/CheckBox over dijit/from/Checkbox
  4. The var this.Distances it a global var because of where it is declared in the Widget.js code
  5. The is really no private functions in JS but the leading underscore is a developer standard that says the function should be considered private.