wboykinm/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>BTVVotes Plans</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v0.6.6/mapbox.css" type="text/css" />
</head>
<body>


    <div id="projects" class="layers">
       <a data-control="layer" href="#existing">Existing Wards</a>
       <a data-control="layer" href="#btv4wv3">Proposal: 4 Wards v3</a>
       <a data-control="layer" href="#btv7wv4">Proposal: 7 Wards v4*</a>
       <a data-control="layer" href="#btv7wv5">Proposal: 7 Wards v5</a>
       <a data-control="layer" href="#btv8wv1">Proposal: 8 Wards v1</a>

    </div>

    <div id="map" class="map">
    </div>

    <!-- External libraries and site script -->
    <script src="http://api.tiles.mapbox.com/mapbox.js/v0.6.6/mapbox.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="site.js"></script>

</body>
</html>

## site.js
//ORIGINAL CORE OF SITE.JS
//CONFIGURE SITE PARAMETERS AT
//THE BOTTOM SECTION OF THE SCRIPT

(function(root) {
    var map = {},
        layers;

    map = function(el, l, callback) {
        layer.tilejson(l.api, function(t) {
            var handlers = [
                //These work in mapbox.js
                new MM.DragHandler(),
                new MM.DoubleClickHandler(),
                new MM.TouchHandler()
            ];
            //establishing the map
            var map = mapbox.map(el, new wax.mm.connector(t), null, handlers);
            //adding UI elements
            map.ui.zoomer().add();
            map.ui.zoombox().add();
            map.ui.fullscreen().add();
            map.ui.hash.add();
            map.ui.legend.add();
    	    map.ui.attribution.add().content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
            //setting parameter catcher for starting center & zoom
            map.centerZoom({
                lat: (l.center) ? l.center.lat : t.center[1],
                lon: (l.center) ? l.center.lon : t.center[0]
            }, (l.center) ? l.center.zoom : t.center[2]);

            if (l.zoomRange) {
                map.setZoomRange(l.zoomRange[0], l.zoomRange[1]);
            } else {
                map.setZoomRange(t.minzoom, t.maxzoom);
            }

            if (callback && typeof(callback) == 'function') callback();
        });
        return map;
    };

    map.layers = function(x) {
        if (!arguments.length) return layers;
        layers = x;
        return map;
    };

    //Here the trouble begins: setOverlay seems to imply
    //client-side compositing, and there does not appear
    //to be an equivalent function in mapbox.js
    map.setOverlay = function(id) {

        if (!layers[id]) throw new Error('overlay with id ' + id + ' not found');
        var l = layers[id];

        layer.tilejson(l.api, function(t) {
            var level = (l.level === 'base') ? 0 : 1;

            //No mabox.js equivalent for the below setLayerAt and wax connectors
            //Seems like several redundant steps could be replaced with
            //the map.addLayer(); function
            try {
                map.setLayerAt(level, new wax.mm.connector(t));
            } catch (e) {
                map.insertLayerAt(level, new wax.mm.connector(t));
            }
            map.interaction(map).auto(t);
        });

        if (l.center) {
            var lat = l.center.lat || map.getCenter().lat,
                lon = l.center.lon || map.getCenter().lon,
                zoom = l.center.zoom || map.getZoom();

            if (l.center.ease > 0) {
                map.ease = ease().map(map)
                    .to(map.locationCoordinate({ lat: lat, lon: lon })
                    .zoomTo(zoom)).run(l.center.ease);
            } else {
                map.setCenterZoom({ lat: lat, lon: lon }, zoom);
            }
        }
    };

    map.removeOverlay = function(id) {

        if (!layers[id]) throw new Error('overlay with id ' + id + ' not found');
        var l = layers[id];

        var level = (l.level === 'base') ? 0 : 1;
        map.removeLayerAt(level);
        map.legend.content(' ');
        map.interaction.refresh();
    };

    root.map = map;

})(this);

//Ajaxishness for the DOM handling of the switcher
$(function() {
    if (location.hash === '#embed') $('body').removeClass().addClass('embed');

    $('body').on('click.map', '[data-control="layer"]', function(e) {
        var $this = $(this),
            id = $this.attr('href');
        id = id.replace(/.*(?=#[^\s]+$)/, '').slice(1);
        var m = $('[data-control="geocode"]').attr('data-map') || 'main';
        e.preventDefault();
        if($this.hasClass('active')) {
            $('[data-control="layer"]').removeClass('active');
            window[m].removeOverlay(id);
        } else {
            $('[data-control="layer"]').removeClass('active');
            $this.addClass('active');
            window[m].setOverlay(id);
        }
    });

});

//MOVED FROM INDEX.HTML CONFIGURATION

// Make a new map in the #map element
        var main = map('map', {
            // Base layer here
            api: 'http://a.tiles.mapbox.com/v3/landplanner.map-a0wbwf43.jsonp',
            center: {
                lat: 44.484626966,      // Intial center point and zoom level.
                lon: -73.2342639,
                zoom: 13
            },
            zoomRange: [0, 17]
        });
        //Switchable overlays here
        main.layers({
            existing: { api: 'http://a.tiles.mapbox.com/v3/landplanner.btvwards-current,landplanner.map-0wnm9063.jsonp' },
            btv4wv3: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-4w-v3,landplanner.map-0wnm9063.jsonp' },
            btv7wv4: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-7w-v4,landplanner.map-0wnm9063.jsonp' },
            btv7wv5: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-7w-v5,landplanner.map-0wnm9063.jsonp' },
            btv8wv1: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-8w-v1,landplanner.map-0wnm9063.jsonp' }
         });


## style.css
html, body, div {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	line-height: 1;
	overflow: hidden;
    }

a {
    color:#369;
    text-decoration:none;
    }

/* Layout */

body > div {
    position: relative;
    z-index: 1;
    }

.map {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    }

.layers {
    position: absolute;
    width: 180px;
    left: 10px;
    top: 55px;
    }

.layers a {
    padding: 10px;
    margin: 1px 0;
    border-left: 5px solid #fff;
    background: white;
    color: #333;
    width: 160px;
    float: left;
    margin-right: 20px;
    }

.layers a:hover, .layers a:focus, .layers a.active {
    border-left: 5px solid #333;
    background: #2da0ef;
    color: white;
    }


/* Animation */

.map-tile-loaded {
    -webkit-animation-name:               fade-in;
    -moz-animation-name:                  fade-in;
    -ms-animation-name:                   fade-in;
    -o-animation-name:                    fade-in;
    -webkit-animation-timing-function:    linear;
    -moz-animation-timing-function:       linear;
    -ms-animation-timing-function:        linear;
    -o-animation-timing-function:         linear;
    -webkit-animation-duration:           .2s;
    -moz-animation-duration:              .2s;
    -ms-animation-duration:               .2s;
    -o-animation-duration:                .2s;
}

@-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>BTVVotes Plans</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v0.6.6/mapbox.css" type="text/css" />
	</head>
	<body>


	<div id="projects" class="layers">
	<a data-control="layer" href="#existing">Existing Wards</a>
	<a data-control="layer" href="#btv4wv3">Proposal: 4 Wards v3</a>
	<a data-control="layer" href="#btv7wv4">Proposal: 7 Wards v4*</a>
	<a data-control="layer" href="#btv7wv5">Proposal: 7 Wards v5</a>
	<a data-control="layer" href="#btv8wv1">Proposal: 8 Wards v1</a>

	</div>

	<div id="map" class="map">
	</div>

	<!-- External libraries and site script -->
	<script src="http://api.tiles.mapbox.com/mapbox.js/v0.6.6/mapbox.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="site.js"></script>

	</body>
	</html>
	//ORIGINAL CORE OF SITE.JS
	//CONFIGURE SITE PARAMETERS AT
	//THE BOTTOM SECTION OF THE SCRIPT

	(function(root) {
	var map = {},
	layers;

	map = function(el, l, callback) {
	layer.tilejson(l.api, function(t) {
	var handlers = [
	//These work in mapbox.js
	new MM.DragHandler(),
	new MM.DoubleClickHandler(),
	new MM.TouchHandler()
	];
	//establishing the map
	var map = mapbox.map(el, new wax.mm.connector(t), null, handlers);
	//adding UI elements
	map.ui.zoomer().add();
	map.ui.zoombox().add();
	map.ui.fullscreen().add();
	map.ui.hash.add();
	map.ui.legend.add();
	map.ui.attribution.add().content('<a href="http://mapbox.com/about/maps">Terms & Feedback</a>');
	//setting parameter catcher for starting center & zoom
	map.centerZoom({
	lat: (l.center) ? l.center.lat : t.center[1],
	lon: (l.center) ? l.center.lon : t.center[0]
	}, (l.center) ? l.center.zoom : t.center[2]);

	if (l.zoomRange) {
	map.setZoomRange(l.zoomRange[0], l.zoomRange[1]);
	} else {
	map.setZoomRange(t.minzoom, t.maxzoom);
	}

	if (callback && typeof(callback) == 'function') callback();
	});
	return map;
	};

	map.layers = function(x) {
	if (!arguments.length) return layers;
	layers = x;
	return map;
	};

	//Here the trouble begins: setOverlay seems to imply
	//client-side compositing, and there does not appear
	//to be an equivalent function in mapbox.js
	map.setOverlay = function(id) {

	if (!layers[id]) throw new Error('overlay with id ' + id + ' not found');
	var l = layers[id];

	layer.tilejson(l.api, function(t) {
	var level = (l.level === 'base') ? 0 : 1;

	//No mabox.js equivalent for the below setLayerAt and wax connectors
	//Seems like several redundant steps could be replaced with
	//the map.addLayer(); function
	try {
	map.setLayerAt(level, new wax.mm.connector(t));
	} catch (e) {
	map.insertLayerAt(level, new wax.mm.connector(t));
	}
	map.interaction(map).auto(t);
	});

	if (l.center) {
	var lat = l.center.lat \|\| map.getCenter().lat,
	lon = l.center.lon \|\| map.getCenter().lon,
	zoom = l.center.zoom \|\| map.getZoom();

	if (l.center.ease > 0) {
	map.ease = ease().map(map)
	.to(map.locationCoordinate({ lat: lat, lon: lon })
	.zoomTo(zoom)).run(l.center.ease);
	} else {
	map.setCenterZoom({ lat: lat, lon: lon }, zoom);
	}
	}
	};

	map.removeOverlay = function(id) {

	if (!layers[id]) throw new Error('overlay with id ' + id + ' not found');
	var l = layers[id];

	var level = (l.level === 'base') ? 0 : 1;
	map.removeLayerAt(level);
	map.legend.content(' ');
	map.interaction.refresh();
	};

	root.map = map;

	})(this);

	//Ajaxishness for the DOM handling of the switcher
	$(function() {
	if (location.hash === '#embed') $('body').removeClass().addClass('embed');

	$('body').on('click.map', '[data-control="layer"]', function(e) {
	var $this = $(this),
	id = $this.attr('href');
	id = id.replace(/.*(?=#[^\s]+$)/, '').slice(1);
	var m = $('[data-control="geocode"]').attr('data-map') \|\| 'main';
	e.preventDefault();
	if($this.hasClass('active')) {
	$('[data-control="layer"]').removeClass('active');
	window[m].removeOverlay(id);
	} else {
	$('[data-control="layer"]').removeClass('active');
	$this.addClass('active');
	window[m].setOverlay(id);
	}
	});

	});

	//MOVED FROM INDEX.HTML CONFIGURATION

	// Make a new map in the #map element
	var main = map('map', {
	// Base layer here
	api: 'http://a.tiles.mapbox.com/v3/landplanner.map-a0wbwf43.jsonp',
	center: {
	lat: 44.484626966, // Intial center point and zoom level.
	lon: -73.2342639,
	zoom: 13
	},
	zoomRange: [0, 17]
	});
	//Switchable overlays here
	main.layers({
	existing: { api: 'http://a.tiles.mapbox.com/v3/landplanner.btvwards-current,landplanner.map-0wnm9063.jsonp' },
	btv4wv3: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-4w-v3,landplanner.map-0wnm9063.jsonp' },
	btv7wv4: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-7w-v4,landplanner.map-0wnm9063.jsonp' },
	btv7wv5: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-7w-v5,landplanner.map-0wnm9063.jsonp' },
	btv8wv1: { api: 'http://a.tiles.mapbox.com/v3/landplanner.wards-8w-v1,landplanner.map-0wnm9063.jsonp' }
	});
	html, body, div {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	line-height: 1;
	overflow: hidden;
	}

	a {
	color:#369;
	text-decoration:none;
	}

	/* Layout */

	body > div {
	position: relative;
	z-index: 1;
	}

	.map {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 0;
	}

	.layers {
	position: absolute;
	width: 180px;
	left: 10px;
	top: 55px;
	}

	.layers a {
	padding: 10px;
	margin: 1px 0;
	border-left: 5px solid #fff;
	background: white;
	color: #333;
	width: 160px;
	float: left;
	margin-right: 20px;
	}

	.layers a:hover, .layers a:focus, .layers a.active {
	border-left: 5px solid #333;
	background: #2da0ef;
	color: white;
	}


	/* Animation */

	.map-tile-loaded {
	-webkit-animation-name: fade-in;
	-moz-animation-name: fade-in;
	-ms-animation-name: fade-in;
	-o-animation-name: fade-in;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-webkit-animation-duration: .2s;
	-moz-animation-duration: .2s;
	-ms-animation-duration: .2s;
	-o-animation-duration: .2s;
	}

	@-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
	@-moz-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
	@-ms-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
	@-o-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }