jimu drawbox default point symbol

wadsonmakari · ‎01-24-2017

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,

RobertScheitlin__GISP · ‎06-20-2019

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());
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BrantSollis2 · ‎06-25-2019

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

Drew · ‎01-24-2017

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

RobertScheitlin__GISP · ‎01-24-2017

Yep that would work too.