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

646
3
Jump to solution
06-23-2017 12:51 PM
BenjaminHarloe
New Contributor II

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. 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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");
        }
    });
});

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor II

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. 

0 Kudos
KeithGerhartz1
Occasional Contributor II

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