Basic Options

The basic options can be used for managing a variety of aspects on the map. This is done by adding different objects to the Aeris Interactive Map. Below is the syntax of the object, definition of the parameters, and an example of how to use them.

Parameters Definition
map.zoom Determines how far the map should be zoomed on loading.
map.center Sets the center of the map.
map.scrollZoom If set to true, allows the map to be zoomed in or out by scrolling
map.baseLayer A function that sets the base layer for the map.
geosearch.geolocate If set to true, the map will automatically find the location of the user.
localWeather.showOnInit If set to false, the application will not render a "Local Weather" info panel for the current location on load.
mapControls.expandOnInit If set to true, the map controls view will start out expanded.
mapControls.groups A list of group names to render in the controls UI. Groups do not necessarily need to be specified here, but using this config allows you to specify a predictable rendering order for the groups.

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: {
            map: {
                zoom: 4,
                center: [38,-95],
                scrollZoom: true,
                baseLayer: new aeris.maps.layers.MapBox({
                    mapBoxID: 'mapBoxID'
                }),
            },
            geosearch: {
                geolocate: false
            },
            localWeather: {
                showOnInit: false
            },
            mapControls: {
                expandOnInit: false
            }
        }
    });
    aerisMapBuilder.start();
</script>

Test it out!

JS Bin on jsbin.com