ngalford

Can't load the BING Map

Discussion created by ngalford on Jun 29, 2012
Latest reply on Jun 29, 2012 by ngalford
I've been manipulating and learning dojo separately and now I'm integrating ArcGIS now. the map won't load I'm sure its something small but if someone has a second to point the flaw that would be great.

Thanks,

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: Javascript Map</title>
  <link rel="stylesheet" href="Styles/FloatingPane.css">
  <link rel="stylesheet" href="dojox/layout/resources/ResizeHandle.css" type="text/css">
        <link rel="stylesheet" href="Styles/style.css" media="screen">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" media="screen">
        <!-- load dojo and provide config via data attribute -->
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"  data-dojo-config="async:true, parseOnLoad:true">
        </script>
  <!--ESRI Injection-->
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7" type="text/javascript"></script>
  <!--End-->
  <script>
   require([
   "dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/layout/AccordionContainer",
   "dojo/parser", "dojo/domReady!",
   "dojox/layout/FloatingPane"
   ]);
  </script>
  <!-- load dojo and provide config via data attribute -->
  <script type="text/javascript" charset="utf-8">
    dojo.require("esri.map");
    dojo.require("esri.virtualearth.VETiledLayer");    
    function init ()
    {
    map = new esri.Map("map");
    //Creates the Virtual Earth layer to add to the map
    veTileLayer = new esri.virtualearth.VETiledLayer({
          bingMapsKey: 'AimF6LphvVcbtQZOyiopeyQT8n-QOTukhwoRZwnzKL1MM0_B1Dfc7ppeKmyPByKp',
          mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL
    });
    map.addLayer(veTileLayer);
    }
    dojo.addOnLoad(init);
  </script>
  <!--End-->
    </head>
    <body class="claro">
  <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
   <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', splitter: true"">
    <div id="map">
    <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
       title="Zoom-Bar" data-dojo-props="resizable:false, dockable:true"
       style="position:absolute;top:5;left:1;width:100px;height:300px;visibility:visible;">
    This is the content of the pane!
    </div>
    </div>
   </div>
   <div class="edgePanel" style="max-height: px, min-height: 50px;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', splitter: true">Header content (top)</div>
   <div data-dojo-type="dijit.layout.AccordionContainer" style="width: 25%" data-dojo-props="region: 'left', splitter: true"">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">
     <ul>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
      <li> sample title </li>
     </ul>
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Your Bookmarks', selected: true">
    Hi how are you?
    </div>
   </div>
  </div>
 </body>
</html>

Outcomes