JSAPI v4.3 - Create custom subClass inherited from WebTileLayer

[MaximeDemers]

Hi,

I am trying to create a custom subclass inherited from the WebTileLayer class using esri/core/Accessor. I was following the doc from here: Accessor | API Reference | ArcGIS API for JavaScript 4.3 

My custom class module is the following:

define(
    ["esri/layers/WebTileLayer", "esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/layers/support/TileInfo"],
    function(WebTileLayer, SpatialReference, Extent, TileInfo) {

        return WebTileLayer.createSubclass({
            constructor: function(urlTemplate) {
                this.urlTemplate = urlTemplate;
                this.spatialReference = new SpatialReference({ wkid: 3857 });
                this.initialExtent = (this.fullExtent = new Extent(-20037508.34787, -20037508.34278, 20037508.34278, 20037508.34787, this.spatialReference));
                this.tileInfo = new TileInfo({
                    "size": 256,
                    "dpi": 96,
                    "format": "PNG",
                    "compressionQuality": 0,
                    "origin": { "x": -20037508.342787, "y": 20037508.342787 },
                    "spatialReference": {
                        "wkid": 3857
                    },
                    "lods": [
                        { "level": 0, "resolution": 156543.033928, "scale": 591657527.591555 },
                        { "level": 1, "resolution": 78271.5169639999, "scale": 295828763.795777 },
                        { "level": 2, "resolution": 39135.7584820001, "scale": 147914381.897889 },
                        { "level": 3, "resolution": 19567.8792409999, "scale": 73957190.948944 },
                        { "level": 4, "resolution": 9783.93962049996, "scale": 36978595.474472 },
                        { "level": 5, "resolution": 4891.96981024998, "scale": 18489297.737236 },
                        { "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618 },
                        { "level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309 },
                        { "level": 8, "resolution": 611.49622628138, "scale": 2311162.217155 },
                        { "level": 9, "resolution": 305.748113140558, "scale": 1155581.108577 },
                        { "level": 10, "resolution": 152.874056570411, "scale": 577790.554289 },
                        { "level": 11, "resolution": 76.4370282850732, "scale": 288895.277144 },
                        { "level": 12, "resolution": 38.2185141425366, "scale": 144447.638572 },
                        { "level": 13, "resolution": 19.1092570712683, "scale": 72223.819286 },
                        { "level": 14, "resolution": 9.55462853563415, "scale": 36111.909643 },
                        { "level": 15, "resolution": 4.77731426794937, "scale": 18055.954822 },
                        { "level": 16, "resolution": 2.38865713397468, "scale": 9027.977411 },
                        { "level": 17, "resolution": 1.19432856685505, "scale": 4513.988705 },
                        { "level": 18, "resolution": 0.597164283559817, "scale": 2256.994353 },
                        { "level": 19, "resolution": 0.298582141647617, "scale": 1128.497176 }
                    ]
                });
                this.load(this);
            },
            getTileUrl: function(level, row, col) {
                var maxY = this.getTileMaxCountY(level);
                var updatedRow = maxY - row - 1;
                return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", updatedRow);
            },
            getTileMaxCountY: function(level) {
                switch (level) {
                    case 1:
                        return 2;
                        break;
                    case 2:
                        return 4;
                        break;
                    case 3:
                        return 8;
                        break;
                    case 4:
                        return 16;
                        break;
                    case 5:
                        return 32;
                        break;
                    case 6:
                        return 64;
                        break;
                    case 7:
                        return 128;
                        break;
                    case 8:
                        return 256;
                        break;
                    case 9:
                        return 512;
                        break;
                    case 10:
                        return 1024;
                        break;
                    case 11:
                        return 2048;
                        break;
                    case 12:
                        return 4096;
                        break;
                    case 13:
                        return 8192;
                        break;
                    case 14:
                        return 16384;
                        break;
                    case 15:
                        return 32768;
                        break;
                    case 16:
                        return 65536;
                        break;
                    case 17:
                        return 131072;
                        break;
                    case 18:
                        return 262144;
                        break;
                    case 19:
                        return 524288;
                        break;
                    case 20:
                        return 1048576;
                        break;
                    case 21:
                        return 2097153;
                        break;
                    default:
                        return 0;
                }
            }
        });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When I initialize a new instance of this class doing: new MySubClass("https://mydomain.com/msp/{level}/{col}/{row}.png");

I got the errror this.load() is not a function. this.load() is called at the end of the constructor method of my subclass, and this method should have been inherited from WebTileLayer class. Why this method is not accessible from the subclass?

Thank you,

Maxime

[thejuskambi · Accepted solution]

I am not sure if you are doing it right. How did you assume you are inheriting WebTileLayer?

When you do "Accessor.createSubclass", it will create an class inherited by Accessor and not WebTileLayer. The "declaredClass" is just a property which holds a string name of the class. In my opinion, it is just a property used to check the type of the object/instance, since there is no direct way in JavaScript to check the type of an object.

If you wish to extend WebTileLayer, you should be using WebTileLayer.createSubclass

[MaximeDemers]

Thank you again for your help (second time today!). I did not know every esri classes had the createSubclass method. This method is not described in the WebTileLayer documentation: WebTileLayer | API Reference | ArcGIS API for JavaScript 4.3 

I suppose it inherited the createSubclass method from the Accessor class, but even in the Accessor documentation this method is not described Accessor | API Reference | ArcGIS API for JavaScript 4.3 

Thanks again,

Maxime

[thejuskambi]

createSubclass is dojo way of creating/extending objects and is part of "dojo/_base/declare". Check out the below link about creating objects and inheritance in dojo. There is a section explaining about "createSubclass()" function.

dojo/_base/declare — The Dojo Toolkit - Reference Guide