Drawing line with lat and lon in array + Icon

3384
12
Jump to solution
03-19-2013 10:26 AM
AhmadMizan
New Contributor
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.
0 Kudos
1 Solution

Accepted Solutions
JohnGravois
Frequent Contributor
try this...

function init() {        var options = {         basemap : "gray",         center : [115.246, 5.25803],         zoom : 11        };        // Create map        map = new esri.Map("mapDiv", options);         var p1 = new esri.geometry.Point(115.246, 5.25803);        var p2 = new esri.geometry.Point(115.2462, 5.22964);           var line = new esri.geometry.Polyline();        line.addPath([p1, p2]);           var pointSym = new esri.symbol.SimpleMarkerSymbol();   var lineSym = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color("blue"));   var infoTemplate = new esri.InfoTemplate("title","content");           var gLayer = new esri.layers.GraphicsLayer({          "id" : "scratch"         });           // create a graphic        var pt1Graphic = new esri.Graphic(p1, pointSym);   var pt2Graphic = new esri.Graphic(p2, pointSym);      pt1Graphic.setInfoTemplate(infoTemplate);   pt2Graphic.setInfoTemplate(infoTemplate)      var lineGraphic = new esri.Graphic(line, lineSym);           // add it to the graphics layer   gLayer.add(lineGraphic);   gLayer.add(pt1Graphic);   gLayer.add(pt2Graphic);           // add the graphics layer to the map        map.addLayer(gLayer);       }

View solution in original post

0 Kudos
12 Replies
JohnGravois
Frequent Contributor
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
0 Kudos
AhmadMizan
New Contributor
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
0 Kudos
JohnGravois
Frequent Contributor
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.
0 Kudos
derekswingley1
Frequent Contributor
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
0 Kudos
AhmadMizan
New Contributor
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);
0 Kudos
JohnGravois
Frequent Contributor
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}));
0 Kudos
JohnGravois
Frequent Contributor
i take that back.  derek used a web mercator basemap in his sample as well, so there must be something else going on.
0 Kudos
AhmadMizan
New Contributor
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);

0 Kudos
derekswingley1
Frequent Contributor
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.
0 Kudos