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

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

Find more posts tagged with

Accepted answers

All comments

AndyGup

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?

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.

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

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.

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.

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;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

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

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

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.