yhahn · December 5, 2012 22:41
diff --git a/index.html b/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 { position:absolute; top:0; bottom:0; width:100%; }
  </style>
 </head>
 <body>
 <style>
 .marker-custom {
    width:20px;
    height:20px;
    /* Negate half the marker width/height to center dot over lat/lon */
    margin:-10px 0px 0px -10px;
    background:#000;
    color:#000;
    border-radius:50%;
    cursor:pointer;
    pointer-events:all;
    position:absolute;
    /* All markers start hidden only to be shown at the proper zoom level. */
    display:none;
 }
 .marker-custom p {
    font:normal 15px/20px Arial,sans-serif;
    position:absolute;
    left:30px;
    top:-15px;
    width:200px;
    background:#fff; padding:10px;
    }

 /* Show low zoom markers at low zoom levels. */
 body.lozoom div.lo { display:block; }

 /* Show hi zoom markers at hi zoom levels. */
 body.hizoom div.hi { display:block; }
 </style>
 <div id='map'></div>
 <script>
 mapbox.auto('map', 'examples.map-dg7cqh4z', function(map) {
    // Create and add marker layer from GeoJSON.
    var markerLayer = mapbox.markers.layer().features([
        {
            "geometry": { "type": "Point", "coordinates": [-72.2531, 43.12357]},
            "properties": { "className": "lo", "text": "<s1>Kroka Basecamp</s1><br/>The Expeditions Starts Here!" }
        },
        {
            "geometry": { "type": "Point", "coordinates": [-72.75586,43.5769]},
            "properties": { "className": "lo", "text": "<s1>Leg 1</s1><br/>Kroka basecamp to Farm and Wilderness site." }
        },
        {
            "geometry": { "type": "Point", "coordinates": [-72.8955,44.202]},
            "properties": { "className": "lo", "text": "<s1>Leg 2</s1><br/>Farm and Wilderness site to Rt. 17." }
        },
        {
            "geometry": { "type": "Point", "coordinates": [-72.2531, 43.12357]},
            "properties": { "className": "hi", "text": "<s1>Kroka Basecamp</s1><br/>The Expeditions spends the first month here!" }
        },
        {
            "geometry": { "type": "Point", "coordinates": [-72.75586,43.5769]},
            "properties": { "className": "hi", "text": "<s1>Leg 1</s1><br/>The expeditions starts on skis." }
        },
        {
            "geometry": { "type": "Point", "coordinates": [-72.8955,44.202]},
            "properties": { "className": "hi", "text": "<s1>Leg 2</s1><br/>We hook up with the catamont trail." }
        }
    ]).factory(function(f) {
        // Define a new factory function. This takes a GeoJSON object
        // as its input and returns a custom DOM element.

        // Custom marker `div.marker-custom`. We add an inner <p> tag with
        // description text that will be shown/hidden depending on zoom level.
        var marker = document.createElement('div');
        marker.className = 'marker-custom ' + f.properties.className;
        marker.innerHTML = '<p>'+ f.properties.text +'</p>';

        // Add function that centers marker on click
        MM.addEvent(marker, 'click', function(e) {
            map.ease.location({
              lat: f.geometry.coordinates[1],
              lon: f.geometry.coordinates[0]
            }).zoom(12).optimal();
        });

        return marker;
    });

    // Whenever the map is zoomed, check the zoom level
    // and set a body class based on it.
    map.addCallback('zoomed', function(map) {
        if (Math.round(map.zoom()) > 7) {
            document.body.className = 'hizoom';
        } else {
            document.body.className = 'lozoom';
        }
    });

    map.addLayer(markerLayer)
        .setExtent(markerLayer.extent())
        .zoom(8);
 });
 </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 { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	.marker-custom {
	width:20px;
	height:20px;
	/* Negate half the marker width/height to center dot over lat/lon */
	margin:-10px 0px 0px -10px;
	background:#000;
	color:#000;
	border-radius:50%;
	cursor:pointer;
	pointer-events:all;
	position:absolute;
	/* All markers start hidden only to be shown at the proper zoom level. */
	display:none;
	}
	.marker-custom p {
	font:normal 15px/20px Arial,sans-serif;
	position:absolute;
	left:30px;
	top:-15px;
	width:200px;
	background:#fff; padding:10px;
	}

	/* Show low zoom markers at low zoom levels. */
	body.lozoom div.lo { display:block; }

	/* Show hi zoom markers at hi zoom levels. */
	body.hizoom div.hi { display:block; }
	</style>
	<div id='map'></div>
	<script>
	mapbox.auto('map', 'examples.map-dg7cqh4z', function(map) {
	// Create and add marker layer from GeoJSON.
	var markerLayer = mapbox.markers.layer().features([
	{
	"geometry": { "type": "Point", "coordinates": [-72.2531, 43.12357]},
	"properties": { "className": "lo", "text": "<s1>Kroka Basecamp</s1><br/>The Expeditions Starts Here!" }
	},
	{
	"geometry": { "type": "Point", "coordinates": [-72.75586,43.5769]},
	"properties": { "className": "lo", "text": "<s1>Leg 1</s1><br/>Kroka basecamp to Farm and Wilderness site." }
	},
	{
	"geometry": { "type": "Point", "coordinates": [-72.8955,44.202]},
	"properties": { "className": "lo", "text": "<s1>Leg 2</s1><br/>Farm and Wilderness site to Rt. 17." }
	},
	{
	"geometry": { "type": "Point", "coordinates": [-72.2531, 43.12357]},
	"properties": { "className": "hi", "text": "<s1>Kroka Basecamp</s1><br/>The Expeditions spends the first month here!" }
	},
	{
	"geometry": { "type": "Point", "coordinates": [-72.75586,43.5769]},
	"properties": { "className": "hi", "text": "<s1>Leg 1</s1><br/>The expeditions starts on skis." }
	},
	{
	"geometry": { "type": "Point", "coordinates": [-72.8955,44.202]},
	"properties": { "className": "hi", "text": "<s1>Leg 2</s1><br/>We hook up with the catamont trail." }
	}
	]).factory(function(f) {
	// Define a new factory function. This takes a GeoJSON object
	// as its input and returns a custom DOM element.

	// Custom marker `div.marker-custom`. We add an inner <p> tag with
	// description text that will be shown/hidden depending on zoom level.
	var marker = document.createElement('div');
	marker.className = 'marker-custom ' + f.properties.className;
	marker.innerHTML = '<p>'+ f.properties.text +'</p>';

	// Add function that centers marker on click
	MM.addEvent(marker, 'click', function(e) {
	map.ease.location({
	lat: f.geometry.coordinates[1],
	lon: f.geometry.coordinates[0]
	}).zoom(12).optimal();
	});

	return marker;
	});

	// Whenever the map is zoomed, check the zoom level
	// and set a body class based on it.
	map.addCallback('zoomed', function(map) {
	if (Math.round(map.zoom()) > 7) {
	document.body.className = 'hizoom';
	} else {
	document.body.className = 'lozoom';
	}
	});

	map.addLayer(markerLayer)
	.setExtent(markerLayer.extent())
	.zoom(8);
	});
	</script>
	</body>
	</html>