When does getMap() return a valid map?

[EricPaitz]

I am using the JavaScript SDK 3.18 and I am relatively new to the SDK. I am using Angular 2 and TypeScript and I am trying to create my own layer that extends the ArcGISDynamicMapServiceLayer and I need access to that map so I can listen to the extent-changed event. I have tried the following in my TypeScript.

export class MyDynamicMapServiceLayer extends ArcGISDynamicMapServiceLayer {
    constructor(url: string, options? ArcGISDynamicMapServiceLayerOptions) {
        super(url, options);
        this.on('load', (event) => {
            //Check this.getMap() here
            this.getMap();
            this._map;
            this['_map']
            event.target.getMap();
            event.layer.getMap();
        });
    }
}

I have tried to get a reference to the map from the load event several different ways without success. What is the correct way to either get a reference to the map or to listen to the extent changed (so I can get access to the current LOD) from within a custom layer? Any suggestions would be appreciated.

Thanks,

   -eric

[HemingZhu]

this._map=super.getMap();??

[EricPaitz]

Thank you for the reply but super.getMap() also seems to return null.

export class MyDynamicMapServiceLayer extends ArcGISDynamicMapServiceLayer {
    constructor(url: string, options? ArcGISDynamicMapServiceLayerOptions) {
        super(url, options);
        this.on('load', (event) => {
            console.log(super.getMap();
        });
    }
}

[HemingZhu]

base on MDN javascript doc, super.functionOnParent([arguments]) is the way to call. The only issue here is that the layer has to be loaded on the map before you can call this to get the map instance. tried this

super.on('load', (event) => {
       console.log(this.getMap());
});

[EricPaitz]

I agree that this appears to be the correct way (and time) to access the map. I am adding my layer to the map before I try to call getMap(). While I was trying to understand what was going wrong I would write out the event object to the console from the load event. It would show in the debug window that _map was set but when I tried to access it with something like getMap() it was always null. That to me looks like an odd timing issue so I tired the following.

export class MyDynamicMapServiceLayer extends ArcGISDynamicMapServiceLayer {
    constructor(url: string, options? ArcGISDynamicMapServiceLayerOptions) {
        super(url, options);
        this.on('load', (event) => {
            setTimeout(() => {
                console.log(super.getMap());
            }, 0);
        });
    }
}

It might be strange to use a setTimeout this way, especially since the wait time is 0 milliseconds, but this appears to let the layer finish initializing and set the _map variable, which I think is what getMap() returns. Oddly enough this worked.

[EricPaitz]

From what I have seen this is not a 100% solution either. I really do not understand why getMap() would not return a valid map object when called from within the load event. I have it mostly working now but I am not happy with the approach.

[EvelynHernandez]

Why u need to extend that layer class?
Also u can make something like ...

var map = {
 createMap: function(div,basemap,centerx,centery,zoom){
 this.map = new esri.Map(div, {
 center:[centerx, centery],
 basemap: basemap,
 zoom:zoom,
 logo: false
 });
 return this.map;
 },
 getMap: function(){
 return this.map;
 }
}

export map;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[EricPaitz]

Thanks for your reply. I am extending the ArcGISDynamicMapServiceLayer class so I can add several properties and objects to support a custom map contents (i.e. legend) control for our Angular 2 application. We would like to show sublayers, visibility, renderer, symbols, visible at scale for sublayers, etc.

[AndyGup]

Hi Eric, if you haven't already done so, I'd suggest taking a look at patterns used by angular-esri-loader: GitHub - tomwayson/angular-esri-loader: An Angular 2 service to help you load ArcGIS API for JavaScr.... I can't speak specifically to extending layers, but it will definitely make your life easier as related to managing all the JS API module and Object dependences. 

[EricPaitz]

Thanks for your reply Andy. We are familiar with how to load the ArcGIS JS API for an Angular 2 project and we are familiar with most of the posts from Tom Wayson about the topic. My question is about the live-cycle of the objects in the ArcGIS JS API, specifically the Map and Layer objects.