Can someone help me with understanding why the addLayer() function is not working in my code. In the console it says it is not defined. JS API 4.18. I’m a bit new to JS and self-taught coder. So please bear with me.
I can only get it to work when the addLayer() is outside of the <script> tag that includes all the ESRI API stuff. I’ve tried to put it everywhere in those scripts tags, only works when it’s outside of it. The function will eventually include code from the API. *note that I just put the addLayer() function in numerous locations in the code.
What I’m trying to do is get users to be able to add their own content to the WebMap, then eventually print it out. Anyone else have any ideas how to do this. I know WAB builder has a nice widget that lets you add your content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://kit.fontawesome.com/mmmmmm.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<style>
html,
body {
font-size: 14px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.esri-item-gallery .esri-item-container {
float: left;
text-align: center;
padding: 10px;
width: 204px;
display: inline-block;
}
.esri-item-gallery .esri-item-container:hover {
}
.esri-item-gallery .esri-image {
width: 200px;
height: 133px;
border: 2px solid gray;
border-radius: 5px;
}
.esri-item-gallery .esri-null-image {
line-height: 133px;
text-align: center;
color: #999999;
}
.esri-item-gallery .esri-title {
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.esri-item-gallery .esri-null-title {
color: #999999;
}
.action {
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
<script>
require([
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager",
"esri/WebMap",
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/LayerList",
"esri/layers/FeatureLayer",
"esri/geometry/Geometry",
"esri/portal/Portal",
"esri/portal/PortalQueryParams",
"esri/portal/PortalQueryResult"
], function (OAuthInfo, esriId, WebMap, esriConfig, Map, MapView, LayerList,FeatureLayer,Geometry,Portal, PortalQueryParams,PortalQueryResult) {
//AppID is populated
var info = new OAuthInfo({
appId: "..........",
portalUrl: "https://......./portal",
popup: false
});
esriId.registerOAuthInfos([info]);
esriId.getCredential(info.portalUrl + "/sharing");
esriId
.checkSignInStatus(info.portalUrl + "/sharing")
.then(function (ev) {
console.log(ev);
console.log("logged in ");
})
.catch(function (er) {
console.log(err)
});
document.getElementById("sign-in").addEventListener("click", function() {
// user will be redirected to OAuth Sign In page
esriId.getCredential(info.portalUrl + "/sharing");
});
document.getElementById("sign-out").addEventListener("click", function() {
esriId.destroyCredentials();
window.location.reload();
});
esriConfig.portalUrl = "https://....../portal";
portal = new Portal();
// Setting authMode to immediate signs the user in once loaded
portal.authMode = "immediate";
portal.load().then(function() {
// queryUsers
// This object autocasts as new PortalQueryParams()
var queryParameters = {
query: "username:" + portal.user.username
};
console.log(portal)
console.log(queryParameters)
portal.queryUsers(queryParameters).then(function(queryResults){
console.log(queryResults.results)
queryResults.results[0].fetchFolders().then(function(folders){
folders.forEach(function(folder){
console.log(" user folder", folder.title);
});
});
});
});
// Once portal is loaded, user signed in
portal.load().then(function() {
console.log(portal);
// Create query parameters for the portal search
// This object autocasts as new PortalQueryParams()
var queryParams = {
query: "type: 'Feature Service' & owner:" + portal.user.username,
sortField: "numViews",
sortOrder: "desc",
num: 20,
type: "Feature Service"
};
// Query the items based on the queryParams created from portal above
portal.queryItems(queryParams).then(createGallery);
console.log()
console.log(portal.queryItems(queryParams))
});
var map = new Map({
basemap: "topo-vector",
});
var view = new MapView({
container: "mapDiv", // Reference to the DOM node that will contain the view
map: map, // References the map object created in step 3
center : [-100, 38], // Sets the center point of the view at a specified lon/lat
zoom : 4, // Sets the zoom LOD to 13
});
function addLayer(){
console.log("Add")
}
function createGallery(items) {
function addLayer(){
console.log("Add")
}
var htmlFragment = "";
items.results.forEach(function(item) {
htmlFragment +=
'<div class="esri-item-container">' +
(item.thumbnailUrl
? '<a href=' + (item.itemUrl || "") + '><div href class="esri-image" style="background-image:url(' + item.thumbnailUrl + ');"></div></a><br><button class = "btn btn-info" onclick="addLayer()"><i class="fas fa-plus"></i></button>'
: '<div class="esri-image esri-null-image">Thumbnail not available</div>') +
(item.title
? '<div class="esri-title">' + (item.title || "") + "</div>"
: '<div class="esri-title esri-null-title">Title not available</div>') +
(item.title
? '<div class="esri-title">' + (item.itemUrl || "") + "</div>"
: '<div class="esri-title esri-null-title">Title not available</div>') +
"</div>";
});
function addLayer(){
console.log("Add")
}
document.getElementById("itemGallery").innerHTML = htmlFragment;
}
})
</script>
</head>
<body>
<div id="anonymousPanel" style="display:none; padding: 5px; text-align: center;">
<span id="sign-in" class="action">Sign In</span> and view your ArcGIS Online items.
</div>
<div id="personalizedPanel" style=" padding: 5px; text-align: center;">
Welcome <span id="userId" style="font-weight: bold;"></span> -
<span id="sign-out" class="action">Sign Out</span>
</div>
<div id='mapDiv' style = "height: 400px; width: 800px"> </div>
<div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div>
</body>
</html>
