sudhirzeel

Map zooming to full size of html div on load.

Discussion created by sudhirzeel on Jul 4, 2013
Latest reply on Jul 4, 2013 by btfou
Follwing is my html/javascript , on start it should open the map in full div but instead it open in a small size.

<!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" />
    <title>Create Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

      function init() {            
        var initExtent = new esri.geometry.Extent(8.3715,58.6010, 34.7387,98.15185, new esri.SpatialReference({ wkid:4326 }));
        map = new esri.Map("map",initExtent );
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
        dojo.connect(map, 'onLoad', showfunct);
      }
       
      function showfunct(){
          var points = {
          "points": [[70.8258,18.5141],[71.56134,18.554551] ],
          "spatialReference": ({ "wkid": 4326 })
          };
          var mp = new esri.geometry.Multipoint(points);
          var wm_mp = esri.geometry.geographicToWebMercator(mp);
          var sms = new esri.symbol.SimpleMarkerSymbol();
          var infoTemplate = new esri.InfoTemplate("Vernal Pool Locations", "");
          var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
          map.graphics.add(graphic);          
      }

      dojo.ready(init);
    
    </script>
  </head>
 
  <body class="tundra">
    <div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
    <div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
  </body>
</html>

Attachments

Outcomes