I'm new to JavaScript and I'm in the process of doing the ArcGIS API for JavaScript tutorial for "Use an ArcGIS.com webmap." I've followed the tutorial step by step and for some reason I cannot get the application to run at the midway point or at the end. The tutorial is somewhat vague for someone new like me. I'm not sure where my error is in the script. I've used both the test web map provided and my own web map, neither working. Any assistance would be greatly appreciated!
Below is the website link for the tutorial:
Build a web map using ArcGIS.com | Guide | ArcGIS API for JavaScript 3.22
Below is the JavaScript:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Create a Web Map<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"X-UA-Compatible"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"IE=edge"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/css"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.22%2Fesri%2Fcss%2Fesri.css" target="_blank">https://js.arcgis.com/3.22/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
html<SPAN class="punctuation token">,</SPAN>body<SPAN class="punctuation token">,</SPAN>#mapDiv<SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>container<SPAN class="punctuation token">{</SPAN>
padding<SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
margin<SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
height<SPAN class="punctuation token">:</SPAN><SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
#legendDiv<SPAN class="punctuation token">{</SPAN>
background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
position<SPAN class="punctuation token">:</SPAN> absolute <SPAN class="operator token">!</SPAN>important<SPAN class="punctuation token">;</SPAN>
z<SPAN class="operator token">-</SPAN>index<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">99</SPAN><SPAN class="punctuation token">;</SPAN>
top<SPAN class="punctuation token">:</SPAN>10px<SPAN class="punctuation token">;</SPAN>
right<SPAN class="punctuation token">:</SPAN>20px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN><SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> parseOnLoad<SPAN class="punctuation token">:</SPAN><SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.22compact%2F" target="_blank">https://js.arcgis.com/3.22compact/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/arcgis/utils"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/dijit/Legend"</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> argisUtils<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
arcgisUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"84a3d030b39c4e58aaa68ee9044849f5"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mapDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
map <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
layerInfos<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">(</SPAN>arcgisUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLegendLayers</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"legendDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legend<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"legendDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
