Drawing line with lat and lon in array + Icon

[AhmadMizan]

Sorry for asking this noob question, because I cant find in documentation . Im new in JavaScript..

My question is how to draw line with symbol or icon with lat and lon information using script. In documentation only show me to use drawing tool.. But I need script example, that could help me a lot.

for example my array in php store 10 lat and lon information and need to be drow on map.

Hope someone can help me on this.

[JohnGravois]

1. pass the coordinate values in when instantiating a new polyline geometry object
2. pass the geometry to a new graphic (which also has a symbol defined)
3. add it to the map

[AhmadMizan]

Thanks for your reply.

there are way more organized to me create this draw line? example code perhaps .. I'm not sure I can understand tutorial fraction like that.

the output that I'm interest like this one --> http://developers.arcgis.com/en/javascript/samples/renderer_temporalClassBreaks/

really appreciate with your reply.:D

[JohnGravois]

in the sample you just linked to, none of the geometries which represent the paths of hurricanes are written into the code of the web application.  rather, they are retrieved from a running map service based on the time extent.

[derekswingley1]

Here's a very simple example of putting a line graphic on a map:  http://jsfiddle.net/hBa6v/

More info:
�??at minimum, to see shapes on a map, you need a graphic with a geometry and a symbol
�??the example above uses a polyline and a simple line symbol

[AhmadMizan]

John,

actually, for sample link I gave to you.. I'm interested with the format graphic on map.. that what im looking for.. point connect to point with line and have a rounded symbol that can show information..

Derek,

thanks for the example.. that give me a bit understanding.. I try to add symbol,attribute and info template.. but it give me nothing on map.. Im really sure that I used it wrong.. can you guide me?..

    dojo.require("esri.map");
          
    var map;
    
    function init() {
      var options = { 
        basemap: "gray",
        center: [114.772, 5.12609],
        zoom: 11
      };
      // Create map
      map = new esri.Map("mapDiv",options);

      //var line = new esri.geometry.Polyline();
      line.addPath([ [115.246, 5.25803], [115.2462, 5.22964],[115.2109,5.19103] ]);
      //var sym = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color("blue"));

      var sms = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(new dojo.Color([255,0,0,0.5]));
      var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"Mesa Mint"};
      var infoTemplate = new esri.InfoTemplate("Vernal Pool Locations","Latitude: ${Ycoord} <br/>Longitude: ${Xcoord} <br/>Plant Name:${Plant}");

    

      // create a new graphics layer
          var gLayer = new esri.layers.GraphicsLayer({ "id": "scratch" });
          // create a graphic
          var graphic = new esri.Graphic(line,sms,attr,infoTemplate);
          //var graphic = new esri.Graphic(line,sym);
          // add it to the graphics layer
          gLayer.add(graphic);
          // add the graphics layer to the map
          map.addLayer(gLayer);
 

    }

    dojo.addOnLoad(init);

[JohnGravois]

since the coordinates of your polyline are in a different coordinate system than the Web Mercator basemap, you will have to specify the spatial reference of the polyline explicitly.

this is a little confusing, because the map constructor option "center" will translate latitude and longitude to web mercator values automatically, but the polyline object does not.

new esri.geometry.Polyline(new esri.SpatialReference({wkid:4326}));

[JohnGravois]

i take that back.  derek used a web mercator basemap in his sample as well, so there must be something else going on.

[AhmadMizan]

There three point in script are connected well in map.. but I failed to make a symbol,attribute and info template. Im only interest to make every each point are connected and have and information box.. same like picture on the attachment..

 dojo.require("esri.map");
          
    var map;
    
    function init() {
      var options = { 
        basemap: "gray",
        center: [114.772, 5.12609],
        zoom: 11
      };
      // Create map
      map = new esri.Map("mapDiv",options);

      var p1 = new esri.geometry.Point(115.246, 5.25803, map.spatialReference);
      var p2 = new esri.geometry.Point(115.2462, 5.22964, map.spatialReference);

      var line = new esri.geometry.Polyline(new esri.SpatialReference({wkid:4326}));
       line.addPath([p1, p2]);
      var sym = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color("blue"));

     var gLayer = new esri.layers.GraphicsLayer({ "id": "scratch" });
          // create a graphic
     var graphic = new esri.Graphic(line,sym);
          // add it to the graphics layer
     gLayer.add(graphic);
          // add the graphics layer to the map
     map.addLayer(gLayer);

     }

    dojo.addOnLoad(init);

[derekswingley1]

i take that back.  derek used a web mercator basemap in his sample as well, so there must be something else going on.

With 3.3, if you don't specify a spatial reference when creating a geometry, it's assumed to be WGS84 (wkid 4326) coordinates.

Also with 3.3, if you add a graphic to a map that has a geographic geometry (again, wkid 4326), it's converted on the fly to web mercator so you don't have to worry about explicitly doing the conversion.