Ok... So I'm working on my first widget. Using Robert Scheitlin, GISP -'s recommendations.
Widgets Purpose
This widget needs to have a button, and two input fields. The user enters numbers in the fields, selects distance TYPE (Miles or Feet), presses the button, and clicks on the map to create a buffer set. The widget should generate TWO buffers that are transparent and overlap each other. Those two buffers should be as large as the two numbers in the input fields.
So if the user enters 1000, and 3000 (the most likely buffer range for this widget) and selects FEET from the distance TYPE then clicks on the map the widget should generate two buffers. One that is a 1,000 foot buffer and a 3,000 foot buffer around that initial click point.
Contents
So what I have so far is this:
manifest.json
{
"name": "cotBuffer",
"2D": true,
"3D": false,
"platform": "HTML",
"version": "0.1",
"wabVersion": "2.1",
"author": "Rev. Brian Scott O'keefe",
"description": "This is the City of Tulsa's first widget. It serves a single purpose to draw two buffers from one click that are printable.",
"copyright": "",
"license": "http://www.apache.org/licenses/LICENSE-2.0",
"properties": {
"inPanel":true,
"hasLocale": true,
"hasStyle":true,
"hasConfig":true,
"hasUIFile":true,
"hasSettingPage":true,
"hasSettingUIFile":true,
"hasSettingLocale":true,
"hasSettingStyle":true,
"IsController":false
}
}
style.css
button{
margin:2px;
cursor:pointer;
}
Widget.html
<div>
<div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
<button type="button" class="tool" id="point">Point</button>
<br/>
<hr />
<div><b>Buffer Parameters</b></div>
First Buffer Distance: <input type="text" id="firstDistance" size="5" value="1000" /><br />
First Buffer Distance: <input type="text" id="secondDistance" size="5" value="3000" />
<select id="unit" style="width:100px;">
<option value="UNIT_STATUTE_MILE">Miles</option>
<option value="UNIT_FOOT">Feet</option>
</select><br />
<button type="button" id="clearGraphics">Clear Graphics</button>
</div>
Widget.js
define([
'dojo/_base/declare',
'jimu/BaseWidget',
"dojo/dom",
"dojo/_base/array",
"dojo/parser",
"dojo/query",
"dojo/on",
"esri/Color",
"esri/config",
"esri/map",
"esri/graphic",
"esri/geometry/normalizeUtils",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"
],
function(
declare,
BaseWidget,
dom,
array,
parser,
query,
on,
Color,
esriConfig,
Map,
Graphic,
normalizeUtils,
GeometryService,
BufferParameters,
Draw,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol
) {
return declare(
[BaseWidget],
{
baseClass: 'jimu-widget-customwidget',
name: 'cotBuffer',
tb: '',
startup: function() {
this.inherited(arguments);
on(dom.byId("clearGraphics"), "click", function()
{
if(this.map){
this.map.graphics.clear();
}
});
query(".tool").on("click", function(evt)
{
if(this.tb)
{
this.tb.activate(evt.target.id);
}
});
this.initToolbar();
console.log('startup');
},
initToolbar: function (evtObj) {
this.tb = new Draw(evtObj.map);
this.tb.on("draw-end", createCOTBuffers);
},
createCOTBuffers: function(evtObj) {
this.tb.deactivate();
var geometry = evtObj.geometry, symbol;
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1), new Color([0,255,0,0.25]));
var graphic = new Graphic(geometry, symbol);
this.map.graphics.add(graphic);
var params = new BufferParameters();
params.distances = [ dom.byId("firstDistance").value, dom.byId("secondDistance").value ];
params.outSpatialReference = this.map.spatialReference;
params.unit = GeometryService[dom.byId("unit").value];
normalizeUtils.normalizeCentralMeridian([geometry]).then(function(normalizedGeometries)
{
var normalizedGeometry = normalizedGeometries[0];
params.geometries = [normalizedGeometry];
esriConfig.defaults.geometryService.buffer(params, showCOTBuffers);
});
},
showCOTBuffers: function (bufferedGeometries) {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol
(
SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0,0.65]), 2
),
new Color([255,0,0,0.35])
);
array.forEach(bufferedGeometries, function(geometry)
{
var graphic = new Graphic(geometry, symbol);
this.map.graphics.add(graphic);
});
}
});
});
I was at the Dev Summit and I remember the KeyNote speaker saying, "Don't use THIS in your Javascript." I'm definitely rusty on my Javascript but I tried to leave out this and suddenly I can't reference the map object...
But I'm having more issues than that...
I'm basing this Widget off of a JSAPI reference.
Geometry Service - Buffer | ArcGIS API for JavaScript 3.18
Any help would be appreciated.
