yhahn/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body {
  margin:0px;
  padding:0px;
  font:15px/20px sans-serif;
  }
#map  {
  position:absolute;
  top:0px;
  bottom:0px;
  width:100%;
  }
div.circle {
  display:block;
  position:absolute;
  width:40px; height:40px;
  background:#48c;
  margin:-20px 0px 0px -20px;
  border-radius:50%;
  line-height:40px;
  text-align:center;
  color:#fff;
  }
</style>
</head>
<body>

<div id='map'></div>

<script>
var tiles = mapbox.layer().id('examples.map-zr0njcqy');
var markers = mapbox.markers.layer();
// Load CSV as string
markers.csv("lat,lon,id,title,description\n41.3814,2.1731,13,Las Ramblas,A long street in Barcelona");
// Custom markers.
markers.factory(function(f) {
  // Add section text to spot element.
  var el = document.createElement('div');
  el.className = 'circle';
  el.innerHTML = f.properties.id;
  return el;
});

var map = mapbox.map('map', [tiles, markers]);
map.setZoomRange(8, 17);
map.centerzoom({lon:2.1731,lat:41.3814}, 15);
map.ui.zoomer.add();

// Attribute map
map.ui.attribution.add().content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='UTF-8'/>
	<script src='http://underscorejs.org/underscore-min.js'></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
	<style>
	body {
	margin:0px;
	padding:0px;
	font:15px/20px sans-serif;
	}
	#map {
	position:absolute;
	top:0px;
	bottom:0px;
	width:100%;
	}
	div.circle {
	display:block;
	position:absolute;
	width:40px; height:40px;
	background:#48c;
	margin:-20px 0px 0px -20px;
	border-radius:50%;
	line-height:40px;
	text-align:center;
	color:#fff;
	}
	</style>
	</head>
	<body>

	<div id='map'></div>

	<script>
	var tiles = mapbox.layer().id('examples.map-zr0njcqy');
	var markers = mapbox.markers.layer();
	// Load CSV as string
	markers.csv("lat,lon,id,title,description\n41.3814,2.1731,13,Las Ramblas,A long street in Barcelona");
	// Custom markers.
	markers.factory(function(f) {
	// Add section text to spot element.
	var el = document.createElement('div');
	el.className = 'circle';
	el.innerHTML = f.properties.id;
	return el;
	});

	var map = mapbox.map('map', [tiles, markers]);
	map.setZoomRange(8, 17);
	map.centerzoom({lon:2.1731,lat:41.3814}, 15);
	map.ui.zoomer.add();

	// Attribute map
	map.ui.attribution.add().content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
	</script>

	</body>
	</html>