Community

Can't load the BING Map

589
2
06-29-2012 07:18 AM
NigelAlford
by
New Contributor III
‎06-29-2012 07:18 AM
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>
0 Kudos
2 Replies
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎06-29-2012 07:41 AM
Looks like you are trying to load two versions of Dojo. Version 1.7 using this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"  data-dojo-config="async:true, parseOnLoad:true">
        </script>

And 1.6 which loads with version 2.7 of the JSAPI. If you want to use version 1.7 of Dojo upgrade version 3.0 of the JS API includes that version of dojo. Here's a revised version of your sample that uses v3.0. 
<!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" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">

  <!--ESRI Injection-->
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0" 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>
0 Kudos
NigelAlford
by
New Contributor III
‎06-29-2012 09:15 AM
I like where you are going with the different versions of dojo being used. I'm going to work on that portion to make the calls properly.  I ran this code as is and it breaks.
Thanks, I'll keep pushing forwards.
0 Kudos