Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created November 30, 2012 20:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/4178338 to your computer and use it in GitHub Desktop.
Save wboykinm/4178338 to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox Basic Switcher
Raw
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="script.js"></script>
<!-- Site configuration -->
<script type="text/javascript">
// Make a new map in the #map element
var main = Map('map', {
// Specify the MapBox API url
api: 'http://a.tiles.mapbox.com/v3/landplanner.map-a0wbwf43.jsonp',
center: {
lat: 44.484626966, // Intial center point and zoom level.
lon: -73.2342639, // To find coordinates and zoom levels
zoom: 13 // try: http://www.getlatlon.com
},
zoomRange: [0, 17]
});
// Make a new layer switch for the map named `main`. Each layer gets
// a name and an object of settings. The layers are bound by name to
// the href hash of an element with a `data-control='layer'`, ex:
// <a data-control="layer" href="#building">Building Permits, 2011</a>
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' }
});
</script>
</body>
</html>
Raw
script.js
(function(root) {
var Map = {},
layers;
Map = function(el, l, callback) {
wax.tilejson(l.api, function(t) {
var handlers = [
new MM.DragHandler(),
new MM.DoubleClickHandler(),
new MM.TouchHandler()
];
if ($.inArray('zoomwheel', l.features) >= 0) {
handlers.push(new MM.MouseWheelHandler());
}
MM_map = new MM.Map(el, new wax.mm.connector(t), null, handlers);
MM_map.setCenterZoom({
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) {
MM_map.setZoomRange(l.zoomRange[0], l.zoomRange[1]);
} else {
MM_map.setZoomRange(t.minzoom, t.maxzoom);
}
wax.mm.attribution(MM_map, t).appendTo(MM_map.parent);
if (callback && typeof(callback) == 'function') callback();
});
return Map;
};
Map.layers = function(x) {
if (!arguments.length) return layers;
layers = x;
return Map;
};
Map.setOverlay = function(id) {
if (!layers[id]) throw new Error('overlay with id ' + id + ' not found');
var l = layers[id];
wax.tilejson(l.api, function(t) {
var level = (l.level === 'base') ? 0 : 1;
try {
MM_map.setLayerAt(level, new wax.mm.connector(t));
} catch (e) {
MM_map.insertLayerAt(level, new wax.mm.connector(t));
}
if (MM_map.interaction) MM_map.interaction.map(MM_map).tilejson(t);
if (MM_map.legend) {
MM_map.legend.content(t);
}
});
if (l.center) {
var lat = l.center.lat || MM_map.getCenter().lat,
lon = l.center.lon || MM_map.getCenter().lon,
zoom = l.center.zoom || MM_map.getZoom();
if (l.center.ease > 0) {
MM_map.easey = easey().map(MM_map)
.to(MM_map.locationCoordinate({ lat: lat, lon: lon })
.zoomTo(zoom)).run(l.center.ease);
} else {
MM_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;
MM_map.removeLayerAt(level);
if (MM_map.legend) MM_map.legend.content(' ');
if (MM_map.interaction) MM_map.interaction.remove();
};
root.Map = Map;
})(this);
$(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);
}
});
});
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment