topic Re: jimu drawbox default point symbol in Web AppBuilder Custom Widgets Questions

jimu drawbox default point symbol

wadsonmakari — Tue, 24 Jan 2017 17:55:29 GMT

I am using the jimu drawbox dijit to draw points, lines or polygons on custom widget that I am developing. Is there a way of setting the symbol properties of the graphics drawn. When I select to draw a point for instance the point is blue the transparency set to 50% size is 24.

I would like to change some of the properties but I can't figure out how, I have tried the following

this.drawBox.setPointSymbol(this.config.point_symbol);

where point_symbol is define as

{

"color":{"r":0,"g":0,"b":128,"a":0.5},

"size":12,

"type":"simplemarkersymbol",

"style":"circle",

"outline":{

"color":{"r":0,"g":0,"b":128,"a":1},

"width":1,

"type":"simplelinesymbol",

"style":"solid"

}

"xoffset":0,

"yoffset":0

}

When I set the point symbol as shown above the point is not drawn on the map. Removing the line above the point is drawn with default properties that I would like to change.

Regards,

Re: jimu drawbox default point symbol

RobertScheitlin__GISP — Tue, 24 Jan 2017 18:03:04 GMT

Wadson,

That method is expecting a symbol class and not just a json string.

Try:

this.drawBox.setPointSymbol(new SimpleMarkerSymbol(this.config.point_symbol));‍

Re: jimu drawbox default point symbol

Drew — Tue, 24 Jan 2017 18:04:17 GMT

If you look in the code you will see there are some public properties available to do this..

pointSymbol:null,
polylineSymbol:null,
polygonSymbol:null,
textSymbol:null,

When you create the widget use those properties to define the symbols.

i.e.

var db = new DrawBox({

pointSymbol: myPointSymbol,

polylineSymbol: myPolylineSymbol,

.....

},node)

Drew

Re: jimu drawbox default point symbol

RobertScheitlin__GISP — Tue, 24 Jan 2017 18:15:40 GMT

Yep that would work too.

Re: jimu drawbox default point symbol

wadsonmakari — Wed, 25 Jan 2017 09:42:13 GMT

Thanks Robert and Andrew that has worked.

Re: jimu drawbox default point symbol

BrantSollis2 — Wed, 19 Jun 2019 19:42:32 GMT

Robert,

I am trying to do something very similar to what is being discussed here. I feel like I am very close to accomplishing it, but what I am unsure of is where point_symbol should be defined? In a config file? Within the widget.js file?
My apologies for such an utterly basic question.

Thanks!

Re: jimu drawbox default point symbol

RobertScheitlin__GISP — Wed, 19 Jun 2019 19:57:39 GMT

In the config file

Re: jimu drawbox default point symbol

BrantSollis2 — Sun, 12 Dec 2021 10:24:45 GMT

Thanks, Robert. This is what I have been trying, but when I open the widget it does not show the point symbol chooser, and defaults to the normal 1st option in the chooser. It does not show account for any of the changed parameters in the config file. Any Ideas? Below is what I have added to the config.json file.

  "point_symbol":[{
    "color":{"r":0,"g":250,"b":0,"a":1},
    "size":58,
    "type":"simplemarkersymbol",
    "style":"circle",
    "outline":{
         "color":{"r":0,"g":128,"b":0,"a":1},
         "width":1,
         "type":"simplelinesymbol",
         "style":"solid"
      }
    "xoffset":0,
    "yoffset":0
  }]‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks again.

Re: jimu drawbox default point symbol

RobertScheitlin__GISP — Wed, 19 Jun 2019 20:40:27 GMT

Brant,

The point symbol should not be in any array. You have your symbol inside square brackets (an array).

Re: jimu drawbox default point symbol

BrantSollis2 — Wed, 19 Jun 2019 20:50:45 GMT

I am really appreciating the suggestions. Unfortunately, removing the square brackets did not change anything. The code above(minus the array) is pasted before the final curly bracket in the /widgets/Draw/config.json file. The line in the /widgets/Draw/Widget.js file matches what you have included above.

Re: jimu drawbox default point symbol

RobertScheitlin__GISP — Wed, 19 Jun 2019 21:05:15 GMT

Brant,

OK this is the problem

The code above(minus the array) is pasted before the final curly bracket in the /widgets/Draw/config.json file

The config file that the widget uses after it is added to the app is not that file it is the json file that is in the apps configs/Draw/config_X.json

Re: jimu drawbox default point symbol

BrantSollis2 — Wed, 19 Jun 2019 22:05:19 GMT

Hey Robert,

Unfortunately, it's still no-go. I placed the point_symbol information in the correct config file, and it still is ignoring my parameters. I hate to keep taking up your time... Is there some resource I can go to to learn more about how the line in Widget.js knows to go looking in the config.json file, or a resource for how the point symbol should be properly formatted?

Thanks again!

-Brant

Re: jimu drawbox default point symbol

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:24:49 GMT

Brant,

Some of these reply assume that you have some programming experience, so I failed to mention that you have to add the SimpleMarkerSymbol class to the widget define array. Most likely you have errors in your browsers web console that would clue you into the issue in the code. Have you checked your browsers web console?

Next your json for the point_symbol has a syntax error. You can use an online json linter to check for syntax errors in the future, just Google json linter. You were missing a comma after the outline parameter

"point_symbol": {
    "color":{"r":0,"g":250,"b":0,"a":1},
    "size":58,
    "type":"simplemarkersymbol",
    "style":"circle",
    "outline":{
         "color":{"r":0,"g":128,"b":0,"a":1},
         "width":1,
         "type":"simplelinesymbol",
         "style":"solid"
    },
    "xoffset":0,
    "yoffset":0
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So here is a snippit of my json file. notice I just added the point_symbol to the end of the file before the last }

...
      "unit": "SQUARE_FEET",
      "abbr": "sq ft"
    },
    {
      "unit": "SQUARE_YARDS",
      "abbr": "sq yd"
    }
  ],
  "isOperationalLayer": false,
  "point_symbol": {
    "color":{"r":0,"g":250,"b":0,"a":1},
    "size":58,
    "type":"simplemarkersymbol",
    "style":"circle",
    "outline":{
         "color":{"r":0,"g":128,"b":0,"a":1},
         "width":1,
         "type":"simplelinesymbol",
         "style":"solid"
      },
    "xoffset":0,
    "yoffset":0
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And here is my addition of SimpleMarkerSymbol to the Widget.js (lines 41 and 56)

define([
    'dojo/_base/declare',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidget',
    'dojo/on',
    'dojo/keys',
    'dojo/Deferred',
    // 'dojo/number',
    'dojo/i18n',
    'dojo/i18n!esri/nls/jsapi',
    'dojo/_base/html',
    'dojo/_base/lang',
    // 'dojo/_base/Color',
    'dojo/_base/array',
    'dojo/dom-style',
    'esri/config',
    'esri/graphic',
    'esri/geometry/Polyline',
    'esri/geometry/Polygon',
    'esri/symbols/TextSymbol',
    'esri/symbols/Font',
    'esri/units',
    'esri/geometry/webMercatorUtils',
    'esri/tasks/ProjectParameters',
    'esri/SpatialReference',
    'esri/request',
    'esri/geometry/geodesicUtils',
    'esri/tasks/GeometryService',
    'esri/tasks/AreasAndLengthsParameters',
    'esri/tasks/LengthsParameters',
    'esri/undoManager',
    'esri/OperationBase',
    'esri/layers/GraphicsLayer',
    'esri/layers/FeatureLayer',
    'jimu/dijit/ViewStack',
    'jimu/utils',
    'jimu/dijit/ToggleButton',
    'jimu/SpatialReference/wkidUtils',
    'jimu/LayerInfos/LayerInfos',
    'jimu/dijit/LoadingIndicator',
    'esri/symbols/SimpleMarkerSymbol',
    'jimu/dijit/DrawBox',
    'jimu/dijit/SymbolChooser',
    'jimu/dijit/ColorPicker',
    'jimu/dijit/formSelect',
    'dijit/form/NumberSpinner'
  ],
  function(declare, _WidgetsInTemplateMixin, BaseWidget, on, keys, Deferred, dojoI18n, esriNlsBundle,
    html, lang, array, domStyle,
    esriConfig, Graphic, Polyline, Polygon, TextSymbol, Font, esriUnits, webMercatorUtils,
    EsriProjectParameters,
    EsriSpatialReference,
    EsriRequest,
    geodesicUtils, GeometryService, AreasAndLengthsParameters, LengthsParameters, UndoManager,
    OperationBase, GraphicsLayer, FeatureLayer, ViewStack, jimuUtils, ToggleButton, wkidUtils, LayerInfos,
      LoadingIndicator, SimpleMarkerSymbol) {
    //custom operations
    var customOp = {};
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and finally the _setDrawDefaultSymbols function:

      _setDrawDefaultSymbols: function() {
        this.drawBox.setPointSymbol(this._getPointSymbol());
        if(this.config.point_symbol) {
          this.drawBox.setPointSymbol(new SimpleMarkerSymbol(this.config.point_symbol));
        }
        this.drawBox.setLineSymbol(this._getLineSymbol());
        this.drawBox.setPolygonSymbol(this._getPolygonSymbol());
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: jimu drawbox default point symbol

BrantSollis2 — Tue, 25 Jun 2019 19:51:30 GMT

Hey Robert,

My apologies for not getting back sooner, but thank you so much for all the time you put into helping me get over the hurdle of getting started on this customization. After fixing the little things I was missing, I was able to accomplish pretty much exactly what I wanted and go on to customizing a couple of other widgets as well. Your patience and input was much appreciated!!

Thanks again,
Brant