Untitled

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Layer Swipe</title>
   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #map,.map.container {
  padding:0;
  margin:0;
  height:100%;
  width:95%;
}
#legendDiv{
background-color: #fff;
position: absolute !important;
z-index: 99;
top:01%;
right:0%;
 }
 </style>
 <script src="//js.arcgis.com/3.11/"></script>
 <script>

require([
  "esri/map",
  "esri/dijit/LayerSwipe",
  "esri/arcgis/utils",
  "dojo/_base/array",
  "esri/dijit/Legend",
  "dojo/domReady!",
], function(
  Map, LayerSwipe, arcgisUtils, array, Legend
)  {

  var mapDeferred = arcgisUtils.createMap("e80b5668e7ea478c986dff4bfbe7112a", "map");

  mapDeferred.then(function(response){

    var id;
    var map = response.map;
    var title = "Inundation Post Dike Placement";

    //loop through all the operational layers in the web map
    //to find the one with the specified title;
    var layers = response.itemInfo.itemData.operationalLayers;
    array.some(layers, function(layer){
                  id = layer.id;

    });
    //get the layer from the map using the id and set it as the swipe layer.
    if(id){
      var swipeLayer = map.getLayer(id);
      var swipeWidget = new LayerSwipe({
        type: "vertical",  //Try switching to "scope" or "horizontal"
        map: map,
        layers: [swipeLayer]
      }, "swipeDiv");
      swipeWidget.startup();
    }
  });

  var legend = new Legend({
      map: map,
      layerInfos:(arcgisUtils.getLegendLayers(response))
  }, "legendDiv");
  legend.startup();
});