topic Re: Drawing line with lat and lon in array + Icon in ArcGIS JavaScript Maps SDK Questions

Drawing line with lat and lon in array + Icon

AhmadMizan — Tue, 19 Mar 2013 17:26:27 GMT

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.

Re: Drawing line with lat and lon in array + Icon

JohnGravois — Tue, 19 Mar 2013 21:44:13 GMT

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

Re: Drawing line with lat and lon in array + Icon

AhmadMizan — Thu, 21 Mar 2013 15:35:48 GMT

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

Re: Drawing line with lat and lon in array + Icon

JohnGravois — Thu, 21 Mar 2013 16:37:49 GMT

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.

Re: Drawing line with lat and lon in array + Icon

derekswingley1 — Thu, 21 Mar 2013 16:59:41 GMT

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

Re: Drawing line with lat and lon in array + Icon

AhmadMizan — Sun, 12 Dec 2021 01:24:23 GMT

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

Re: Drawing line with lat and lon in array + Icon

JohnGravois — Thu, 21 Mar 2013 18:56:09 GMT

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

Re: Drawing line with lat and lon in array + Icon

JohnGravois — Thu, 21 Mar 2013 19:07:52 GMT

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

Re: Drawing line with lat and lon in array + Icon

AhmadMizan — Sun, 12 Dec 2021 01:24:25 GMT

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

Re: Drawing line with lat and lon in array + Icon

derekswingley1 — Thu, 21 Mar 2013 20:01:25 GMT

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.

Re: Drawing line with lat and lon in array + Icon

AhmadMizan — Thu, 21 Mar 2013 21:05:57 GMT

so Derek, to make appear same like picture I attach before i have to add this line code?
http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/graphic.html

I added before, but nothing happened on map..

there any sample that can show me how to do this?.. it really help me with example..

Re: Drawing line with lat and lon in array + Icon

JohnGravois — Thu, 21 Mar 2013 22:36:27 GMT

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

Re: Drawing line with lat and lon in array + Icon

AhmadMizan — Sun, 24 Mar 2013 17:26:21 GMT

Thanks John,

I got better view to understand now.. thanks for sharing the code..:)