2

I'm relatively new to the ArcGIS JS API, but I'm looking to use the OS Open Background as the basemap. I'm using the latest (4.0) API and I can't find a working example or decent documentation that describes the process. I can find enough for v3.16, but nothing that also applies to 4.

I'm currently trying something like this:

layerUrl = "https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer",

layer = new TileLayer(layerUrl, {
    tileServers: ["https://tiles1.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer", "https://tiles2.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer", "https://tiles3.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer", "https://tiles4.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer"]
});
map.add(layer);

...but this just causes the browser to hang indefinitely before crashing, so something isn't responding as expected or the URLs aren't correct. Any pointers?

  • Do you receive an error message or anything in the log file? – MaryBeth Jun 27 '16 at 13:19
  • Nothing - the browser just hangs and then Chrome crashes. Nothing in the dev tools log, no. – edparry Jun 27 '16 at 13:20
2

From the documentation:

Known Limitations

When adding an TileLayer to a map in a SceneView, the following limitations exist:

If viewingMode is global, then only services with a Web Mercator spatial reference (wkid 3857) are supported.
If viewingMode is local, then only services with projected coordinate systems are supported.
Only Tile layers with the following tiling scheme specifications are supported:

256x256 pixel tiles
Scale levels must increase or decrease by a power of two
At level 0 there shouldn't be more than 30 root tiles.
All tiled layers must have the same tiling scheme and SpatialReference.

The limitition is for the 3D. This is the code to work with 2D:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with SceneView - Create a 3D map - 4.0</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

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

      var map = new Map();

      var layerUrl = "https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer";

      var layer = new TileLayer(layerUrl, {
      tileServers: ["https://tiles1.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer", "https://tiles2.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer", "https://tiles3.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer", "https://tiles4.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer"]
      });
      map.add(layer);

      var view = new SceneView({
          container: "viewDiv",
          viewingMode: "local",
          map: map
        });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>
  • 1
    ...so are you saying that the OS maps are not compatible with v4 of the JS API at this stage? I'm not sure how I can check those maps have those limitations? – edparry Jun 27 '16 at 13:57
  • 1
    Look at the Service Description. The Spatial Reference is 27700... – lele3p Jun 27 '16 at 14:06
  • 1
    Openlayers 3 example to get around the limitation jsfiddle.net/goldrydigital/r0kqdwan – Mapperz Jun 27 '16 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.