Ken,The templates available in the template gallery were all built using the ArcGIS API for JavaScript so the functionality for creating a new map based on a web map id is not going to go away. As jstreeb pointed out you can visit the web api help pages for details on building completely custom applications. Here's an example of a simple layout built using the ArcGIS API for JavaScript that has minimal styling. This layout works with a web map from ArcGIS.com. To view the layout with different web maps replace the value for webmap in the code with your web map id. The 'sections' of this layout were created using Dojo's layout widgets - you can read about the layout widgets here:http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_dojoLayouts.h...View application running here: http://jsfiddle.net/khutchins/sXPTE/1/embedded/result/And here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/Nihilo/Nihilo.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
<style type="text/css">
html,body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
overflow:hidden;
}
#header {
height:55px;
}
#footer {
height:30px;
}
#rightPane {
width:20%;
}
#leftPane {
width:150px;
}
</style>
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("esri.IdentityManager");
dojo.require("esri.map");
dojo.require("esri.arcgis.utils");
var map;
function init() {
var urlObject = esri.urlToObject(document.location.href);
var webmap = "59357ba9bd06409a99c0eb89f9089a40";
if (urlObject.query) {
webmap = urlObject.query.webmap;
}
var mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
mapOptions: {
slider: true
},
geometryServiceURL: "http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
});
mapDeferred.addCallback(function(response) {
map = response.map;
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
mapDeferred.addErrback(function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
}
//show map on load
dojo.addOnLoad(init);
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<div id="title">
Title goes here
</div>
<div id="subtitle">
Sub title goes here
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane">
<div data-dojo-type="dijit.layout.AccordionContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 1'">
Content for pane 1
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 2'">
<p>
Content for pane 2
</p>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 3'">
<p>
Content for pane 3
</p>
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane">
This is the right section
</div>
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
This is the footer section
</div>
</div>
</body>
</html>
