tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  #marker-list {
      position:absolute;
      top:0; right:0; width:200px;
      bottom:0;
      overflow-x:auto;
      background:#fff;
      margin:0;
      padding:5px;
  }
  #marker-list li {
      padding:5px;
      margin:0;
      list-style-type:none;
  }
  #marker-list li:hover {
      background:#eee;
  }
</style>
</head>
<body>


<div id='map'></div>
<ul id='marker-list'></ul>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJIZmRUQjRBIn0.lRARalfaGHnPdRcc-7QZYQ';
var map = L.mapbox.map('map', 'examples.h186knp8');
var markerList = document.getElementById('marker-list');

var markers = L.mapbox.featureLayer({
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "foo"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -83.3203125,
          35.460669951495305
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "bar"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -73.828125,
          40.979898069620155
        ]
      }
    }
  ]
});

markers.addTo(map);

map.fitBounds(markers.getBounds());

markers.eachLayer(function(layer) {
    var item = markerList.appendChild(document.createElement('li'));
    item.innerHTML = layer.toGeoJSON().properties.title;
    item.onclick = function() {
       map.setView(layer.getLatLng(), 14);
       layer.openPopup();
    };
});
</script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>A simple map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#marker-list {
	position:absolute;
	top:0; right:0; width:200px;
	bottom:0;
	overflow-x:auto;
	background:#fff;
	margin:0;
	padding:5px;
	}
	#marker-list li {
	padding:5px;
	margin:0;
	list-style-type:none;
	}
	#marker-list li:hover {
	background:#eee;
	}
	</style>
	</head>
	<body>



	<div id='map'></div>
	<ul id='marker-list'></ul>
	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJIZmRUQjRBIn0.lRARalfaGHnPdRcc-7QZYQ';
	var map = L.mapbox.map('map', 'examples.h186knp8');
	var markerList = document.getElementById('marker-list');

	var markers = L.mapbox.featureLayer({
	"type": "FeatureCollection",
	"features": [
	{
	"type": "Feature",
	"properties": {
	"title": "foo"
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	-83.3203125,
	35.460669951495305
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"title": "bar"
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	-73.828125,
	40.979898069620155
	]
	}
	}
	]
	});

	markers.addTo(map);

	map.fitBounds(markers.getBounds());

	markers.eachLayer(function(layer) {
	var item = markerList.appendChild(document.createElement('li'));
	item.innerHTML = layer.toGeoJSON().properties.title;
	item.onclick = function() {
	map.setView(layer.getLatLng(), 14);
	layer.openPopup();
	};
	});
	</script>


	</body>
	</html>