topic Re: ArcGIS API for JavaScript tutorial "Use an ArcGIS.com webmap" application not working in ArcGIS JavaScript Maps SDK Questions

ArcGIS API for JavaScript tutorial "Use an ArcGIS.com webmap" application not working

RebeccaLeach — Fri, 10 Dec 2021 21:27:35 GMT

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:

<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
  html,body,#mapDiv,.map.container{
    padding:0;
    margin:0;
    height:100%;
  }
  #legendDiv{
  background-color: #fff;
  position: absolute !important;
  z-index: 99;
  top:10px;
  right:20px;
}
</style>

<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="https://js.arcgis.com/3.22compact/"></script>
<script>
  var map;
  require([
    "esri/map",
    "esri/arcgis/utils",
    "esri/dijit/Legend"
    "dojo/domReady!"], function(Map, argisUtils, Legend){
  arcgisUtils.createMap("84a3d030b39c4e58aaa68ee9044849f5", "mapDiv").then(function (response) {
      map = response.map;
      
      var legend = new Legend({
        map: map,
        layerInfos:(arcgisUtils.getLegendLayers(response))
        }, "legendDiv");
        
        legend.startup();
    });
</script>
</head>

<body>
  <div id="mapDiv"></div>
  <div id="legendDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS API for JavaScript tutorial "Use an ArcGIS.com webmap" application not working

RobertScheitlin__GISP — Sun, 26 Nov 2017 22:37:56 GMT

Are you trying to run the html from your file system or from your web server?

Re: ArcGIS API for JavaScript tutorial "Use an ArcGIS.com webmap" application not working

RebeccaLeach — Sun, 26 Nov 2017 22:40:09 GMT

Using the sandbox on the web for the tutorial.

Re: ArcGIS API for JavaScript tutorial "Use an ArcGIS.com webmap" application not working

RobertScheitlin__GISP — Mon, 27 Nov 2017 05:13:26 GMT

Rebecca,

Well there are several issue in your code.

A comma missing behind "esri/dijit/Legend"
On the next line a "c" missing from arcgisUtils.
The portalId you are attempting to use is a Web Application and not a Web Map.

Re: ArcGIS API for JavaScript tutorial "Use an ArcGIS.com webmap" application not working

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:27:38 GMT

Rebecca,

Here is your code corrected:

<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.22/esri/css/esri.css">
<style>
  html,body,#mapDiv{
    padding:0;
    margin:0;
    height:100%;
  }
  #legendDiv{
    background-color: #fff;
    position: absolute !important;
    z-index: 99;
    top:10px;
    right:20px;
  }
</style>

<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="https://js.arcgis.com/3.22compact/"></script>
<script>
  var map;
  require([
    "esri/map",
    "esri/arcgis/utils",
    "esri/dijit/Legend",
    "dojo/domReady!"], function(Map, arcgisUtils, Legend){
  arcgisUtils.createMap("3e3b1f58ab5b4dd49c4d278118e6fe75", "mapDiv").then(function (response) {
      map = response.map;
      
      var legend = new Legend({
        map: map,
        layerInfos:(arcgisUtils.getLegendLayers(response))
        }, "legendDiv");
        
        legend.startup();
    });
    });
</script>
</head>

<body>
  <div id="mapDiv"></div>
  <div id="legendDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS API for JavaScript tutorial "Use an ArcGIS.com webmap" application not working

RebeccaLeach — Mon, 27 Nov 2017 14:36:21 GMT

Thanks for pointing out my errors Robert. I went over it several times and thought I had all of my errors fixed. And the tutorial itself was hard to tell in the script examples how each piece was to line up with the other as far as indentation goes. I'm not sure how picky JavaScript is in regards to indentation. My main experience is with Python and even that I'm still rather green at using.