Untitled

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basemap Toggle</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #BasemapToggle {
      position: absolute;
      top: 100px;
      left: 20px;
      z-index: 50;
    }

    #MiMapaCacheado {
      position: absolute;
      top: 200px;
      left: 20px;
      z-index: 50;
    }

  </style>
  <script src="https://js.arcgis.com/3.23/"></script>
  <script>
var miMap;
var miToggle;
var miToggleCacheado;


require([
  "esri/basemaps",
  "esri/map",
  "esri/dijit/BasemapToggle",
  "esri/dijit/BasemapToggle",
  "esri/basemaps",
  "dojo/domReady!"],
  function( esriBasemaps, Map, BasemapToggle, BasemapToggleCacheado)
      {

          esriBasemaps.oceanoCacheado = {baseMapLayers: [{url: "http://services.arcgisonline.com/arcgis/rest/services/Ocean_Basemap/MapServer"} ],
              title: "Oceanos"
            };

          miMap = new Map("map", {
            center: [-70.6508, 43.1452],
            zoom: 16,
            basemap: "streets" });

          miToggle = new BasemapToggle({
            map: miMap,
            basemap: "satellite"
          }, "BasemapToggle");
          miToggle.startup();


          miToggleCacheado = new BasemapToggleCacheado({
            map: miMap,
            basemap: "oceanoCacheado"
          }, "MiMapaCacheado");
          miToggleCacheado.startup();


    }
 );

  </script>
</head>
<body>
  <div id="map" class="map">
    <div id="BasemapToggle"></div>
    <div id="MiMapaCacheado"></div>
  </div>
</body>
</html>

/* paso 1  Definir Contenedor
  paso 2 Requiere - function
  paso 3 Crear Widget
  paso 4 startup
  */