diff --git a/js/app.js b/js/app.js
index 03b9fb6..f60ccf9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -47,6 +47,12 @@
   timeRange.domElement.style.display = 'none';
   timeRange.domElement.className = 'time-range';
 
+  // Set the default range colors.
+  overlay.setStartColor(controls.state.style.startColor);
+  overlay.setEndColor(controls.state.style.endColor);
+  timeRange.setStartColor(controls.state.style.startColor);
+  timeRange.setEndColor(controls.state.style.endColor);
+
   // Update the Overlay viewport when the map bounds change.
   map.setOverlayElement(overlay.domElement);
   map.onBoundsChanged(overlay.setBounds.bind(overlay));
@@ -60,16 +66,50 @@
   // Listen for settings and data events from the controls.
   controls.domElement.addEventListener('settings-changed', function(event) {
     var setting = event.detail.folderName + '/' + event.detail.optionName;
-    if (setting === 'data/multiplier') {
-      overlay.setMultiplier(event.detail.value);
-    } else if (setting === 'data/medianCorrection') {
-      overlay.setMedianCorrection(event.detail.value);
+    var value = event.detail.value;
+    switch (setting) {
+      case 'data/multiplier':
+        overlay.setMultiplier(value);
+        break;
+      case 'data/medianCorrection':
+        overlay.setMedianCorrection(value);
+        break;
+      case 'data/showMarkers':
+        map.setMarkerVisibility(value);
+        break;
+      case 'style/startColor':
+        overlay.setStartColor(value);
+        timeRange.setStartColor(value);
+        break;
+      case 'style/endColor':
+        overlay.setEndColor(value);
+        timeRange.setEndColor(value);
+        break;
+      case 'style/lineWidth':
+        overlay.setLineWidth(value);
+        break;
+      case 'animation/enabled':
+        value ? overlay.startAnimation() : overlay.stopAnimation();
+        break;
+      case 'animation/duration':
+        overlay.setAnimationDuration(value);
+        break;
+      case 'animation/delay':
+        overlay.setAnimationDelay(value);
+        break;
+      case 'animation/showStats':
+        value ? overlay.showStats() : overlay.hideStats();
+        break;
+      default:
+        throw Error('Unrecogrized setting: ' + setting);
+        break;
     }
   }, false);
 
   // Listen for data-ready events from the controls element, feed to components
   // that need to know.
   controls.domElement.addEventListener('data-ready', function(event) {
+    map.setData(event.detail);
     overlay.setData(event.detail);
   }, false);
 
diff --git a/js/controls.js b/js/controls.js
index 9c54a20..48bedff 100644
--- a/js/controls.js
+++ b/js/controls.js
@@ -89,7 +89,12 @@
     Object.keys(folderSettings.options).forEach(function(optionName) {
       var option = folderSettings.options[optionName];
       folderState[optionName] = option.defaultValue;
-      var ctrl = folder.add(folderState, optionName);
+      var ctrl;
+      if (option.type === 'color') {
+        ctrl = folder.addColor(folderState, optionName);
+      } else {
+        ctrl = folder.add(folderState, optionName);
+      }
       if ('min' in option) {
         ctrl = ctrl.min(option.min);
       }
diff --git a/js/map.js b/js/map.js
index 4cbeebe..4a18cac 100644
--- a/js/map.js
+++ b/js/map.js
@@ -16,10 +16,13 @@
  *  limitations under the License.
  */
 
-// Map requires google maps.
+// Map requires Google Maps and d3.
 if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
   throw Error('Google Maps is required but missing.');
 }
+if (typeof d3 === 'undefined') {
+  throw Error('d3 is required but missing.');
+}
 
 var geovelo;
 geovelo = geovelo || {};
@@ -41,14 +44,20 @@
     containerElement.appendChild(this.domElement);
   }
 
+  // Array of Google Maps Markers. Will be created when data arrives.
+  this.markers = null;
+
+  // Whether markers should be visible.
+  this.markerVisibility = false;
+
   // Callback handlers for when the bounds change.
   this.boundsChangedHandlers = [];
 
-  // Initial coordinates.
+  // Initial coordinates. Will center on data once loaded.
   var initial = {
-    zoom: 5,
-    lon: 139.7667,
-    lat: 35.6833
+    zoom: 2,
+    lon: 0,
+    lat: 0,
   };
 
   // Google Map Stylers.
@@ -82,7 +91,7 @@
 
   // Create the Google Map
   var map = this.map = new google.maps.Map(this.domElement, {
-    zoom: 5,
+    zoom: initial.zoom,
     center: new google.maps.LatLng(initial.lat, initial.lon),
     mapTypeControl: false,
     mapTypeId: google.maps.MapTypeId.TERRAIN,
@@ -109,6 +118,137 @@
   //map.addListener('center_changed', emit);
   map.addListener('zoom_changed', emit);
   map.addListener('idle', emit);
+
+  // D3 selection which will be host to the clicked beacon's info.
+  this.infoContent = d3.select(document.createElement('div')).html(`
+      <h2 class="name"></h2>
+      <p>
+        Start: <span class="start"></span>
+      </p>
+      <p>
+        Lat, Lon: <span class="lat"></span>, <span class="lon"></span>
+      </p>
+  `);
+
+  // Info window to show data about a particular marker. Content is bound to
+  // the infoContent div.
+  this.infoWindow = new google.maps.InfoWindow({
+    content: this.infoContent[0][0]
+  });
+};
+
+/**
+ * New beacon data is available. Set up markers and zoom over there.
+ *
+ * @param {Array} beacons An array of data for the beacons.
+ */
+geovelo.Map.prototype.setData = function(beacons) {
+  // Desired map bounds based on min/max of east/west and south/north.
+  var bounds = {
+    east: -Infinity,
+    west: Infinity,
+    north: -90,
+    south: 90,
+  };
+
+  var markers = [];
+
+  // Create a marker for each beacon.
+  for (var i = 0; i < beacons.length; i++) {
+    var marker = this.createMarker(beacons[i]);
+    markers.push(marker);
+
+    var pos = marker.getPosition();
+    var lat = pos.lat();
+    var lon = pos.lng();
+
+    bounds.east = Math.max(bounds.east, lon);
+    bounds.west = Math.min(bounds.west, lon);
+    bounds.north = Math.max(bounds.north, lat);
+    bounds.south = Math.min(bounds.south, lat);
+  }
+
+  this.map.fitBounds(bounds);
+
+  this.markers = markers;
+};
+
+/**
+ * Helper function for creating a Google Maps marker from a beacon.
+ *
+ * @param {Object} beacon Data object representing a beacon.
+ */
+geovelo.Map.prototype.createMarker = function(beacon) {
+
+  // Keep track of the first, max and min lat and lon values.
+  var lat = null;
+  var lon = null;
+  var minLat = 90;
+  var maxLat = -90;
+  var minLon = Infinity;
+  var maxLon = -Infinity;
+
+  // Roll through the beacon's lat/lon pairs and take note.
+  for (var i = 0; i < beacon.lat.length; i++) {
+    var currentLat = beacon.lat[i];
+    var currentLon = beacon.lon[i];
+    if (lat === null && currentLat && currentLon) {
+      lat = currentLat;
+      lon = currentLon;
+    }
+    minLat = Math.min(minLat, currentLat);
+    minLat = Math.min(minLat, currentLat);
+  }
+
+  // If a non-missing lat/lon pair couldn't be found, that's an error.
+  if (!lat || !lon) {
+    throw Error('Beacon has no non-zero coordinates: ' + beacon.name);
+  }
+
+  var marker = new google.maps.Marker({
+    position: { lng: lon, lat: lat },
+    map: this.map,
+    title: beacon.name,
+    label: beacon.name,
+    visible: this.markerVisibility,
+  });
+
+  // Derived values from the beacon.
+  var startDate = new Date(beacon.start * 1000);
+
+  // When marker is clicked, update the Info Window content and show it.
+  marker.addListener('click', function() {
+    // This code makes heavy use of the d3 join/enter/update pattern.
+    // JOIN.
+    var content = this.infoContent.data([beacon]);
+
+    content.select('.name').text(beacon.name);
+    content.select('.start').text(startDate.toDateString());
+    content.select('.lat').text(lat.toFixed(3));
+    content.select('.lon').text(lon.toFixed(3));
+
+    this.infoWindow.open(this.map, marker);
+  }.bind(this));
+
+  return marker;
+};
+
+/**
+ * Show or hide beacon markers by setting their visibility.
+ *
+ * @param {boolean} visibility Whether to show (true) or hide (false) markers.
+ */
+geovelo.Map.prototype.setMarkerVisibility = function(visibility) {
+  this.markerVisibility = !!visibility;
+  if (!this.markers) {
+    return;
+  }
+  for (var i = 0; i < this.markers.length; i++) {
+    this.markers[i].setVisible(this.markerVisibility);
+  }
+  if (!this.markerVisibility) {
+    this.infoWindow.close();
+  }
 };
 
 /**
diff --git a/js/overlay.js b/js/overlay.js
index 1a45bd1..2337e60 100644
--- a/js/overlay.js
+++ b/js/overlay.js
@@ -34,6 +34,12 @@
  */
 geovelo.Overlay = function(containerElement) {
 
+  // Local reference to the geovelo settings object, throw if missing.
+  var settings = geovelo.settings;
+  if (!settings) {
+    throw Error('geovelo.settings is missing!');
+  }
+
   // DOM Element into which to insert content.
   this.domElement = document.createElement('div');
   this.domElement.style.pointerEvents = 'none';
@@ -83,12 +89,18 @@
     stats.domElement.style.position = 'absolute';
     stats.domElement.style.top = 0;
     stats.domElement.style.left = 0;
+    stats.domElement.style.display = 'none';
     this.domElement.appendChild(stats.domElement);
   }
 
+  // Whether to show stats.
+  if (settings.animation.options.showStats.defaultValue) {
+    this.showStats();
+  }
+
   // Set up the custom line shader material to use for drawing lines.
   this.material = new geovelo.LineShaderMaterial({
-    linewidth: 1
+    linewidth: settings.style.options.lineWidth.defaultValue
   });
 
   // Time in ms to allow processing to hold the thread before ceding to the UI.
@@ -99,6 +111,104 @@
 
   // Time in ms to wait before invoking functions in need of debouncing.
   this.debounceTimeout = 50;
+
+  // Animation duration and delay.
+  this.animationDuration = settings.animation.options.duration.defaultValue;
+  this.animationDelay = settings.animation.options.delay.defaultValue;
+
+  // Whether we're currently animating.
+  this.animating = false;
+  if (settings.animation.options.enabled.defaultValue) {
+    this.startAnimation();
+  }
+};
+
+/**
+ * Start animating.
+ */
+geovelo.Overlay.prototype.startAnimation = function() {
+  this.animating = true;
+
+  // The start timestamp for the current animation loop.
+  var start = null;
+
+  var animate = (function() {
+    // Short-circuit if animation has been turned off.
+    if (!this.animating) {
+      return;
+    }
+
+    var now = Date.now();
+
+    if (start === null) {
+      start = now;
+    }
+
+    var startTimestamp = this.material.uniforms.startTimestamp.value;
+    var endTimestamp = this.material.uniforms.endTimestamp.value;
+    var diff = endTimestamp - startTimestamp;
+
+    // If there's any time between the start and end timestamps, set the
+    // end animation clamp and render the scene.
+    if (diff) {
+      this.material.uniforms.endAnimationClamp.value =
+          startTimestamp + diff * (now - start) / this.animationDuration;
+      this.render();
+    }
+
+    // If we've finished the loop, pause for the delay, otherwise queue up the
+    // next frame.
+    if (now > start + this.animationDuration) {
+      start = null;
+      setTimeout(animate, this.animationDelay);
+    } else {
+      requestAnimationFrame(animate);
+    }
+  }).bind(this);
+
+  // Kick off animation loop.
+  requestAnimationFrame(animate);
+};
+
+/**
+ * Stop animating.
+ */
+geovelo.Overlay.prototype.stopAnimation = function() {
+  this.animating = false;
+  this.material.uniforms.endAnimationClamp.value = Infinity;
+  this.queueRender();
+};
+
+/**
+ * Set animation duration.
+ */
+geovelo.Overlay.prototype.setAnimationDuration = function(duration) {
+  this.animationDuration = duration;
+};
+
+/**
+ * Set animation delay.
+ */
+geovelo.Overlay.prototype.setAnimationDelay = function(delay) {
+  this.animationDelay = delay;
+};
+
+/**
+ * Show the FPS stats display.
+ */
+geovelo.Overlay.prototype.showStats = function() {
+  if (this.stats) {
+    this.stats.domElement.style.display = null;
+  }
+};
+
+/**
+ * Hide the FPS stats display.
+ */
+geovelo.Overlay.prototype.hideStats = function() {
+  if (this.stats) {
+    this.stats.domElement.style.display = 'none';
+  }
 };
 
 /**
@@ -175,7 +285,7 @@
 
 /**
  * New beacon data is available. Preprocess the data and reconstruct the scene.
- * @param {Array} beacons An array of data for the beacons.
+ * @param {Array} rawBeacons An array of data for the beacons.
  */
 geovelo.Overlay.prototype.setData = function(rawBeacons) {
 
@@ -533,6 +643,38 @@
 };
 
 /**
+ * Set the color to use for the start of the range.
+ *
+ * @param {string} startColor The color to set for the start of the range.
+ */
+geovelo.Overlay.prototype.setStartColor = function(startColor) {
+  var color = d3.rgb(startColor);
+  this.material.uniforms.startColor.value
+      .set(color.r / 255, color.g / 255, color.b / 255, 1);
+  this.queueRender();
+};
+
+/**
+ * Set the color to use for the end of the range.
+ *
+ * @param {string} endColor The color to set for the end of the range.
+ */
+geovelo.Overlay.prototype.setEndColor = function(endColor) {
+  var color = d3.rgb(endColor);
+  this.material.uniforms.endColor.value
+      .set(color.r / 255, color.g / 255, color.b / 255, 1);
+  this.queueRender();
+};
+
+/**
+ * Set the line width.
+ */
+geovelo.Overlay.prototype.setLineWidth = function(lineWidth) {
+  this.material.linewidth = lineWidth;
+  this.queueRender();
+};
+
+/**
  * Set the starting timestamp of the line shader material. This will map to the
  * start color and start opacity.
  *
diff --git a/js/settings.js b/js/settings.js
index b555a65..0343e37 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -31,6 +31,7 @@
  *  - description - Opitonal string describing this folder or option.
  *  - defaultValue - The starting value to use for this setting.
  *  - min, max - The smallest and largest allowed values.
+ *  - type - Number (default) or color picker.
  */
 geovelo.settings = {
 
@@ -47,7 +48,7 @@
         defaultValue: 5.5,
         min: 1,
         max: 8,
-        step: 0.01
+        step: 0.01,
       },
       medianCorrection: {
         displayName: 'median correction',
@@ -55,9 +56,76 @@
             'How much of the cumulative median movement to subtract out.',
         defaultValue: 1,
         min: 0,
-        max: 1
-      }
-    }
-  }
+        max: 1,
+      },
+      showMarkers: {
+        displayName: 'show markers',
+        description: 'Whether to show a Google Maps marker for each beacon.',
+        defaultValue: false,
+      },
+    },
+  },
+
+  style: {
+    displayName: 'Style',
+    description: 'Settings for the style and behavior of the visualization.',
+    open: true,
+    options: {
+      startColor: {
+        displayName: 'start color',
+        description: 'Color to use for the start of the time range.',
+        defaultValue: '#0000ff',
+        type: 'color',
+      },
+      endColor: {
+        displayName: 'end color',
+        description: 'Color to use for the end of the time range.',
+        defaultValue: '#ff0000',
+        type: 'color',
+      },
+      lineWidth: {
+        displayName: 'line width',
+        description: 'Width of line when rendering.',
+        defaultValue: 1,
+        min: 1,
+        max: 10,
+        step: 0.1,
+      },
+    },
+  },
+
+  animation: {
+    displayName: 'Animation',
+    description: 'Settings for the looping animation of lines.',
+    open: true,
+    options: {
+      enabled: {
+        displayName: 'enabled',
+        description: 'Whether animation is enabled.',
+        defaultValue: false,
+      },
+      duration: {
+        displayName: 'duration (ms)',
+        description: 'How long the animation loop takes to complete.',
+        defaultValue: 4000,
+        min: 500,
+        max: 10000,
+        step: 500,
+      },
+      delay: {
+        displayName: 'delay (ms)',
+        description: 'How long to wait before restarting a finished loop.',
+        defaultValue: 1000,
+        min: 0,
+        max: 3000,
+        step: 100,
+      },
+      showStats: {
+        displayName: 'show FPS',
+        description: 'Whether to show the FPS stats meter.',
+        defaultValue: false,
+      },
+    },
+  },
 
 };
diff --git a/js/timerange.js b/js/timerange.js
index 363ab7f..92ebfe3 100644
--- a/js/timerange.js
+++ b/js/timerange.js
@@ -53,6 +53,12 @@
   // Date object representing the position of the right (end) nub.
   this.rangeEnd = null;
 
+  // String representing the color to fill the start nub.
+  this.startColor = null;
+
+  // String representing the color to fill the end nub.
+  this.endColor = null;
+
   // D3 scale for the time range. Will be updated on draw to match parameters.
   var timeScale = this.timeScale = d3.time.scale();
 
@@ -68,7 +74,7 @@
   this.dragBehavior = d3.behavior.drag()
       .origin(function (d) {
         return {
-          x: timeScale(d),
+          x: timeScale(d.time),
           y: geovelo.TimeRange.margin.top
         };
       })
@@ -107,6 +113,30 @@
 };
 
 /**
+ * Set the color to use for the start of the range.
+ *
+ * @param {string} startColor The color to set for the start of the range.
+ */
+geovelo.TimeRange.prototype.setStartColor = function(startColor) {
+  this.startColor = startColor;
+  if (this.extentStart && this.extentEnd) {
+    this.drawNubs();
+  }
+};
+
+/**
+ * Set the color to use for the end of the range.
+ *
+ * @param {string} endColor The color to set for the end of the range.
+ */
+geovelo.TimeRange.prototype.setEndColor = function(endColor) {
+  this.endColor = endColor;
+  if (this.extentStart && this.extentEnd) {
+    this.drawNubs();
+  }
+};
+
+/**
  * Set the extent of the time range selector. If range has not been set, this
  * will initialize the range to match.
  *
@@ -274,7 +304,13 @@
 
   // Get the draggable nub elements.
   var nubs = this.svg.selectAll('.nub')
-      .data([this.rangeStart, this.rangeEnd]);
+      .data([{
+        time: this.rangeStart,
+        color: this.startColor,
+      }, {
+        time: this.rangeEnd,
+        color: this.endColor,
+      }]);
 
   // Insert DOM elements for the nubs if this is the first time.
   nubs.enter().append('g')
@@ -284,12 +320,13 @@
       .append('path')
         .attr('d', 'M -4,-16 v 8 l 4,6 l 4,-6 v -8 z');
 
-  // Move nubs into their correct positions.
+  // Move nubs into their correct positions and set color.
   var timeScale = this.timeScale;
   nubs.attr('transform', function(d) {
-    return 'translate(' + timeScale(d) + ',' +
+    return 'translate(' + timeScale(d.time) + ',' +
         geovelo.TimeRange.margin.top + ')';
-  });
+  }).select('.nub path')
+    .attr('fill', function(d) { return d.color; });
 };
 
 /**
diff --git a/js/web-mercator.js b/js/web-mercator.js
index 61376fa..5a9da99 100644
--- a/js/web-mercator.js
+++ b/js/web-mercator.js
@@ -25,7 +25,7 @@
 
 (function() {
 
-// Computational contstants.
+// Computational constants.
 var DEG_TO_RAD = Math.PI / 180;
 var ZOOM_FACTOR = 128 / Math.PI;
 var PI_OVER_FOUR = Math.PI / 4;