topic When does getMap() return a valid map? in ArcGIS JavaScript Maps SDK Questions

When does getMap() return a valid map?

EricPaitz — Sun, 12 Dec 2021 16:39:26 GMT

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

Re: When does getMap() return a valid map?

HemingZhu — Fri, 26 May 2017 16:56:13 GMT

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

Re: When does getMap() return a valid map?

EricPaitz — Sun, 12 Dec 2021 16:39:28 GMT

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();
        });
    }
}

Re: When does getMap() return a valid map?

HemingZhu — Sun, 12 Dec 2021 01:05:00 GMT

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());
});

Re: When does getMap() return a valid map?

EvelynHernandez — Sun, 12 Dec 2021 01:05:03 GMT

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;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: When does getMap() return a valid map?

EricPaitz — Sun, 12 Dec 2021 16:39:31 GMT

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.

Re: When does getMap() return a valid map?

EricPaitz — Fri, 26 May 2017 18:24:17 GMT

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.

Re: When does getMap() return a valid map?

AndyGup — Fri, 26 May 2017 23:49:43 GMT

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 JavaScript Modules. 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.

Re: When does getMap() return a valid map?

EricPaitz — Tue, 13 Jun 2017 18:41:49 GMT

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.

Re: When does getMap() return a valid map?

EricPaitz — Tue, 13 Jun 2017 18:43:43 GMT

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.

Re: When does getMap() return a valid map?

AndyGup — Tue, 13 Jun 2017 23:17:26 GMT

Gotcha. I re-read your original post and I've seen this behavior before. There has been much discussion in past on what exactly the 'load' event represents. From the API reference "Fires after layer properties for the layer are successfully populated," which is sort of ambiguous. My hunch concurs with yours that the layer has not finished loading "all" of its resources. Have you tried listening for the 'update-end' event just to see if it makes a difference?