Point Data Options

The point data options can be used for managing point data. This is done by adding a point data 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.

Parameters Definition
pointData.objects[#] Configuration for point data objects.
pointData.objects[#].type

The type of point data layer to use in the application. Options include:

Earthquakes
Fires
StormReports
StormCells

pointData.objects[#].group The group attribute can be used to group sidebar controls into named sections. Controls with similar groups will be grouped together
pointData.objects[#].cluster If set to false, point data markers will not be clustered.
pointData.objects[#].createInfoPanel Define a function for supplying a custom info panel. The function receives the point data for the selected marker, and must return a valid Backbone-style view.
pointData.objects[#].filters Filters which may be applied to the point data Aeris API request.
pointData.objects[#].filters.type The type of filter to use. Refer to the endpoints for a list of filters available.
pointData.objects[#].filters.selected If set to true, the filter will be active when the application load.
pointData.objects[#].filters.color The color of the filter toggle button. Can be any valid CSS color.
pointData.objects[#].filters.label Label text for the filter toggle button.

Javascript point data 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: {
            pointData: {
                objects: [
                    {
                        type: 'StormReports',
                        group: 'Points',
                        cluster: false
                    },
                    {
                        type: 'Earthquakes',
                        group: 'Points',
                        cluster: false
                    },
                    {
                        type: 'Fires',
                        group: 'Locations',
                        cluster: true
                    },
                ]
            }
        }
    });
    aerisMapBuilder.start();
</script>

Test it out!

JS Bin on jsbin.com

Last modified: April 10, 2017