New to API, just getting started - quick question

KWilliams · ‎09-23-2022

Hello,

I have been tasked at work to learn all things API. I have a little bit of a python background (ArcPy primarily), I'm pretty GIS competent, and have been working in AGOL for 1 year. Seems like Esri has provided a great framework to get started with APIs. However, I am struggling a little bit. For this API, I am using API for JavaScript, and am writing the code using the HTML, I am following the tutorials through CodePen.

I am working through the tutorials, I am to the point where I want to use the CodePen and display one of my configured web maps. I followed the tutorial, I created my APIKey, I have my PortalID of the map I want to display. I enabled all options in location services just to cover all bases. I cannot get it to work and I'm at a loss at this point.

tutorial I followed: display-a-web-map

I have tried typing the code out from scratch (minus the APIKey, PortalID - those I'll still copy/paste), I have tried copy/pasting everything and replacing with my APIKey, my PortalID. I have scanned through about 100 times and I don't see any typos. I've pasted what I've typed out below. I replaced my API Key and PortalID with dummy values for security.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Lumen Web Map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>
    require([
      "esri/config",
      "esri/WebMap",
      "esri/widgets/MapView",
      "esri/widgets/ScaleBar",
      "esri/widgets/Legend"
    ], function (esriConfig, WebMap, MapView, ScaleBar, Legend) {

      esriConfig.apiKey = "api key";
      const webmap = new WebMap({
        portalItem: {
          id: "portal id"
        }
      });

      const view = new MapView({
        container: "viewDiv",
        map: webmap
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

Is there some typo I'm just not seeing? Is there some setting I don't know about? Is there some setting on my Web Maps or layers I don't know about?

I've been stuck on this tutorial for two days and I am truly stuck and don't know how to move forward.

Any help would be greatly appreciated!!

Thanks!

LaurenBoyd · ‎09-23-2022

Hi @KWilliams -

Where is your webmap coming from? Is it hosted in ArcGIS Online, ArcGIS Enterprise, or your ArcGIS Organization with your ArcGIS Developer account?

If it's in your ArcGIS Developer account, this should work for you as long as you add the webmap item to the API key as outlined in this step in the tutorial: https://developers.arcgis.com/documentation/mapping-apis-and-services/security/tutorials/create-and-...

If it's in your ArcGIS Online or ArcGIS Enterprise organization, you can't use API keys to access secure items. You will need to set up OAuth to authenticate to access that item. This is mentioned in the documentation here: https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/#access-cont... Here is the ArcGIS API for JavaScript documentionation on accessing secure resources for more information: https://developers.arcgis.com/javascript/latest/secure-resources/

Hope this helps!

Lauren

View solution in original post

ReneRubalcava · ‎09-23-2022

If you open the developer tools in your browser, are you getting any particular errors? Is you webmap public?

LaurenBoyd · ‎09-23-2022

Hi @KWilliams -

Where is your webmap coming from? Is it hosted in ArcGIS Online, ArcGIS Enterprise, or your ArcGIS Organization with your ArcGIS Developer account?

If it's in your ArcGIS Developer account, this should work for you as long as you add the webmap item to the API key as outlined in this step in the tutorial: https://developers.arcgis.com/documentation/mapping-apis-and-services/security/tutorials/create-and-...

If it's in your ArcGIS Online or ArcGIS Enterprise organization, you can't use API keys to access secure items. You will need to set up OAuth to authenticate to access that item. This is mentioned in the documentation here: https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/#access-cont... Here is the ArcGIS API for JavaScript documentionation on accessing secure resources for more information: https://developers.arcgis.com/javascript/latest/secure-resources/

Hope this helps!

Lauren

KWilliams · ‎09-23-2022

Hello,

The map lives in our organization's ArcGIS Online, it is private. We do not have an actual connection between the AGOL maps and the ultimate application this API will link to. I'm just playing around trying to learn. I was unaware that I needed to pull the maps into the ArcGIS Developer Account. I signed up for the free account using my AGOL credentials. Is that all I need as opposed to subscribing to something? I see in the API Key where the Contents and Items section but I don't see the option to 'add items'. I see the note there for setting up the OAuth2.0, and then ArcGIS Identity sounds like what I need. First line says to register my application, I just made one and registered it. Sounds like my next step is to figure out this OAuth2.0 and ArcGIS Identity before I can display my web maps.

Sounds like I have a lot more research to do, and I'll need to coordinate with our IT department as well.

Thank you for your response, it's greatly appreciated.

JoelBennett · ‎09-23-2022

One problem I see right away is that MapView isn't in the esri/widgets "namespace"...instead, it should be "esri/views/MapView".

KWilliams · ‎09-23-2022

Oh good catch!! Thank you!

lucyhills · ‎12-19-2023

Here's an updated version of your script with placeholders for the API key and portal ID:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Lumen Web Map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

esriConfig.apiKey = "YOUR_API_KEY";
const webmap = new WebMap({
portalItem: {
id: "YOUR_PORTAL_ID"
}
});

const view = new MapView({
container: "viewDiv",
map: webmap
});

});
</script>
</head>

</html>

Make sure to replace "YOUR_API_KEY" and "YOUR_PORTAL_ID" with your actual API key and portal ID.