Skip to content

Instantly share code, notes, and snippets.

@tmcw
Forked from tristen/gist:2302396
Created April 6, 2012 15:57
Show Gist options
  • Save tmcw/2320987 to your computer and use it in GitHub Desktop.
Save tmcw/2320987 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Wax Interactivity</title>
</head>
<body>
<style>
#map {
width: 100%;
height: 360px;
}
.wax-tooltip {
z-index:999999;
position:absolute;
background:#333;
color:#fff;
padding:10px;
-webkit-user-select:auto;
left:10px;
top:10px;
max-width:300px;
opacity:1;
-webkit-transition:opacity 150ms;
-moz-transition:opacity 150ms;
}
.wax-fade { opacity:0; }
</style>
<div id='map'></div>
<script src='https://raw.github.com/mapbox/wax/master/ext/modestmaps.min.js'></script>
<script src='https://raw.github.com/mapbox/wax/master/dist/wax.mm.min.js'></script>
<script>
var url = 'http://api.tiles.mapbox.com/v3/tristen.cdi-base-layer.jsonp';
wax.tilejson(url, function(tilejson) {
var map = new MM.Map('map', new wax.mm.connector(tilejson));
wax.mm.interaction()
.map(map)
.tilejson(tilejson)
.on(wax.tooltip().animate(true).parent(map.parent).events())
.on('on', function(o) {
if (o.e.type && o.e.type !== 'mousemove') {
var loc = o.formatter({ format: 'location' }, o.data);
if (loc) window.location = loc;
}
});
map.setCenterZoom({ lat: 37.61, lon: 268.068 }, 4);
tilejson.minzoom = 4;
tilejson.maxzoom = 7;
}
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment