tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <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:0; padding:0; }
    #map { width:100%; height: 600px; }
    #foo {
        position:absolute;
        top:2000px;
        text-align:center;
        padding:10px;
    }
  </style>
</head>
<body>
<div id='map'></div>
<div id='foo'>
    Hello!
</div>
<script>
  var map = mapbox.map('map');
  map.addLayer(mapbox.layer().id('examples.map-20v6611k'));

  // Create an empty markers layer
  var markerLayer = mapbox.markers.layer();

  // Add interaction to this marker layer. This
  // binds tooltips to each marker that has title
  // and description defined.
  mapbox.markers.interaction(markerLayer);
  map.addLayer(markerLayer);

  map.zoom(5).center({ lat: 37, lon: -77 });

  // Add a single feature to the markers layer.
  // You can use .features() to add multiple features.
  markerLayer.add_feature({
      geometry: {
          // The order of coordinates here is lon, lat. This is because
          // we use the GeoJSON specification for all marker features.
          // (lon, lat is also the internal order of KML and other geographic formats)
          coordinates: [-77, 37.9]
      },
      properties: {
          // these properties customize the look of the marker
          // see the simplestyle-spec for a full reference:
          // https://github.com/mapbox/simplestyle-spec
          'marker-color': '#000',
          'marker-symbol': 'star-stroked',
          title: 'Example Marker',
          description: 'This is a single marker.',
          url: '#foo',
      }
  });
  markerLayer.interaction.formatter(function(f) {
      var a = document.createElement('a')
      a.href = f.properties.url;
      a.innerHTML = 'go there';
      return a;
  });

  // 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>
	<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:0; padding:0; }
	#map { width:100%; height: 600px; }
	#foo {
	position:absolute;
	top:2000px;
	text-align:center;
	padding:10px;
	}
	</style>
	</head>
	<body>
	<div id='map'></div>
	<div id='foo'>
	Hello!
	</div>
	<script>
	var map = mapbox.map('map');
	map.addLayer(mapbox.layer().id('examples.map-20v6611k'));

	// Create an empty markers layer
	var markerLayer = mapbox.markers.layer();

	// Add interaction to this marker layer. This
	// binds tooltips to each marker that has title
	// and description defined.
	mapbox.markers.interaction(markerLayer);
	map.addLayer(markerLayer);

	map.zoom(5).center({ lat: 37, lon: -77 });

	// Add a single feature to the markers layer.
	// You can use .features() to add multiple features.
	markerLayer.add_feature({
	geometry: {
	// The order of coordinates here is lon, lat. This is because
	// we use the GeoJSON specification for all marker features.
	// (lon, lat is also the internal order of KML and other geographic formats)
	coordinates: [-77, 37.9]
	},
	properties: {
	// these properties customize the look of the marker
	// see the simplestyle-spec for a full reference:
	// https://github.com/mapbox/simplestyle-spec
	'marker-color': '#000',
	'marker-symbol': 'star-stroked',
	title: 'Example Marker',
	description: 'This is a single marker.',
	url: '#foo',
	}
	});
	markerLayer.interaction.formatter(function(f) {
	var a = document.createElement('a')
	a.href = f.properties.url;
	a.innerHTML = 'go there';
	return a;
	});

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