Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extend an esri class

See original GitHub issue

Hi Guys,

Any ideas on how to extend a class? Previously using imports I would just do the following for non-accessor and accessor classes.

import ScaleBarViewModel from "esri/widgets/ScaleBar/ScaleBarViewModel";
import SimpleRenderer from "esri/renderers/SimpleRenderer";
import asd from "esri/core/accessorSupport/decorators";

export class ScaleBarViewModelExtended extends ScaleBarViewModel {
   // implementation

export class FixRenderer extends asd.declared(SimpleRenderer) {
  // implementation

I know I can create the extended class outside of the project and then import the js in using dojo config, but there’s some cases where having the extended class inside of the project is definitely preferable if not necessary (shared interfaces, project specific logic etc…) I’m using Angular 6.1.3 if that makes a difference.


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

Cubericecommented, May 17, 2019

I created a Stackblitz for anyone wanting to see how to extend the TileLayer using the solution provided. Extending WebTileLayer

For my case we needed to override the getTileUrl method, to reverse the row. In order for this to work just supply a valid layer urlTemplate.

nickcamcommented, Jan 31, 2019

In case anyone else comes across this - I’ve had to change how I subclass esri modules as I found out the above method won’t work when building using aot.

Now wrap the subclass in an outer class and expose it through a function call. This get’s around the need for the await import() call (which wasn’t working in aot), but still allows the required modules to be loaded at runtime.

import { EsriService } from "../services/esri.service";

// a class to hold and return the new type
export class ScaleBarExtendedType {
  // a method to return the new type
  public static getClass() {

    // dynamically get the required esri modules
    let scaleBar = EsriService.getModule<__esri.ScaleBarConstructor>("ScaleBar");

   // this is the declaration and the implementation of the subclass.
    let ScaleBarExtended = class extends scaleBar {

     // subclass implementation, constructor, overriden methods, properties etc...
      constructor(properties: __esri.ScaleBarProperties) {

      private _renderLine(a, b) {
         // override method implmentation

   // return the subclass type
    return ScaleBarExtended;

To use the subclass

// call the static method on the outer class to get the subclass type
let ScaleBarExtended = ScaleBarExtendedType.getClass();

// Instantiate it. Will still be statically typed as well so you'll get intellisense and all that goodness.
let scalebar = new ScaleBarExtended({ view: this.mapView, unit: "dual", id: "scalebar" });

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting started with class extensions
Class extensions are java extension classes that are developed using ArcObjects application programming interfaces (APIs) and deployed to ArcGIS.
Read more >
Correctly Extend a Class: Constructor
I'm looking for guidance with how to properly extend a class with respect to its constructor. All of this is in typescript.
Read more >
Open feature class with extension in Pro?
Solved: We have feature classes with ArcGIS 10.x vintage feature class extensions. Is it possible to open them in ArcGIS Pro?
Read more >
Extending ArcGIS Survey123 | Esri Training Video
View your course activity, schedule, and wish list. ... Continue courses in progress and view completions. ... Attend instructor-led classes, MOOCs, ...
Read more >
How to extend MapView class?
I'm trying to create a custom class extending the MapView class in a React application using the arcgis/core package.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found