Created
December 4, 2012 20:17
-
-
Save wboykinm/4208248 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="site.js"></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
//ORIGINAL CORE OF SITE.JS | |
(function(root) { | |
var Map = {}, | |
layers; | |
Map = function(el, l, callback) { | |
wax.tilejson(l.api, function(t) { | |
var handlers = [ | |
//These work in mapbox.js | |
new MM.DragHandler(), | |
new MM.DoubleClickHandler(), | |
new MM.TouchHandler() | |
]; | |
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); | |
} | |
}); | |
}); | |
//MOVED FROM INDEX.HTML CONFIGURATION | |
// 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' } | |
}); | |
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; | |
} | |
/* 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; } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment