MarkerCollection-amd.js

require.config({
  paths: {
    aeris: 'bower_components/aerisjs/src',

    // Aeris.js dependencies
    underscore: 'bower_components/underscore/underscore',
    jquery: 'bower_components/jquery/jquery',
    backbone: 'bower_components/backbone/backbone',
    leaflet: '//cdn.leafletjs.com/leaflet-0.7.2/leaflet-src',
    'leaflet-markercluster': 'bower_components/leaflet.markercluster/dist/leaflet.markercluster-src',
    Handlebars: 'bower_components/handlebars/handlebars',
    hbars: 'bower_components/hbars/hbars',

    // Configure Aeris.js to use Leaflet
    'aeris/maps/strategy': 'bower_components/aerisjs/src/maps/leaflet'
  }
});

require([
  'backbone',
  'aeris/maps/map',
  'aeris/maps/markercollections/markercollection'
], function(Backbone, Map, MarkerCollection) {
  var map = new Map('map-canvas');

  // You can use any kind of data Backbone.Collection
  // as the data source for your marker collection.
  var locationData = new Backbone.Collection([
    {
      loc: {
        lat: 35,
        lon: -90
      }
    },
    {
      loc: {
        lat: 45,
        lon: -80
      }
    }
  ]);


  var markerCollection = new MarkerCollection(null, {
    // Provide options to the Marker object
    modelOptions: {
      // Attribute transform allow you to transform arbitrary data
      // attributes into marker attributes. In this case,
      // your marker needs a `position` attribute, which it will
      // transform from the model's `loc` property.
      attributeTransforms: {
        position: function() {
          // If no data model is defined, return
          // the current position.
          if (!this.getData().get('loc')) {
            return this.get('position');
          }

          // Return the marker position as an
          // aeris.maps.LatLon object (simple array)
          return [
            this.getData().get('loc').lat,
            this.getData().get('loc').lon
          ];
        }
      }
    },

    // A MarkerCollection binds to a data collection.
    // Any changes to the data collection will be
    // reflected in the markers
    data: locationData
  });

  // Add the markers to the map.
  markerCollection.setMap(map);


  // Add a new location model.
  // --> a corresponding marker will
  //     be added to the map.
  locationData.add({
    loc: {
      lat: 55,
      lon: -70
    }
  });

  // Add a cluster of markers
  locationData.add([
    {
      loc: {
        lat: 30,
        lon: -100
      }
    },
    {
      loc: {
        lat: 30.01,
        lon: -100.01
      }
    },
    {
      loc: {
        lat: 30.02,
        lon: -100.03
      }
    },
    {
      loc: {
        lat: 30.03,
        lon: -100.04
      }
    },
    {
      loc: {
        lat: 30.04,
        lon: -100.05
      }
    }
  ]);


  // Bind events to markers
  markerCollection.on('click', function(latLon, marker) {
    console.log('Marker data: ', marker.getData().toJSON());
  });
});