AnsweredAssumed Answered

Draw line using esri.Geometry.Polyline

Question asked by rkrish on Jan 6, 2013
Latest reply on Jan 6, 2013 by rkrish
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

Outcomes