topic Re: Pass on url and load map in ArcGIS JavaScript Maps SDK Questions

Pass on url and load map

LefterisKoumis — Sat, 11 Dec 2021 06:51:51 GMT

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

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

Re: Pass on url and load map

RobertScheitlin__GISP — Wed, 09 Sep 2020 15:39:57 GMT

Are esrimap and view also global vars?

Re: Pass on url and load map

LefterisKoumis — Wed, 09 Sep 2020 16:20:58 GMT

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?

Re: Pass on url and load map

RobertScheitlin__GISP — Wed, 09 Sep 2020 16:30:37 GMT

Lefteris,

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

Re: Pass on url and load map

LefterisKoumis — Sat, 11 Dec 2021 06:51:54 GMT

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

Re: Pass on url and load map

RobertScheitlin__GISP — Wed, 09 Sep 2020 16:58:16 GMT

Lefteris,

Inside your check function you need to use window.esrimap

Re: Pass on url and load map

LefterisKoumis — Wed, 09 Sep 2020 17:14:05 GMT

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

Re: Pass on url and load map

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:51:57 GMT

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

Re: Pass on url and load map

LefterisKoumis — Wed, 09 Sep 2020 18:39:50 GMT

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?

Re: Pass on url and load map

RobertScheitlin__GISP — Wed, 09 Sep 2020 18:46:52 GMT

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