ArcGIS Online Web ID not working in my webmap build. Any ideas?

EricGunderson1 · ‎02-17-2015

I'm building my HTML document, and adding the appropriate scripts for a basic web map, but whenever I add my own web ID from the ArcGIS Online map I'd like to import, the web map won't show it. It won't even work in the sandbox environment. Any ideas?

I've read through all the tutorials on ArcGIS API for JavaScript and watched a bunch of videos from ESRI and on Youtube.

Thanks for your help.

-Eric

RobertScheitlin__GISP · ‎02-17-2015

Eric,

Can you share the code that you are using?

EricGunderson1 · ‎02-18-2015

It's pretty much the basic template from js.arcgis.com, but here is the html code:

<!DOCTYPE html>

<html>

<head>

<title>Retail Map of the Twin Cities</title>

</head>

</body>

</html>

And here is my .js (file name: script.js) code:

var map;

require(["esri/map", "esri/arcgis/utils", "dojo/domReady!"], function(Map, arcgisUtils){

arcgisUtils.createMap("472656524dfe41de87127f36e73751fa", "mapDiv").then(function (response){

map = response.map;

});

Thanks for your help. I'm out of ideas, and this is pretty new to me.

RobertScheitlin__GISP · ‎02-18-2015

Eric,

Here is the standard esri web map sample ‌with your web map id plugged in.

<!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 id</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();

        arcgisUtils.createMap("472656524dfe41de87127f36e73751fa","map").then(function(response){
          //update the app
          dom.byId("title").innerHTML = response.itemInfo.item.title;
          dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

          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>

EricGunderson1 · ‎02-18-2015

I'll try that out and see how it works.

I shouldn't have to log in or register this app with ESRI, should I?

Thank you so much for your help thus far!

EricGunderson1 · ‎02-18-2015

It looks like the code worked. However, when inspecting the source code on in the Chrome browser, this is the message I got:

message: "You do not have permissions to access this resource or perform this operation."messageCode: "GWM_0003"@

RobertScheitlin__GISP · ‎02-18-2015

Eric,

Is your web map publicly accessible?

EricGunderson1 · ‎02-18-2015

No, it is only available internally.

RobertScheitlin__GISP · ‎02-18-2015

Eric,

If your map is not public then you have to use a proxy to get access.

Sharing maps with secure layers | Guide | ArcGIS API for JavaScript

Add the bold text to the code after you have setup your proxy.

....

parser.parse();

esriConfig.defaults.io.proxyUrl = "/proxy";

....

EricGunderson1 · ‎02-18-2015

I'll try that out. Thanks again.