Pass on url and load map

482
9
Jump to solution
09-08-2020 05:20 PM
Regular Contributor

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)

}

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Reply
0 Kudos
1 Solution

Accepted Solutions
MVP Esteemed Contributor

Correct. If you call the script in two different html files each has it's own code scope.

View solution in original post

Reply
0 Kudos
9 Replies
MVP Esteemed Contributor

Are esrimap and view also global vars?

Reply
0 Kudos
Regular Contributor

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?

Reply
0 Kudos
MVP Esteemed Contributor

Lefteris,

   Have you tested to see if esrimap is valid inside the check function s scope? Something as simple as console.log(esrimap).

Reply
0 Kudos
Regular Contributor

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)
}
}
Reply
0 Kudos
MVP Esteemed Contributor

Lefteris,

Inside your check function you need to use window.esrimap 

Reply
0 Kudos
Regular Contributor

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.

https://community.esri.com/docs/DOC-15441-testingzip 

Reply
0 Kudos
MVP Esteemed Contributor

Lefteris,  Here are my corrections to the tool.html.

  • Notice I do not have index.js as you did, as this would create a second instance of that JS file in another scope.
  • No need for any JS API links
  • I call window.opener to get a reference to the code that opened this window
<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:

  • No need for global vars once the fixes to the tool.html are applied
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)
}
}
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Reply
0 Kudos
Regular Contributor

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?

Reply
0 Kudos
MVP Esteemed Contributor

Correct. If you call the script in two different html files each has it's own code scope.

View solution in original post

Reply
0 Kudos