You could do this in different ways, but the basics are connecting the map click event, finding what was clicked and then either zooming to the extent of the polygon (easiest) or creating a new map on top of the old map (or it could be below or to the side or a new page) -- you'll have to play around with the div where you define another map.
I would keep it simple to start and just zoom in to the detail layers. Set scale dependencies in your map to display details only at the zoomed in levels.
I'm using a feature layer below in selection mode. You could just use a ArcGISDynamicMapServiceLayer or Tiled if you want.
Where I am using subblock, substitute any polygon layer such as US states.
//Define a feature layer
var subblockQueryFeatureLayer = new esri.layers.FeatureLayer("http://server/featurelayername", {
id: 'subblockQueryFeatureLayer',
mode: esri.layers.FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});
// Define the selection symbol for feature layer
var outlineColor = new dojo.Color(dojo.Color.named.red.concat(0.8));
var outlineSym = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, outlineColor, 3.0);
var selectionColor = new dojo.Color(dojo.Color.named.red.concat(0.35));
var selectionSymSubblocks = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, outlineSym, selectionColor);
//define mapclick event
var mapClickEvent
//connect map click event
function activateSubblockMapClick() {
if (!mapClickEvent) {
mapClickEvent = dojo.connect(map, "onClick", mapOnClick);
}
subblockQueryFeatureLayer.setSelectionSymbol(selectionSymSubblocks);
}
//disconnect map click event
function deactivateSubblockMapClick() {
if (mapClickEvent) {
dojo.disconnect(mapClickEvent);
mapClickEvent = null;
}
}
//do something when the click occurs
function mapOnClick(evt) {
subblockQueryFeatureLayer.clearSelection();
var selectQuery = new esri.tasks.Query();
selectQuery.geometry = evt.mapPoint;
selectQuery.outFields = ["*"];
subblockQueryFeatureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function (features) {
//after highlighting feature (or not), zoom to feature to show detailed map
if (features !== undefined && features.length !== 0) {
map.setExtent(features[0].geometry.getExtent().expand(10), true);
}
});
}
Check out this identifytask snippet for querying scale dependent layers http://www.spatialexception.org/posts/arcgis-javascript-identifytask-returns-scale-dependent-layers