How to Set ArcGIS as background and Set Zoom level?

VanithaV · ‎01-25-2011

Hi Folks,

I am rookie to ArcGIS map. I am displaying map as background and placing some objects over it.When i save the page,the objects are going to background & map is coming foreground,so how to set the map as background layer. Second i am placing the objects on street,so i need to Zoom to max and how to do that.Please find my below code,

[HTML]<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Find Address</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css"/>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbN-pn87tRTOhN5haEPTrxxRpW7RPLo8OuYpZjwqeJcN2phD..." type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.locator");

      var map, locator;

      function init() {
          var initExtent = new esri.geometry.Extent({ xmin: -20098296, ymin: -2804413, xmax: 5920428, ymax: 15813776, spatialReference: { wkid: 54032} });
          map = new esri.Map("map", { extent: initExtent });

//Donot know how to Zoom to max during the onload
//        map.ZoomFactor=0;
//        var Zoom = G_SATELLITE_MAP.getMaximumResolution(point);
//        map.setCenter(point, zoom);
//
        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://maps.dcgis.dc.gov/DCGIS/rest/services/DCGIS_DATA/DC_Basemap_WebMercator/MapServer");
        map.addLayer(tiledMapServiceLayer);

        locator = new esri.tasks.Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");
        dojo.connect(locator, "onAddressToLocationsComplete", showResults);

        dojo.connect(map, "onExtentChange", showExtent);

      }
      function showExtent(ext) {
          var s = "";
          s = "XMin: " + ext.xmin +
       " YMin: " + ext.ymin +
       " XMax: " + ext.xmax +
       " YMax: " + ext.ymax;
          dojo.byId("onExtentChangeInfo").innerHTML = s;
      }

      function locate() {
        map.graphics.clear();
        var add = dojo.byId("address").value.split(",");
        var address = {
          Address : add[0],
          City: add[1],
          State: add[2],
          Zip: add[3]
        };
        locator.addressToLocations(address,["Loc_name"]);
      }

      function showResults(candidates) {
        var candidate;
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");

        symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE);
        symbol.setColor(new dojo.Color([255,0,0,0.75]));

        var points = new esri.geometry.Multipoint(map.spatialReference);

        for (var i=0, il=candidates.length; i<il; i++) {
          candidate = candidates;
          if (candidate.score > 70) {
            var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };
            var geom = esri.geometry.geographicToWebMercator(candidate.location);
            var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
            map.graphics.add(graphic);
            map.graphics.add(new esri.Graphic(geom, new esri.symbol.TextSymbol(attributes.address).setOffset(0, 8)));
            points.addPoint(geom);
          }
        }
        map.setExtent(points.getExtent().expand(3.5));
      }

      dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">
    <form id="form1" runat="server">
     Address : <input type="text" id="address" size="60" value="300 Indiana Ave NW,Washington D.C., DC, 20001" /> <i>(Address, City, State, Zip)</i>
    <input type="button" value="Locate" onclick="locate()" /><br />
    <%--<applet code="applet/DesignApplet.java" archive="applet/DesignApplet.jar" width="800" height="600" name="Diagram Tool"></applet>--%>


    <br />
    <label id="onExtentChangeInfo" runat="server"></label>
    <asp:Panel ID="Panel1" runat="server" Width="550px" Height="400px" style="padding-top: 20px;">
    <div id="map" style="width:550px; height:400px; overflow:hidden; border:1px solid #000;"></div>
    </asp:Panel>
    </form>
</body>
</html>