Unable to draw a polyline on map

ShaningYu · ‎01-10-2014

Borrowed someone script that could draw a polyline on map (defined here: var polyline) in Portand, WA. I added var polyline2 with the values, but this line was not drawing. I am new in JS GIS. Please help if you can share your experience. Thanks in advance.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Build your first application</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
        <style type="text/css">
            html, body, #map {
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <script src="http://js.arcgis.com/3.8/"></script>
        <script>
            var map;
            require(["esri/map", "dojo/ready", "dojo/on", "esri/geometry/Polyline", "esri/graphic", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"], function(Map, ready, on, Polyline, Graphic, SimpleLineSymbol) {

        var map = new Map("map", {
          center: [-77.1, 38.9], //longitude, latitude
          zoom: 11,
          basemap: "streets",
          slider: true, //default
          sliderPosition: "top-left" //default
        });

        ready(function (){
          on(map, "load", drawPath);
          function drawPath(){
         var polylineJson = { "paths":[[[-122.68,45.53], [-122.58,45.55], [-122.57,45.58],[-122.53,45.6]]], "spatialReference":{"wkid":4326}};
            var polylineJson2 = { "paths":[[[201394.01178484457,173661.08635829584],[201392.0117168416,173661.08690949593],[ 201388.01158083565, 173661.08801189612 ],[ 201386.01151283266, 173661.08856309619 ],[ 201384.0114448297, 173661.08911429628 ],[ 201382.0113768267, 173661.08966549637 ],[ 201380.01130882374, 173661.09021669647 ],[ 201378.01124082075, 173661.09076789653 ] ] ],"spatialReference":{"wkid":102100} };
            var polyline = new Polyline(polylineJson);
            var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
            var g = new Graphic(polyline, polylineSymbol, null, null);
            map.graphics.add(g);
      var polyline2 = new Polyline(polylineJson2);
      var g2 = new Graphic(polyline2, polylineSymbol, null, null);
            map.graphics.add(g2);
          }
        });
     });
        </script>
    </head>
    <body class="claro">
        <div id="map"></div>
    </body>
</html>

JonathanUihlein · ‎01-10-2014

@Ken

Thank you for your help. You are completely correct. shaningesri made another thread on the topic earlier:

http://forums.arcgis.com/threads/99906-Add-graphic-not-successufl

It's always been a coordinates issue but I have been unsuccessful in communicating that to shaningesri.

View solution in original post

KenBuja · ‎01-10-2014

Are you sure those are the correct coordinates for the line? If you change the first coordinate, you'll see the line off the coast of Africa.

var polylineJson2 = { "paths":[[[2013940.01178484457,1736610.08635829584],...

Also, can you get in the habit of putting your code within the CODE tags? It makes it much easier to read.

JonathanUihlein · ‎01-10-2014

@Ken

Thank you for your help. You are completely correct. shaningesri made another thread on the topic earlier:

http://forums.arcgis.com/threads/99906-Add-graphic-not-successufl

It's always been a coordinates issue but I have been unsuccessful in communicating that to shaningesri.

ShaningYu · ‎01-13-2014

Jon: Thanks for your help. The pro. got solved after using correct LAT/LON values.