topic Can't load the BING Map in ArcGIS JavaScript Maps SDK Questions

Can't load the BING Map

NigelAlford — Fri, 29 Jun 2012 14:18:35 GMT

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>

Re: Can't load the BING Map

KellyHutchins — Sat, 11 Dec 2021 23:02:18 GMT

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>

Re: Can't load the BING Map

NigelAlford — Fri, 29 Jun 2012 16:15:28 GMT

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.