tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript'
    src='http://mapbox.com/markers.js/dist/markers.min.js'></script>
  <script type='text/javascript'
    src='http://mapbox.com/markers.js/dist/markers.externals.js'></script>
  <link href='http://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('http://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>

## random_geojson_points.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              random_geojson_points.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<script type='text/javascript'
	src='http://mapbox.com/markers.js/dist/markers.min.js'></script>
	<script type='text/javascript'
	src='http://mapbox.com/markers.js/dist/markers.externals.js'></script>
	<link href='http://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('http://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>