D3 Examples - MapBox markers.js with random points a dynamic factory, and changing factories on the fly

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript'
    src='https://mapbox.com/markers.js/dist/markers.min.js'></script>
  <script type='text/javascript'
    src='https://mapbox.com/markers.js/dist/markers.externals.js'></script>
  <link href='https://mapbox.com/markers.js/dist/markers.css'
    rel='stylesheet' type='text/css' />
  <style>
  body { margin:0; padding: 0; }
  </style>
</head>
<body>
<div id='map' style='width:960px;height:200px;'></div>
<script>
var rand = mapbox.markers.layer().url('random_geojson_points.geojson').factory(function(x) {
      var d = document.createElement('div');
      d.setAttribute('class', 'mmg-default');
      d.innerHTML = '-';
      return d;
    });
function mixuprand() {
  rand.factory(function(x) {
      var d = document.createElement('div');
      d.setAttribute('class', 'my-custom');
      window.setInterval(function() {
          d.innerHTML = Math.random() > 0.5 ? '!' : '+';
      }, 100);
      return d;
  });
}
​
wax.tilejson('https://a.tiles.mapbox.com/v3/tmcw.boldness.jsonp',
  function(tj) {
    var m = new MM.Map('map', new wax.mm.connector(tj))
      .setCenterZoom(new MM.Location(0, 0), 2);
    m.addLayer(rand);
    var ft = [{ 'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [-40.0, 30.0]
      },
      'properties': { 'name': 'Tom' }
    }];
    var tomLayer = mapbox.markers.layer().factory(function(x) {
      var d = document.createElement('div');
      d.setAttribute('class', 'my-custom');
      d.innerHTML = x.properties.name;
      d.onclick = function() {
        alert('hi, ' + this.innerHTML);
      };
      return d;
    }).features(ft);
  m.addLayer(tomLayer);
});
</script>
<style>
.mmg-default {
  background:magenta;
  width:10px;
  height:10px;
}
.my-custom {
  position:absolute;
  background:#fffa96;
}
</style>
</body>
    