Overlay Layer Options

The overlay layer options can be used for managing tile layers. This is done by adding a layers object to the Aeris Interactive Map. Below is the syntax of the object, definition of the parameters, and an example of how to use them.

Visit the Adding Custom Layers page for details regarding AMP layers that aren't listed here.

Parameter Definition
layers.objects An array of tile layers that can be configured.
layers.objects[#].type

The type of tile layer. Currently available layers include:

Advisories
Chlorophyll
DewPoints
HeatIndex
Humidity
Precip
QPF
Radar
Satellite
SatelliteGlobal
SatelliteVisible
SeaSurfaceTemps
SnowDepth
Temps
WindChill
Winds

layers.objects[#].selected If set to true, the layer will be selected and displayed immediately when the application is loaded.
layers.objects[#].opacity The initial opacity of the layer.
layers.objects[#].zIndex The initial z-index of the layer. A layer with a higher z-index will appear above a layer with a lower z-index.
layers.objects[#].group Layers configured with the same group name will be grouped together in the sidebar controls. Group names can be any string, and are used as the group label text.
layers.objects[#].label Allows customizing the label / name of the overlay being added.
layers.objects[#].legend A URL to custom legend to use in place of the default legend.
layers.objects[#].legendRetina A URL to high quality custom legend to use in place of the default legend.

Javascript layer customization

<div id="map-canvas" style="margin-left:auto; margin-right:auto; width:600px; 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="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css">
<link media="screen" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script><script type="text/javascript" src="//cdn.aerisjs.com/aeris-interactive/aim.js"></script><script type="text/javascript">
    var aerisMapBuilder = new aeris.interactive.MapAppBuilder({
        apiId: 'clientID',
        apiSecret: 'clientSecret',
        el: '#map-canvas',
        modules: {
            layers: {
                objects: [
                    {
                        type: 'Radar',
                        selected: true,
                        opacity: .80
                    },
                    {
                        type: 'Advisories',
                                      group: 'Advisories'
                    },
                    {
                        type: 'DewPoints',
                        group: 'Currents'
                    },
                ]
            }
        }
    });
    aerisMapBuilder.start();
</script>

Test it out!

JS Bin on jsbin.com