Draw a point with ArcGIS Javascript API

Question

I am currently trying to draw a point with the ArcGIS Javascript API.

Pretty much like this example, http://help.arcgis.com/en/webapi/javascript/arcgis/demos/toolbar/toolbar_draw.html, except the point will not be drawn with the mouse, but from an javascript object.

If we look at the code, we see that a geometry object/array is passed in the function.

function addToMap(geometry) {
    toolbar.deactivate();
    map.showZoomSlider();

    var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));

    var graphic = new esri.Graphic(geometry, symbol);
    map.graphics.add(graphic);
  }

If someone could write the structure for that object, and a method to draw the point (such as a button, with an onclick event, containing fixed xy coords)

Dumping geometry looks like this http://pastebin.com/P9wfL36b (ouch!)

This code will be used in a GPS tracking experiement, where I'll pull the current position from a database every 20 seconds or so. (details will not be covered in this post)

Bonus question: How do I convert long/lat to xy coords from the sample?

I use UTM zone 29N, wkid: 32629

Answer 1

Adding a point from a button click can be as simple as:

dojo.connect(dojo.byId('pointButton'), 'onclick', function() {
  map.graphics.add(new esri.Graphic(
    // Point coordinates are 0, 0
    new esri.geometry.Point(0, 0, map.spatialReference),
    new esri.symbol.SimpleMarkerSymbol()
  ));
});

And the pointButton node is:

<button id="pointButton">Click to add a point.</button>

To add a point when the map is clicked is pretty straightforward as well:

dojo.connect(map, 'onClick', function(evt) {
  map.graphics.add(new esri.Graphic(
    evt.mapPoint,
    new esri.symbol.SimpleMarkerSymbol()
  ));
});

Live example showing both here: http://jsfiddle.net/swingley/auyHf/

Regarding converting from lat, long to another coordinate system: if you're converting to or from lat, long to web mercator, there are client side methods available to do this: esri.geometry.geographicToWebMercator and esri.geometry.WebMercatorToGeographic. If you need to convert from lat, long to something other than web mercator, then the geometry service's project method is the way to go.

Answer 2

Each of the geometry types has a constructor that builds a new geometry object from JSON -- for example: Point. There's an example of a Point JSON object on that page.

For your second question, the recommended approach is to use a Geometry Service to reproject the point from SRID 4326 (long/lat) to the map's native coordinate system. See here for an example.

Answer 3

Sounds like your specific problem is that you have a lat/long coordinate and you need to place that on the map as geometry. Use the esri.Graphic(geometry, symbol, attributes, infoTemplate) constructor to make your graphic to put on the map.
If you follow the API reference sample, creating a point graphic from a lat/long is pretty straightforward.
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/graphic.htm#GraphicConst1
But, if you are pulling the point from a database using a web service, then it might be more straightforward to use the json example right below it. Have the web service construct the point json rather than constructing it client side. If you need to modify any part of the json after it is returned by the service, you can do that client side on the json before passing it to the graphic constructor.

var myPoint = {
    "geometry":{
        "x":-104.4140625,
        "y":69.2578125,
        "spatialReference":{"wkid":4326}
    },
    "attributes":{
        "XCoord":-104.4140625,
        "YCoord":69.2578125,
        "Plant":"Mesa Mint"
    },
    "symbol":{
        "color":[255,0,0,128],
        "size":12,
        "angle":0,
        "xoffset":0,
        "yoffset":0,
        "type":"esriSMS",
        "style":"esriSMSSquare",
        "outline":{
            "color":[0,0,0,255],
            "width":1,
            "type":"esriSLS",
            "style":"esriSLSSolid"
        }
    },
    "infoTemplate":{
        "title":"Vernal Pool Locations",
        "content":"Latitude: ${YCoord}<br/>Longitude: ${XCoord}<br/>Plant Name:${Plant}"
    }
};
var gra= new esri.Graphic(myPoint);