Mapbox Example

The following is an example of the Aeris Interactive Maps using Mapbox as the base layer. In order to use Mapbox as the base map, you will require a Mapbox access token. Directions on receiving a Mapbox access token can be found on the Mapbox Help Page.

 

 



<div id="map-canvas" style="margin-left:auto; margin-right:auto; width:800px; height:500px"> </div>
<link media="screen" type="text/css" rel="stylesheet" href="//cdn.aerisjs.com/aeris-interactive/assets/css/default/style.css">
<link media="screen" type="text/css" rel="stylesheet" href="//api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css">
<script type="text/javascript" src="//api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script><script type="text/javascript" src="//cdn.aerisjs.com/aeris-interactive/aim-leaflet.js"></script><script type="text/javascript">
    // set your mapbox access token
    L.mapbox.accessToken = 'mapbox access token';
    var aerisMapBuilder = new aeris.interactive.MapAppBuilder({
        apiId: 'client ID here',
        apiSecret: 'client Secret here',
        el: '#map-canvas',
        modules: {
            map: {
                baseLayer: new aeris.maps.layers.MapBox({
                    mapBoxId: 'mapBoxId'
                })
            }
        }
    });
    aerisMapBuilder
        .start()
        .done(function() {
            console.log('Aeris Interactive Maps is initialized.');
        })
        .fail(function(err) {
            console.error(err);
        });
</script>