custom basemap not working 4.1 api

RamkumarNunduri · ‎10-26-2016

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‌

RobertScheitlin__GISP · ‎10-26-2016

Ram,

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

RamkumarNunduri · ‎10-26-2016

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.

RobertScheitlin__GISP · ‎10-26-2016

Ram,

Please post your code for review.

RamkumarNunduri · ‎10-28-2016

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>

RobertScheitlin__GISP · ‎10-29-2016

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

RamkumarNunduri · ‎10-31-2016

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.

RamkumarNunduri · ‎10-31-2016

Roberts,

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

Some thing strange? please advice.

Ram Kumar.

RobertScheitlin__GISP · ‎10-31-2016

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");

RamkumarNunduri · ‎10-31-2016

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.