How to get the Lat/Long coordinates of a point drawn with the drawbox dijit in a custom widget

[BenjaminHarloe]

I have been trying to create a custom widget that allows the user to click on the map and pass the lat/long coordinates of that click into a URL for an internal tool. I am really struggling with AMD javascript and understanding how to use the dojo framework. I have created a custom widget that essentially displays the way I want it to, and allows the user to draw a point. I have been unable to figure out how to get that point's lat/long for use in the link. Basically I know that I need a function that upon click erases the previous point, draws a new point, gets that point's lat/long, and passes that along to another function. I've pretty much ran out of ideas for trying to figure out how to do the step getting lat/long from that point specifically. I'm sure this has to do with my poor understanding of dojo, but unfortunately I don't have the time to dive deep into understanding dojo in my current capacity. Any advice on how to implement the function I'm describing would be greatly appreciated. My current widget is attached in a zip file. 

[RobertScheitlin__GISP · Accepted solution]

Ben,

   Here is a start for you on that issue:

define(['dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'dojo/_base/lang', 'dojo/_base/array',
        'dojo/_base/html', 'dojo/i18n!esri/nls/jsapi', 'dojo/on', 'dojo/Deferred',
        'dojo/data/ObjectStore', 'dojo/store/Memory', 'dojo/json',
        'dijit/form/Form', 'dijit/form/Select', 'dijit/form/Button', 'dijit/form/TextBox', 'dijit/form/DateTextBox',
        'jimu/BaseWidget', 'jimu/MapManager', 'jimu/LayerInfos/LayerInfos', 'jimu/dijit/TabContainer',
        'esri/graphic', 'esri/geometry/Polyline', 'esri/geometry/Polygon', 'esri/layers/GraphicsLayer', 'esri/layers/FeatureLayer',
        'esri/tasks/GPMessage', 'esri/tasks/Geoprocessor', 'esri/tasks/JobInfo', 'esri/layers/ImageParameters', 'esri/request', 'esri/geometry/Extent',
        'jimu/dijit/DrawBox'
    ],
function(declare, _WidgetsInTemplateMixin, BaseWidget, lang,
    array, html, esriBundle, on, Deferred,
    ObjectStore, Memory, json,
    Form, Select, Button, TextBox, DateTextBox,
    BaseWidget, MapManager, LayerInfos, TabContainer,
    Graphic, Polyline, Polygon, GraphicsLayer, FeatureLayer,
    GPMessage, Geoprocessor, JobInfo, ImageParameters, esriRequest, Extent, Draw) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
        baseClass: 'jimu-widget-daulmap',
        name: 'Daulmap',
        tabs: null,
        _graphicsLayer: null,
        _pointLayer: null,
        _polylineLayer: null,
        _polygonLayer: null,
      
        postCreate: function() {
          this.inherited(arguments);
          this._initLayers();
          this.drawBox.setMap(this.map);
          this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this.getDrawPnt)));
        },
      
        getDrawPnt: function(graphic){
          if(graphic.geometry.type === "point"){
            var pnt = graphic.geometry;
            var Lat = pnt.getLatitude();
            var Lon = pnt.getLongitude();
            //Now pass it to your url
          }
        },

        startup: function() {
          this.inherited(arguments);

          console.log('startup');

          this.tabs = new TabContainer({
              tabs: [{
                  title: "Draw a point on the map",
                  content: this.DaulmapNode
              }],
              selected: "Draw a point on the map"
          });
          this.tabs.placeAt(this.tabsContainer);
          this.tabs.startup();

        },

        _initLayers: function() {
          this._graphicsLayer = new GraphicsLayer();
          this._pointLayer = new GraphicsLayer();
          this._polylineLayer = new GraphicsLayer();
          this._polygonLayer = new GraphicsLayer();
          this.map.addLayer(this._polygonLayer);
          this.map.addLayer(this._polylineLayer);
          this.map.addLayer(this._pointLayer);
        },

        _buttonClick: function() {
          console.log("click");
        }
    });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[BenjaminHarloe]

Hi Robert, this is exactly what I needed. I was able to take your changes and implement the rest of the functionality that I was trying to build. Thank you so much for all the help. 

[KeithGerhartz1]

Hello Benjamin. I am looking to do the same thing and wondering if you might share what you ended up doing? Thanks much.