Created
November 30, 2012 20:23
-
-
Save wboykinm/4178338 to your computer and use it in GitHub Desktop.
Mapbox Basic Switcher
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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