Hello,
Newb question on the Javascript SDK - first time playing around to see what I can do with it, and falling at the first hurdle...
I've followed this tutorial on how to add a feature layer to a map, but using a non-public layer that is hosted by my ArcGIS Online account (where the API key is also coming from).
Everything works, except for the feature layer, which doesn't display.
Checking the response in developer tools for the feature layer and I can see the following error:
{"error":{"code":403,"message":"You do not have permissions to access this resource or perform this operation.","messageCode":"GWM_0003","details":["You do not have permissions to access this resource or perform this operation."]}}
I'm a bit confused by this, as the feature layer is owned by the same account that the API key is tied to. So I assumed it wouldn't have any permissions issues or need for additional tokens. No doubt I'm just fundamentally misunderstanding how this should work!
Can anyone put me straight on this? How can I get my non-public AGOL feature layer into a JS SDK map?
Full code below:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], function(esriConfig, Map, MapView,FeatureLayer) {
esriConfig.apiKey = redacted;
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
const view = new MapView({
map: map,
center: [-1.7468262, 53.826597], // Longitude, latitude
zoom: 6, // Zoom level
container: "viewDiv" // Div element
});
// Layer
const cLayer = new FeatureLayer({
url: "https://services2.arcgis.com/redacted/FeatureServer/0"
});
map.add(cLayer,0);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
