AnsweredAssumed Answered

Dynamic Layer in 2D is not working with JS API 4 beta

Question asked by honza@neotreks.com on Aug 10, 2015
Latest reply on Aug 10, 2015 by KEkenes-esristaff

Hi,

I've been trying to create a really simple 2D map with JS API 4 beta to display imagery from

Demographics/USA_Average_Household_Size (MapServer)

 

Here's some code that worked for me with API 3.13.

(Btw. for some reason it is not working with 3.14. Looks like a bug in 3.14. You can try it here.)

 

<!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>Create Map and add a dynamic layer</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css" />

    <style>

        html, body, #mapDiv { padding: 0; margin: 0; height: 100%; }

    </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

        require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer"], function (Map, ArcGISDynamicMapServiceLayer) {

            var map = new Map("mapDiv");

            var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/Demographics/USA_Average_Household_Size/MapServer");

            map.addLayer(dynamicMapServiceLayer);

        });

    </script>

</head>

<body>

    <div id="mapDiv"></div>

</body>

</html>

 

I tried to port this simple page to work with JS API 4 but I ran into several problems.

 

First I could find any API 4 class to use instead of the API 3 ArcGISDynamicMapServiceLayer in the API 4 Reference.

When I downloaded the offline distribution of the API 4 I found out there was a esri/layers/ArcGISDynamicLayer class. I tried to use this one but that was not working as I expected.

 

Was it my mistake to try to use an undocumented class? Is there any other class I should have used instead of esri/layers/ArcGISDynamicLayer?

 

The first problem I had with esri/layers/ArcGISDynamicLayer was "'b.tileInfo.snapScale' is not a function" in MapView.js on line 164. See runExample1() in the code below. Have I used the esri/layers/ArcGISDynamicLayer class wrong or is it a bug in JS API 4?

 

I could see from the MapView.js code that I could workaround the "'b.tileInfo.snapScale' is not a function" problem by setting some tiling schema on the map viewer. I tried to do that by adding a hidden WebTiledLayer as can be see in runExample2() below. That moved me one step further but I got and HTTP 404 Not Found error instead. It failed to GET http://js.arcgis.com/4.0beta1/esri/views/2d/layers/DynamicLayerView2D.js

Is this a bug or is this just a not-implemented feature in the API 4 beta and I was not supposed to be using that class at all?

 

<!DOCTYPE html>

<html><head>

    <meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>ArcGISDynamicLayer on 2D map</title>

    <style>html, body { padding: 0; margin: 0; }</style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.0beta1/esri/css/esri.css">

    <script src="https://js.arcgis.com/4.0beta1/"></script>

    <script>

        require([ "esri/config", "esri/layers/WebTiledLayer", "esri/Map",

          "esri/views/MapView", 'esri/layers/ArcGISDynamicLayer',

          'esri/layers/ArcGISTiledLayer', "esri/layers/support/TileInfo",

          "dojo/domReady!"], function (esriConfig, WebTiledLayer, Map, MapView,

          ArcGISDynamicLayer, ArcGISTiledLayer, TileInfo) {

            var map = new Map();

            var view = new MapView({

                map: map,

                center: [-56, -12],

                scale: 123456791,

                container: "viewDiv"

            });

            var addWebTiledLayer = function () {

                map.add(new WebTiledLayer({

                    urlTemplate: 'http://${subDomain}.tile.stamen.com/toner/${level}/${col}/${row}.png',

                    subDomains: ['a', 'b', 'c', 'd'],

                    visible: false

                }));

            };  

            var addArcGISDynamicLayer = function () {

                //Will fail to load http://js.arcgis.com/4.0beta1/esri/views/2d/layers/DynamicLayerView2D.js

                map.add(new ArcGISDynamicLayer({

                    url: 'http://server.arcgisonline.com/arcgis/rest/services/Demographics/USA_Average_Household_Size/MapServer'

                }));

            }

            var addArcGISTiledLayer = function () {

                map.add(new ArcGISTiledLayer({

                    url: 'http://server.arcgisonline.com/arcgis/rest/services/Demographics/USA_Average_Household_Size/MapServer'

                }));

            };

            var runExample1 = function () {

                //will fail on "'b.tileInfo.snapScale' is not a function" in MapView.js on line 164

                //    l=b.tileInfo.snapScale(l)

                //b.tileInfo seems to be a plain JSON object

                //is looks like it's missing a call like

                //    b.tileInfo = TileInfo.fromJSON(b.tileInfo)

                //I think that it's a bug in the JS API 4 beta

                addArcGISDynamicLayer();

            };

            var runExample2 = function () {

                //will fail to GET http://js.arcgis.com/4.0beta1/esri/views/2d/layers/DynamicLayerView2D.js

                //server returns HTTP 404 Not Found

                //I think that it's a bug in the JS API 4 beta

                addWebTiledLayer();

                addArcGISDynamicLayer();

            };

            var runExample3 = function () {

                //will at least display some imagery but it will be small

                //it's probably because the map viewer will be zoomed out to show the entire world

                //it won't request dynamic imagery from the map server but it'll ask for tiles

                addArcGISTiledLayer();

            };      

            runExample1();

            //runExample2();

            //runExample3();

        });

    </script>

</head><body>

    <div id="viewDiv"></div>

</body></html>

 

Is there a web page showing the current state of API 4 development?

What are the differences in what's available now and what's going to be available in the final release?

Is it OK to try to use undocumented classes?

Do you expect the code written against API 4 beta to work also against the final API 4 release?

 

Thank you in advance for your answers!

Btw. I like the API 4 a lot

 

Message was edited by: Jan Pospech. Fixed code snippets to make them display in the read-only mode.

Outcomes