snita

javascript api sample not working

Discussion created by snita on Mar 17, 2011
Latest reply on Apr 21, 2011 by snita
Hii,I am beginner in developing arcgis server javascript api application.I am trying to use the sample from http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm
I am using the sample under Drawing Toolbars under Toolbars heading i.e. http://help.arcgis.com/en/webapi/javascript/arcgis/demos/toolbar/toolbar_draw.html
Here,I just replaced the url for service used in the code with my locahost rest service url and all the code is same.The problem is that my map is showing blank,it is not coming at all,only the drawing toolbars are shown.I don't know where I am doing wrong.Although,the same sample is working for any online esri rest services but it is not working for any of the locahost rest services.I have also tried after putting my initial and final coordinates but it is not working and also we can work after omitting these coordinates because they are not as much important to run the application.So,what to do,Please,tell me.
Any help will be greatly appreciated.Thanks in advance.

<!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=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Maps Toolbar</title>
   
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
    </style>
   
    <script type="text/javascript">
      djConfig = {
        parseOnLoad: true
      }
    </script>
   
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
   
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");


      var map, toolbar, symbol, geomTask;
      var resizeTimer;
     
      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-11721159,"ymin":-1138850,"xmax":8277212,"ymax":9858297,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});
       
        dojo.connect(map, "onLoad", createToolbar);
       
        //add the world street map basemap
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost/ArcGIS/rest/services/test_server11/MapServer");
        map.addLayer(basemap);
      }

      function createToolbar(map) {
        dojo.connect(dijit.byId('map'), 'resize', function() {
          resizeMap();
        });
        toolbar = new esri.toolbars.Draw(map);
        dojo.connect(toolbar, "onDrawEnd", addToMap);
      }

      function addToMap(geometry) {
        toolbar.deactivate();
        map.showZoomSlider();
         switch (geometry.type) {
            case "point":
              var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
              break;
            case "polyline":
              var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);
              break;
            case "polygon":
              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
              break;
            case "extent":
              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
              break;
            case "multipoint":
              var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]));
              break;
          }
          var graphic = new esri.Graphic(geometry, symbol);
          map.graphics.add(graphic);
      }
      //Handle resize of browser
      function resizeMap(){
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function(){
          map.resize();
          map.reposition();
        }, 500);
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
    <div id="header" dojotype="dijit.layout.ContentPane" region="top" style="height:75px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;overflow:hidden;">
      <span>Draw:<br /></span>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();">Point</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.MULTI_POINT);map.hideZoomSlider();">Multipoint</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();">Line</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();">Polyline</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();">Polygon</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button>
      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.ARROW);map.hideZoomSlider();">Arrow</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.TRIANGLE);map.hideZoomSlider();">Triangle</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.CIRCLE);map.hideZoomSlider();">Circle</button>
      <button dojoType="dijit.form.Button" onClick="toolbar.activate(esri.toolbars.Draw.ELLIPSE);map.hideZoomSlider();">Ellipse</button>
    </div>
    <div id="map" dojoType="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" region="center">
    </div>
</div>
  </body>
</html>

Outcomes