Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question

3 Answers 3

up vote 8 down vote accepted

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.

share|improve this answer
    
Thanks a lot. Drawing the point works like a charm. In the conversion, I have been trying the geometry service's project method. The map I'm using is based on UTM zone 29N, wkid 32629. Using the geommetry service only gives me "X" = NaN, "Y = NaN". Any ideas? I tried the exact same code on the world map bit.ly/qxPfVm (wkid:102100), worked fine. –  Ragnar123 Aug 3 '11 at 12:20
    
It works with 32629 or 102100. I posted an example to a similar question a while back here: forums.arcgis.com/threads/… –  Derek Swingley Aug 3 '11 at 14:00
    
Yes, I see it works with 32629 and 102100, but how about conversion from 4326 to 32629? I keep getting NaN values –  Ragnar123 Aug 3 '11 at 18:26
    
It should still work; maybe you should create a new question so you can provide your code and, ideally, the URL w/URL parameters that is being sent to your service. –  Derek Swingley Aug 3 '11 at 19:52

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.

share|improve this answer
    
Thank you, looks good. Will try, and return with either further questions or a checkmark :-) –  Ragnar123 Aug 1 '11 at 15:22
    
If you're using the 1.4 or later API, why wouldn't you use the esri.geometry.geographicToWebMercator(geometry) method instead of calling the geometry service? –  kenbuja Aug 1 '11 at 17:52
    
@kenbuja - I didn't realize they had that, thanks! I agree, that would definitely make more sense if you are converting between geographic and Web Mercator. –  mrohlf Aug 1 '11 at 19:08

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);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.