javascript api sample not working

nitakumari · ‎03-17-2011

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"/>
    
    <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>
      
      <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>

MatthewLawton · ‎04-12-2011

Sorry to respond so late to this post. I have two suggestions:

1. Is your map service tiled as in the example? If not, you should change it to "ArcGISDynamicMapServiceLayer".

2. Instead of referencing your map service as "localhost", try the fully qualified domain name of the server, or even the IP address.

Good Luck!

nitakumari · ‎04-14-2011

Thanks for the reply mflawton.Yes,I am using the tiled map service layer.I am using the same code as in the sample given and I am using my localhost rest service in place of sample rest service,rest part of code is copy of this sample.The problem is,dojo code is not working.I don't know why??Any help will be appreciated.

WilliamMcBride · ‎04-14-2011

Have you checked to make sure that your mapping service is started in the Server Manager?

nitakumari · ‎04-21-2011

Yes, the service has been started in the server manager