Pass on url and load map

LefterisKoumis · ‎09-08-2020

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)
       
    }

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎09-09-2020

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

View solution in original post

RobertScheitlin__GISP · ‎09-09-2020

Are esrimap and view also global vars?

LefterisKoumis · ‎09-09-2020

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?

RobertScheitlin__GISP · ‎09-09-2020

Lefteris,

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

LefterisKoumis · ‎09-09-2020

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)
        }
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎09-09-2020

Lefteris,

Inside your check function you need to use window.esrimap

LefterisKoumis · ‎09-09-2020

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

RobertScheitlin__GISP · ‎09-09-2020

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)
        }
    }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LefterisKoumis · ‎09-09-2020

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?

RobertScheitlin__GISP · ‎09-09-2020

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