How to set tileInfo property in VectorTileLayer in JS API v4.14?

AlexanderParshin — Wed, 05 Feb 2020 18:23:37 GMT

I want to use VectorTileLayer to render vector tiles from an external service (not ArcGIS Server). I can set the "style" property to define the source of tiles and rendering styles - this works fine.

But I'm going to serve and render tiles with not default (not WebMercator) projection. As I understand, I need to set proper "tileInfo" for that, but I can't do that because it's a read-only property.

Is there any way to set this property from the JS without server? Or any other ways to handle tiles with a non-standard tiling scheme?

Re: How to set tileInfo property in VectorTileLayer in JS API v4.14?

Rhys-Donoghue — Sat, 11 Dec 2021 18:27:16 GMT

Hi Alexander,

This is probably too late for you but posting this here in case it helps someone else. For a vector tile basemap, the easy way to handle this is by adding an array of LODS to the constraints in the MapView constructor. See the working code example below.

Also, in case you haven't seen this, it is a good place to find vector tile basemaps: Leaflet Provider Demo

Regards,

Rhys

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

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Basemap",
        "esri/layers/VectorTileLayer",
      ], function (Map, MapView, Basemap, VectorTileLayer) {

        const map = new Map({
          basemap: new Basemap({
            baseLayers: [
              new VectorTileLayer({
                url:
                  "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer",
              }),
            ],
          }),
        });

        const view = new MapView({
          container: "viewDiv",
          constraints: {
            lods: [
                {
                  level: 15,
                  resolution: 4.77731426794937,
                  scale: 18055.954822,
                },
                {
                  level: 16,
                  resolution: 2.388657133974685,
                  scale: 9027.977411,
                },
                {
                  level: 17,
                  resolution: 1.1943285668550503,
                  scale: 4513.988705,
                }
            ]
          },
          map: map,
          scale: 10000,
          center: [-3.7038, 40.4168], 
        });
        
      });
    </script>
  </head>

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

topic How to set tileInfo property in VectorTileLayer in JS API v4.14? in ArcGIS JavaScript Maps SDK Questions

How to set tileInfo property in VectorTileLayer in JS API v4.14?

Re: How to set tileInfo property in VectorTileLayer in JS API v4.14?