0

I am trying to draw polyline on map, but line is not adding to the map,please help me determine where I am making a mistake.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

   </style>
   <script src="https://js.arcgis.com/3.15/"></script>
   <script>
     var map,toolbar;

     require(["esri/map",
            "esri/toolbars/draw",
            "esri/symbols/SimpleMarkerSymbol", 
            "esri/symbols/SimpleLineSymbol",
            "esri/graphic",
            "esri/Color",
            "dojo/on",              
            "dojo/domReady!"], function(Map,Draw,SimpleMarkerSymbol,SimpleLineSymbol,Graphic,Color,on) {
       map = new Map("map", {
         basemap: "streets",  
         center: [-122.45, 37.75], 
         zoom: 13
       });
       map.on("load",initToolbar);


       var sls = new SimpleLineSymbol(
       SimpleLineSymbol.STYLE_DASH,
       new Color([255,0,0]),3);
       //var mybutton = dojo.byId("drawPoly");
       dojo.connect(drawPoly,"onclick",drawPolyLine);

       function drawPolyLine(){

         toolbar = new Draw(map, { showTooltips: true });
         toolbar.activate(esri.toolbars.Draw.POLYLINE);

       }

       function initToolbar(map) {

          toolbar = new Draw(map);
          toolbar.on("draw-end", addToMap);

       }

       function addToMap(evt) {
          alert("Index");
          toolbar.deactivate();
          var symbol = sls;

          var graphic = new Graphic(evt.geometry, symbol);
          map.graphics.add(graphic);
       }

     });
 </script>  
</head>
   <body>
     <button data-dojo-type="dijit/form/Button" id="drawPoly">Draw Polyline</button> 
       <div id="map"></div>
    </body>
</html>
1

There were just a few minor errors. Try this:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

   </style>
   <script src="https://js.arcgis.com/3.15/"></script>
   <script>
     var map,toolbar;

     require(["esri/map",
            "esri/toolbars/draw",
            "esri/symbols/SimpleLineSymbol",
            "esri/graphic",
            "esri/Color",
            "dojo/on",
            "dojo/dom",
            "dojo/domReady!"], function(Map,Draw,SimpleLineSymbol,Graphic,Color,on, dom) {
       map = new Map("map", {
         basemap: "streets",  
         center: [-122.45, 37.75], 
         zoom: 13
       });

       var sls = new SimpleLineSymbol(
       SimpleLineSymbol.STYLE_DASH,
       new Color([255,0,0]),3);
       var mybutton = dojo.byId("drawPoly");
       on(mybutton,"click",initToolbar);


       function initToolbar() {
          toolbar = new Draw(map, { showTooltips: true });
          toolbar.activate(Draw.POLYLINE);
          toolbar.on("draw-end", addToMap);

       }

       function addToMap(evt) {
          alert("Index");
          toolbar.deactivate();
          var symbol = sls;

          var graphic = new Graphic(evt.geometry, symbol);
          map.graphics.add(graphic);
       }

     });
 </script>  
</head>
   <body>
     <button data-dojo-type="dijit/form/Button" id="drawPoly">Draw Polyline</button> 
       <div id="map"></div>
    </body>
</html>
1
  • 3
    fixing the OPs code is substantially less valuable than teaching them what they are doing wrong. – john gravois Feb 3 '16 at 18:29
1

In the function function initToolbar(map){ //rest of code... } remove the parms map , because it create a confilct between the global variable map and the passed param to the function .

It become : function initToolbar(){ //rest of code... }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.