topic Re: custom basemap not working 4.1 api in ArcGIS JavaScript Maps SDK Questions

custom basemap not working 4.1 api

RamkumarNunduri — Wed, 26 Oct 2016 10:02:59 GMT

I am new to JS API4.1. I tried installing it on a system with Windows 7 running IIS. The instructions given in the install.html were followed. But, the following error is seen in console after using the test API code given in the install.html page.that loads a custom basemap. I have tested the Map service that i was using and checked the JS API 4.1 init.js through web browser. All things seem to be working fine.

The error reads as follows:

TypeError: this._layerViewsMap.forEach is not a function.

The JS API and the service URL are seen to be going through in the console window.

Request for immediate responses.

Ram Kumar.

#4.1‌

Re: custom basemap not working 4.1 api

RobertScheitlin__GISP — Wed, 26 Oct 2016 13:00:19 GMT

Ram,

Did this work previously using 4.0 and has stopped using 4.1?

Re: custom basemap not working 4.1 api

RamkumarNunduri — Wed, 26 Oct 2016 13:28:09 GMT

Robert,

Frankly I did not use 4.0 api. The last i used was api 3.12.

I see that the entire JS API has been restructured for ease of developers (as said).

I checked the Map service (REST url) running on Win2008 server. That was getting accessed in my web browser.

I would request you to give clarity on local installation of JS API 4.1 keeping the following:

ArcGIS Server 10.4 running on Win2008 server with web adaptor configured on IIS.

Development system uses IIS configured with JS API 4,1 on Win7.

I have tried using view.then() to know the promise resolution. Also used try/catch to get any kind of error.

But nothing happens after the error (mentioned in previous post) gets logged and later the Mapserver url get listed in console with response code 200 OK.

Ram Kumar.

Re: custom basemap not working 4.1 api

RobertScheitlin__GISP — Wed, 26 Oct 2016 13:37:59 GMT

Ram,

Please post your code for review.

Re: custom basemap not working 4.1 api

RamkumarNunduri — Sat, 29 Oct 2016 02:05:32 GMT

Roberts,

The code is as below. You may note that i was running this code using local installation of JS API 4.1 as mentioned in previous posts. The base map i used is arcgis server tiled map service (wkid:3857).

<!DOCTYPE html><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />    <title>Test Map</title>    <link rel="stylesheet" href="http://myserver/arcgis_js_api/library/4.1/4.1/dijit/themes/claro/claro.css" />    <link rel="stylesheet" href="http://myserver/arcgis_js_api/library/4.1/4.1/esri/css/main.css" />    <style>      html, body, #ui-map-view {         margin: 0;         padding: 0;         width: 100%;         height: 100%;       }     </style>    <script src="http://myserver/arcgis_js_api/library/4.1/4.1/init.js"></script>    <script>      var myMap, view;       require([         "esri/Basemap",         "esri/layers/TileLayer",         "esri/Map",         "esri/views/MapView",         "dojo/domReady!"       ], function (Basemap, TileLayer, Map, MapView){         // --------------------------------------------------------------------         // If you do not have public Internet access then use the Basemap class         // and point this URL to your own locally accessible cached service.         //          // Otherwise you can just use one of the named hosted ArcGIS services.         // --------------------------------------------------------------------         var layer = new TileLayer({           url: "http://myserver/arcgis/rest/services/...../MapServer"         });         var customBasemap = new Basemap({           baseLayers: [layer],           title: "Custom Basemap",           id: "myBasemap"         });         myMap = new Map({           basemap: customBasemap         });         view = new MapView({           center: [-111.87, 40.57], // long, lat           container: "ui-map-view",           map: myMap,           zoom: 6         });       });     </script>  </head>  <body class="claro">    <div id="ui-map-view"></div>  </body></html>

Re: custom basemap not working 4.1 api

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:33:01 GMT

Ram,

I hosted the 4.1 API locally and used a local tiled map service as the basemap and I did not have any issues.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Test Map</title>
    <link rel="stylesheet" href="arcgis_js_api/library/4.1/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="arcgis_js_api/library/4.1/esri/css/main.css" />
    <style>
        html,
        body,
        #ui-map-view {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="arcgis_js_api/library/4.1/init.js"></script>
    <script>
        var myMap, view;
        require([
            "esri/Basemap",
            "esri/layers/TileLayer",
            "esri/Map",
            "esri/views/MapView",
            "dojo/domReady!"
        ], function(Basemap, TileLayer, Map, MapView) {
            // --------------------------------------------------------------------
            // If you do not have public Internet access then use the Basemap class
            // and point this URL to your own locally accessible cached service.
            //
            // Otherwise you can just use one of the named hosted ArcGIS services.
            // --------------------------------------------------------------------
            var layer = new TileLayer({
                url: "http://My server/arcgis/rest/services/my service/MapServer"
            });
            var customBasemap = new Basemap({
                baseLayers: [layer],
                title: "Custom Basemap",
                id: "myBasemap"
            });
            myMap = new Map({
                basemap: customBasemap
            });
            view = new MapView({
                center: [-111.87, 40.57], // long, lat
                container: "ui-map-view",
                map: myMap,
                zoom: 6
            });
        });
    </script>
</head>

<body class="claro">
    <div id="ui-map-view"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: custom basemap not working 4.1 api

RamkumarNunduri — Mon, 31 Oct 2016 12:28:06 GMT

Roberts,

I tried with the code you posted. I am still stuck with the same error.

The only modification i did in your code was to add the full URL in hrefs and src attributes.

Does this has to do anything with config CORS/proxy?

Did you deploy your application on a different web server?

please suggest me to diagnose this step by step. Otherwise i am already making too many modifications to troubleshoot.

Ram kumar.

Re: custom basemap not working 4.1 api

RamkumarNunduri — Mon, 31 Oct 2016 12:34:56 GMT

Roberts,

I tried accessing the service with 3.16 api and it was working fine.

Some thing strange? please advice.

Ram Kumar.

Re: custom basemap not working 4.1 api

RobertScheitlin__GISP — Mon, 31 Oct 2016 12:54:51 GMT

Ram,

Sounds like you have an issue with your 4.1 local install. I would re-download and deploy the API to your web server. I did not use full urls to the api because it was hosted on the same web server that me app was so there was no need. You may try adding the corsenabledserver:

esriConfig.defaults.io.corsEnabledServers.push("servicesbeta.esri.com");

Re: custom basemap not working 4.1 api

RamkumarNunduri — Tue, 01 Nov 2016 05:04:14 GMT

Roberts,

I downloaded and installed the api again now on the same server system hosting the arcgis services. but the same error repeats. I read through the install.html page and noticed that unlike previous way of replacing "[HOSTNAME_AN_PATH...]" with the url to the api, there was string with <a> tag. Is this to be used the same as described.

Our systems are in a private network so you may not be able to configure them online.

I too strongly feel that i am missing some thing thats simple but can't make out at this point in time. SO, request your guidance in this regard.

Ram Kumar.

Re: custom basemap not working 4.1 api

RobertScheitlin__GISP — Tue, 01 Nov 2016 12:55:24 GMT

Ram,

If you are following the instruction from the arcgis_js_api/library/downloads/index.html then it has this:

Open C:\Inetpub\wwwroot\arcgis_js_api\library\4.1\4.1\init.js in a text editor and search for the text [HOSTNAME_AND_PATH_TO_JSAPI], and replace this text with <a href="https://en.wikipedia.org/wiki/Top-level_domain">fqdn.tld</a>/arcgis_js_api/library/4.1/4.1/

The <a href="https://en.wikipedia.org/wiki/Top-level_domain">fqdn.tld</a> is not suppose to look like that in the doc. It is suppose to be parsed and just be a link to fqdn.tld Which just explains how you need to use a fully qualified domain name of the web server.

So in my case on my development lap top I replaced [HOSTNAME_AND_PATH_TO_JSAPI] with "gislap183" (my machine name) for both step one and step 2.

Re: custom basemap not working 4.1 api

LukaszRutkowski1 — Sat, 12 Nov 2016 10:56:05 GMT

Ram,

Just a suggestion: have you tried different browsers? Check also the compatibility mode in IE (Tools>Compatibility settings).