eschwartz/MarkerCollections.html

## MarkerCollections.html
<!DOCTYPE html>
<html>
<head>
  <title>Aeris.js MarkerCollection example</title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #map-canvas {
      width: 100%;
      height: 100%;
    }

    /** Cluster icon styles */
    .aeris-cluster:after {
      content: '';
      position: absolute;
      top: -11px;
      right: -14px;
      width: 21px;
      height: 18px;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019));
      background-image: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
      background-image: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
      background-image: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
      background-image: linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.5);
    }

    .aeris-cluster div {
      z-index: 2;
    }
  </style>

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

  <!-- you can use //cdn.aerisjs.com/, but our server is being slow to propogate my last deployment -->
  <script type="text/javascript" src="https://s3.amazonaws.com/cdn.aerisjs.com/aeris.js"></script>
</head>
<body>
  <div id="map-canvas"></div>

  <script type="text/javascript">
    var map = new aeris.maps.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 aeris.maps.markercollections.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());
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Aeris.js MarkerCollection example</title>

	<style type="text/css">
	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#map-canvas {
	width: 100%;
	height: 100%;
	}

	/** Cluster icon styles */
	.aeris-cluster:after {
	content: '';
	position: absolute;
	top: -11px;
	right: -14px;
	width: 21px;
	height: 18px;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a90329), color-stop(44%, #8f0222), color-stop(100%, #6d0019));
	background-image: -webkit-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
	background-image: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
	background-image: -o-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
	background-image: linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	}

	.aeris-cluster div {
	z-index: 2;
	}
	</style>

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

	<!-- you can use //cdn.aerisjs.com/, but our server is being slow to propogate my last deployment -->
	<script type="text/javascript" src="https://s3.amazonaws.com/cdn.aerisjs.com/aeris.js"></script>
	</head>
	<body>
	<div id="map-canvas"></div>

	<script type="text/javascript">
	var map = new aeris.maps.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 aeris.maps.markercollections.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());
	});
	</script>
	</body>
	</html>