nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Custom BaseTileLayer in Angular

DaveAdams

Hi,

I'm trying to add a custom TileLayer to the map using the new ES modules in 4.18 but am unsure how to implement the createSubclass method on BaseTileLayer. I can see that is a dojo method so was unsure how to perform the equivalent in Typescript/Angular.

Any help would be greatly appreciated.

Find more posts tagged with

Accepted answers

All comments

bearingwest

@AndyGup has this still not been fixed? I'm running into this on 4.27.

DaveAdams

Hi Andy, many thanks, that workaround works for now and my tile layer is now available in the map. I did find a similar issue in an older version here: https://community.esri.com/t5/arcgis-api-for-javascript/customelevationlayer-with-typescript/m-p/380681

AndyGup

I can repro, that's a TypeScript definition problem, I'll open an issue. You can temporarily bypass the issue and continue your builds by using //@ts-ignore:

        //@ts-ignore
        var ImageLayer = BaseTileLayer.createSubclass({

I also see that the API reference documentation needs to be updated. We're looking into that, as well. Thanks for reporting.

DaveAdams

Hi Andy,

I believe I have imported correctly

import BaseTileLayer from '@arcgis/core/layers/BaseTileLayer';

however I get an error on the createSubClass method where it says the property does not exist on type BaseTileLayerConstructor when following the sandbox example .

var imageLayer = BaseTileLayer.createSubClass({

properties: {

urlTemplate: null,

tint: {

value: null,

type: Color

}

// generate the tile url for a given level, row and column

getTileUrl: function(level, row, col) {

return urlTemplate

.replace("{z}", level)

.replace("{x}", col)

.replace("{y}", row);

}

});

AndyGup

Here's an AMD example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-custom-tilelayer. There aren't any dojo methods in the 4.18 API. The way the modules functionality is implemented in ESM (POJO or TypeScript) is exactly the same as AMD, you just need to change the path used by the import statements: https://developers.arcgis.com/javascript/latest/es-modules/#migrate-to-es-modules.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.