This should be pretty simple but I know I am missing something. My custom DrawBox does not load on my widget. The widget just shows the loading icon
I want to basically modify the DrawBox dijit to use in a custom widget. More specifically, all I want is to show just 3 drawing options. Point, Line and Polygon.
I am testing this widget in the Demo Widgets app and my custom widget is in widgets/samplewidgets
I copied DrawBox.html and DrawBox.js into MyWidget folder
I have it all setup but the widget wont load. Here's my Widget.html
<div>
<label>${nls.selectParcelsLabel}</label>
<br>
<!-- <div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props='types:["point","polyline","polygon"],showClear:false' style="margin-top:5px;"></div> -->
<div data-dojo-attach-point="drawBox" data-dojo-type="widgets/samplewidgets/MyWidget/DrawBox" data-dojo-props='types:["point","polyline","polygon"],showClear:false' style="margin-top:5px;"></div>
<br>
<div class="jimu-btn clear-btn" data-dojo-attach-event="onclick:_onBtnClearClicked">${nls.clearButton}</div>
</div>And here's my Widget.js
define(['dojo/_base/declare',
'dijit/_WidgetsInTemplateMixin',
'jimu/BaseWidget',
'jimu/utils',
'./DrawBox',
'jimu/dijit/ViewStack',
'esri/tasks/GeometryService',
'esri/config',
'esri/graphic',
'esri/graphicsUtils',
'esri/geometry/Point',
'esri/geometry/Polyline',
'esri/geometry/Polygon',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleFillSymbol',
'esri/renderers/SimpleRenderer',
'esri/renderers/jsonUtils',
'esri/toolbars/draw',
'esri/request'],
function(declare, _WidgetsInTemplateMixin, BaseWidget, esriConfig,
utils, DrawBox, ViewStack, GeometryService, config, graphic, graphicsUtils,
Point, Polyline, Polygon, SimpleMarkerSymbol, SimpleFillSymbol, SimpleRenderer,
jsonUtils, draw, request, jimuUtils) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget, _WidgetsInTemplateMixin], {
// Custom widget code goes here
baseClass: 'jimu-widget-mywidget',
//this property is set by the framework when widget is loaded.
name: 'MyWidget',
//methods to communication with app container:
postCreate: function() {
this.inherited(arguments);
this.drawBox.setMap(this.map);
},
onClose: function() {
this.drawBox.deactivate();
},
_onBtnClearClicked: function() {
this.drawBox.clear();
},
});
});I modified DrawBox.html in the MyWidget folder like so. Basically commented out what I dont need
<div style="position:relative;width:100%;">
<div class="draw-items">
<div title="${nls.point}" data-geotype="POINT" data-commontype="point" class="draw-item point-icon"></div>
<div title="${nls.line}" data-geotype="LINE" data-commontype="polyline" class="draw-item line-icon"></div>
<!-- <div title="${nls.polyline}" data-geotype="POLYLINE" data-commontype="polyline" class="draw-item polyline-icon"></div> -->
<!-- <div title="${nls.freehandPolyline}" data-geotype="FREEHAND_POLYLINE" data-commontype="polyline" class="draw-item freehand-polyline-icon"></div> -->
<!-- <div title="${nls.triangle}" data-geotype="TRIANGLE" data-commontype="polygon" class="draw-item triangle-icon"></div> -->
<!-- <div title="${nls.extent}" data-geotype="EXTENT" data-commontype="polygon" class="draw-item extent-icon"></div> -->
<!-- <div title="${nls.circle}" data-geotype="CIRCLE" data-commontype="polygon" class="draw-item circle-icon"></div> -->
<!-- <div title="${nls.ellipse}" data-geotype="ELLIPSE" data-commontype="polygon" class="draw-item ellipse-icon"></div> -->
<div title="${nls.polygon}" data-geotype="POLYGON" data-commontype="polygon" class="draw-item polygon-icon"></div>
<!-- <div title="${nls.freehandPolygon}" data-geotype="FREEHAND_POLYGON" data-commontype="polygon" class="draw-item freehand-polygon-icon"></div> -->
<!-- <div title="${nls.text}" data-geotype="POINT" data-commontype="text" class="draw-item text-icon" data-dojo-attach-point="textIcon"></div> -->
<span class="drawings-clear jimu-float-trailing" data-dojo-attach-point="btnClear">${nls.clear}</span>
</div>
</div>No changes were made to DrawBox.js
Can someone help me why my DrawBox wont load?
I am sure I am missing something.
Thanks!
