It is possible to use
esri/arcgis/utils.createMapto create a map using an object. This is an alternative to other samples that create a map using the map id from ArcGIS.com. The code in this sample shows the following:
Note: You can retrieve the item definition from an ArcGIS.com item using esri/arcgis/utils.getItem()
Once the map object is complete, it is used with createMap to build a map.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Create web map from JSON</title> <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css"/> <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css" /> <link rel="stylesheet" href="css/layout.css"/> <script src="https://js.arcgis.com/3.29/"></script> <script> require([ "dojo/parser", "dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom", "esri/map", "esri/geometry/Extent", "esri/urlUtils", "esri/arcgis/utils", "esri/dijit/Legend", "esri/dijit/Scalebar", "dojo/domReady!" ], function( parser, ready, BorderContainer, ContentPane, dom, Map, Extent, urlUtils, arcgisUtils, Legend, Scalebar ) { ready(function(){ parser.parse(); var webmap = {}; webmap.item = { "title":"Soil Survey Map of USA", "snippet": "This map shows the Soil Survey Geographic (SSURGO) by the United States Department of Agriculture's Natural Resources Conservation Service.", "extent": [[-139.4916, 10.7191],[-52.392, 59.5199]] }; webmap.itemData = { "operationalLayers": [{ "url": "https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer", "visibility": true, "opacity": 0.75, "title": "Soil Survey Map", "itemId": "204d94c9b1374de9a21574c9efa31164" }], "baseMap": { "baseMapLayers": [{ "opacity": 1, "visibility": true, "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer" },{ "isReference": true, "opacity": 1, "visibility": true, "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer" }], "title": "World_Terrain_Base" }, "version": "1.1" }; dom.byId("title").innerHTML = webmap.item.title; dom.byId("subtitle").innerHTML = webmap.item.snippet; arcgisUtils.createMap(webmap,"map").then(function(response){ var map = response.map; //add the scalebar var scalebar = new Scalebar({ map: map, scalebarUnit: "english" }); //add the legend. Note that we use the utility method getLegendLayers to get //the layers to display in the legend from the createMap response. var legendLayers = arcgisUtils.getLegendLayers(response); var legendDijit = new Legend({ map: map, layerInfos: legendLayers },"legend"); legendDijit.startup(); }); }); }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> <div id="title"></div> <div id="subtitle"></div> </div> <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" > <div id="legend"></div> </div> </div> </body> </html>