Aeris.js Playground

A sandbox environment for using the Aeris.js weather maps and data API.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://cdn.aerisjs.com/aeris-gmaps.min.js"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    width: 100%;
    height: 100%;
    margin: 0;
}

JavaScript

// Aeris API keys for jsFiddle only.
var map, markerCollection, locationData, gmapsMarker;


map = new aeris.maps.Map('map-canvas');

locationData = new Backbone.Collection([{
    id: 'LocationA',
    loc: {
        lat: 35,
        lon: -90,
    }
}, {
    id: 'LocationB',
    loc: {
        lat: 45,
        lon: -80
    }
}]);

var markerCollection = new aeris.maps.markercollections.MarkerCollection(null, {
    // A marker collection can be bound to a data object (Backbone.Collection)
    // All changes to the data object will be reflected in the marker collection.
    data: locationData,
    
    // Model options are passed on to individual aeris.maps.markers.Marker objects
    // when they are added to the collection
    modelOptions: {
        // Transform the location data into marker attributes.
        attributeTransforms: {
            // The marker position will be determined by the data's `loc` property
            position: function () {
                var loc = this.getData().get('loc');
                return [loc.lat, loc.lon];
            },
            // The marker title will be determined by the data's title property
            title: function() {
                return this.getData().id;
            },
            id: function() {
                return this.getData().id;
            }
        }
    }
});

// Render the marker collection on the map.
markerCollection.setMap(map);

// Handle marker click events
markerCollection.on('click', function (latLon, marker) {
    alert('Clicked on ' + marker.getData().id + ' at ' + latLon.toString());
});

// Handle map click events
map.on('click', function (latLon) {
    // Add a model to the locationData collection.
    // Becuase the markercollection is bounds to the locationData collection,
    // adding a data model will also add a marker.
    locationData.add([{
        id: _.uniqueId('AddedLocation_'),
        loc: {
            lat: latLon[0],
            lon: latLon[1]
        }
   ...