Community

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

1045
5
Jump to solution
11-26-2017 02:26 PM
RebeccaLeach
by
New Contributor III
‎11-26-2017 02:26 PM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎11-27-2017 05:41 AM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

5 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎11-26-2017 02:37 PM

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

0 Kudos
RebeccaLeach
by
New Contributor III
‎11-26-2017 02:40 PM

Using the sandbox on the web for the tutorial.

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎11-26-2017 09:13 PM

Rebecca,

   Well there are several issue in your code.

  1. A comma missing behind "esri/dijit/Legend"
  2. On the next line a "c" missing from arcgisUtils.
  3. The portalId you are attempting to use is a Web Application and not a Web Map.
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎11-27-2017 05:41 AM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
RebeccaLeach
by
New Contributor III
‎11-27-2017 06:36 AM

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.

0 Kudos