Another page is calling a global function named check and passes on a url to this file, line 19
The console.log on line 21 verifies that the variable (url) is passed on, but the map is never updated with the new fL. Tried refreshed but no showing. Suggestions?
require([
"esri/Map", 'dojo/_base/lang',
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function (Map, lang, MapView, FeatureLayer) {
esrimap = new Map({
basemap: "topo-vector"
});
view = new MapView({
container: "viewDiv",
map: esrimap,
center: [-118.80543, 34.02700],
zoom: 13
});
check = function check1(value) {
console.log(value)
trailheadsLayer = new FeatureLayer({
url: value
});
console.log(trailheadsLayer)
esrimap.add(trailheadsLayer)
}
});
Solved! Go to Solution.
Correct. If you call the script in two different html files each has it's own code scope.
Are esrimap and view also global vars?
Thank you for moving the question to the correct forum.
No, they are not. Since the check function is local with the esrimap and view I didn't see the reason to make them global.
Is the assumption incorrect?
Lefteris,
Have you tested to see if esrimap is valid inside the check function s scope? Something as simple as console.log(esrimap).
The console.log for lines 9 and 10 are shown below. They are not null but it it seems there are no data.
Then I made the esrimap and view global, but same result.
window.esrimap = new Map({....
window.view = new MapView({....
check = function check1(value) {
oldvalue = ""
console.log(value)
//undefined === oldvalue && (oldvalue = value);
trailheadsLayer = new FeatureLayer({
url: value
});
console.log(esrimap)
console.log(view)
console.log(trailheadsLayer)
if (trailheadsLayer) {
esrimap.add(trailheadsLayer)
}
}
Lefteris,
Inside your check function you need to use window.esrimap
I did. No change.
Robert, just to make sure we are on the same place, let me clarify the workflow. First, the index.html with the index.js starts and loads the map. It also loads a button. When the button is clicked, another page opens up which has another button. When you click that button, it sends the global variable window.check(url) to the index.js to update the map with new fL.
The purpose of this workflow is to be able to update a map by using external pages.
Attached are the three files: index.html, index.js and the second page tool.html.
Thank you.
Lefteris, Here are my corrections to the tool.html.
<html>
<head>
<script>
document.cookie = "Set-Cookie: flavor=choco; SameSite=None; Secure"
function test() {
url = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
window.opener.check(url)
}
</script>
</head>
<body>
<div id="demo">
<h2>Testing</<h2>
</div>
<button onclick="test()">Load</button>
</body>
</html>
Next the index.js changes:
check = null
trailheadsLayer = null
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function (Map, MapView, FeatureLayer) {
esrimap = new Map({
basemap: "topo-vector"
});
view = new MapView({
container: "viewDiv",
map: esrimap,
center: [-118.80543, 34.02700],
zoom: 13
});
check = function check1(value) {
trailheadsLayer = new FeatureLayer({
url: value
});
if (trailheadsLayer) {
esrimap.add(trailheadsLayer)
}
}
});
Thank you.I was not aware of the window.opener. Very useful.
It works!
So,the culprit was the link to the index.js file in tool.html which changed the scope?
Correct. If you call the script in two different html files each has it's own code scope.