Maqetta Example

A simple Maqetta example displaying a basic ArcMap

HTML

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.js"></script>
<title>World Street Map</title>
<script type="text/javascript"
data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}]"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script type="text/javascript">
    require(["dojo/ready",
        "dijit/dijit",
        "dojo/parser"],
    function(ready) {
        ready(function() {
            dojo.ready(function() {
                // Create map
                map = new esri.Map("map", {
                    basemap: "streets",
                    // Centered on San Fran
                    center: [-122.45, 37.75],
                    zoom: 12
                });
            });
        });
    })
</script>
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop"
data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
    <div id="map"></div>
</body>

</html>

CSS

html, body, #map {
    padding:0;
    margin:0;
    height:100%;
    width : 100%;
}
#myapp.claro .login {
    font : Verdana;
}
#myapp.claro .Admin {
}
#myapp.claro .button {
    left : 65px;
}

JavaScript

var dojoConfig = {parseOnLoad: true};
      dojo.require("esri.map");
      var map;