nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

EricGunderson1

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

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

RobertScheitlin__GISP

Eric,

Can you share the code that you are using?

EricGunderson1

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

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

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

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.