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.
<!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>
<script type="text/javascript">djConfig = { parseOnLoad:true }</script>
<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >
<!--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>
