Obtaining Underlying Map Object

The AIM library allows you to utilize a variety of mapping frameworks as a base map. Each 3rd party framework has features that can be used to customize your map. Within AIM, you can obtain this underlying map object and customize your map using AIM's done() method in a few easy steps.

Let's start with a basic example that uses the Leaflet library:

var aerisMapBuilder = new aeris.interactive.MapAppBuilder({
        apiId: 'CLIENT_ID',
        apiSecret: 'CLIENT_SECRET',
        el: '#map-canvas'
    });
    
    aerisMapBuilder
        .start()
        .done(function() {
            console.log('Aeris Interactive Maps is initialized.')
        })
        .fail(function(err) {
            console.error(err);
        });

You'll notice we are already using the done() method to print Aeris Interactive Maps is initialized in the console. Within the done() method, let's start by obtaining the Leaflet map object:

aerisMapBuilder
        .start()
        .done(function() {
            console.log('Aeris Interactive Maps is initialized.')
            // Initializing the Leaflet map object
            var lmap = aerisMapBuilder.getAppState().get('map').getView();
        })
        .fail(function(err) {
            console.error(err);
        });

Next, let's say this application needs a marker for the Mall of America which is located just south of Minneapolis, MN. Creating a marker for a Leaflet map is well documented and relatively simple. Once you have your lat / long, which can be obtained from the /places endpoint in the Aeris API, you can create the marker:

aerisMapBuilder
        .start()
        .done(function() {
            console.log('Aeris Interactive Maps is initialized.')
            // Initializing the Leaflet map object
            var lmap = aerisMapBuilder.getAppState().get('map').getView();
            // Create Mall of America marker
            var mallOfAmerica = L.marker([44.85441,-93.24356]);
        })
        .fail(function(err) {
            console.error(err);
        });

In the last step we will need to add the new marker to our Leaflet map. Leaflet has an addTo() method that can be utilized here:

aerisMapBuilder
        .start()
        .done(function() {
            console.log('Aeris Interactive Maps is initialized.')
            // Initializing the Leaflet map object
            var lmap = aerisMapBuilder.getAppState().get('map').getView();
            // Create Mall of America marker
            var mallOfAmerica = L.marker([44.85441,-93.24356]);
            // Add the marker to your lmap
            mallOfAmerica.addTo(lmap);
        })
        .fail(function(err) {
            console.error(err);
        });

Last modified: February 20, 2018