Draw line using esri.Geometry.Polyline

RamakrishnanDurairajan · ‎01-06-2013

Hello all,

I'm trying to draw a line by entering <lon1,lat1> and <lon2,lat2> in text boxes. Please find below the code -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />     <title>Lat/Lon</title>          <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>          <script type="text/javascript">       dojo.require("esri.map");              var map;              function init() {         map = new esri.Map("map");         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"));       }        function addLineToMap(lon1, lat1, lon2, lat2) {   map.graphics.add(           new esri.Graphic(             new esri.geometry.Point(lon1, lat1, map.spatialReference),             new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0,0.5]))           )         )      map.graphics.add(           new esri.Graphic(             new esri.geometry.Point(lon2, lat2, map.spatialReference),             new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0,0.5]))           )         )      map.graphics.add(           new esri.Graphic(    new esri.geometry.Polyline(new esri.geometry.Point(lon1, lat1, map.spatialReference),new esri.geometry.Point(lon2, lat2, map.spatialReference),map.spatialReference),    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 3)     )         )       }              dojo.addOnLoad(init);     </script>   </head>   <body class="tundra">     longitude1 <input type="text" id="lon1" value="-122.44400024414062" />     latitude1 <input type="text" id="lat1" value="37.75382995605469" />       longitude2 <input type="text" id="lon2" value="-112.44400024414062" />     latitude2 <input type="text" id="lat2" value="27.75382995605469" />       <button onclick="addLineToMap(parseFloat(dojo.byId('lon1').value), parseFloat(dojo.byId('lat1').value),parseFloat(dojo.byId('lon2').value), parseFloat(dojo.byId('lat2').value));">Add Line to Map</button>     <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>   </body> </html>

I see the points, but I don't see the line. Any help would be appreciated, thanks!

Ram

KellyHutchins · ‎01-06-2013

Hi Ram,

If you take a look at the API reference for the Polyline class constructor you'll see that it accepts either a spatial reference or a json object that defines the polyline. In your code you are entering the start and end point too which it doesn't understand. Try revising your code to something like this:

      var point1 = new esri.geometry.Point(lon1, lat1, map.spatialReference);       var point2 = new esri.geometry.Point(lon2, lat2, map.spatialReference);       var line = new esri.geometry.Polyline(map.spatialReference);       line.addPath([point1, point2]);       var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),3);       var pointSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5]));       map.graphics.add(new esri.Graphic(point1, pointSymbol));       map.graphics.add(new esri.Graphic(point2, pointSymbol));       map.graphics.add(new esri.Graphic(line, lineSymbol))

View solution in original post

KellyHutchins · ‎01-06-2013

Hi Ram,

If you take a look at the API reference for the Polyline class constructor you'll see that it accepts either a spatial reference or a json object that defines the polyline. In your code you are entering the start and end point too which it doesn't understand. Try revising your code to something like this:

      var point1 = new esri.geometry.Point(lon1, lat1, map.spatialReference);       var point2 = new esri.geometry.Point(lon2, lat2, map.spatialReference);       var line = new esri.geometry.Polyline(map.spatialReference);       line.addPath([point1, point2]);       var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),3);       var pointSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5]));       map.graphics.add(new esri.Graphic(point1, pointSymbol));       map.graphics.add(new esri.Graphic(point2, pointSymbol));       map.graphics.add(new esri.Graphic(line, lineSymbol))

RamakrishnanDurairajan · ‎01-06-2013

Awesome, it works! Thanks Kelly 🙂