Can I add this web tile layer to a 3d scene?

EvanThoms · ‎10-05-2016

I am trying to modify the WebTileLayer 3d example (WebTileLayer 3D | ArcGIS API for JavaScript 4.1) to use the tiles at this address:

http://tiles.gina.alaska.edu/tiles/SPOT5.SDMI.ORTHO_RGB/tile/{x}/{y}/{z}.png

and I end up with the code below but the tiles never get loaded. They load just fine in a Cesium web globe app so I know they should work. Can anyone help me troubleshoot this?

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 <title>WebTileLayer 3D - 4.1</title>

 <style>
 html,
 body,
 #viewDiv {
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
 }
 </style>

 <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
 <script src="https://js.arcgis.com/4.1/"></script>

 <script>
 require([
 "esri/config",
 "esri/layers/WebTileLayer",
 "esri/Map",
 "esri/views/SceneView",
 "dojo/dom",
 "dojo/domReady!"
 ], function(esriConfig, WebTileLayer, Map, SceneView, dom) {

 esriConfig.request.corsEnabledServers
 .push("a.tile.stamen.com", "b.tile.stamen.com", "c.tile.stamen.com",
 "d.tile.stamen.com");

 var map = new Map({
 ground: "world-elevation"
 });

 var view = new SceneView({
 container: "viewDiv",
 map: map,
 scale: 10000000,
 center: [-154, 62]
 });

 var tiledLayer = new WebTileLayer({
 urlTemplate: "http://tiles.gina.alaska.edu/tiles/SPOT5.SDMI.ORTHO_RGB/tile/{col}/{row}/{level}.png",
 });

 map.add(tiledLayer);
 });
 </script>
</head>

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

</html>

VeronikaLanders · ‎10-09-2016

Hi Evan

it looks like you are missing to add your server to CORS (see config | API Reference | ArcGIS API for JavaScript 4.1).

When you add the following to your code, tiles should be loading:

esriConfig.request.corsEnabledServers.push("http://tiles.gina.alaska.edu");

I hope this helps.

Kind regards

Veronika

View solution in original post

VeronikaLanders · ‎10-09-2016