Skip to content

Instantly share code, notes, and snippets.

@tristen
Created March 10, 2012 20:17
Show Gist options
  • Save tristen/2012945 to your computer and use it in GitHub Desktop.
Save tristen/2012945 to your computer and use it in GitHub Desktop.
Custom wax formatter
var mm = com.modestmaps;
var url = 'http://api.tiles.mapbox.com/v3/tristen.map-h7dkbvxx.jsonp';
// ## Map Implementation
wax.tilejson(url, function(tilejson) {
// By default, MapBox hosting adds
// templating markup to uploaded .mbtiles.
// In wax we want to remove the tilejson.template object
// so we can default to tilejson.formatter instead.
delete tilejson.template;
// Return a new, custom formatter
tilejson.formatter = function(o, d) {
return {
teaser: function anonymous(obj) {
// Open Webkit console to view
console.log(arguments);
var __p = [],
print = function(){
__p.push.apply(__p,arguments);
};
with (obj||{}) {
__p.push('');
};
return __p.join('');
},
full: function anonymous(obj) {
var __p = [],
print = function(){
__p.push.apply(__p,arguments);
};
with (obj||{}) {
__p.push('');
};
return __p.join('');
},
location: function anonymous(obj) {
var __p = [],
print = function(){
__p.push.apply(__p,arguments);
};
with (obj||{}) {
__p.push('');
};
return __p.join('');
}
}[o.format](d);
};
var m = new mm.Map('map', new wax.mm.connector(tilejson));
wax.mm.interaction(m, tilejson);
m.setCenterZoom(new mm.Location(37, -94), 4);
});
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom Interaction</title>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.wax-tooltip {
font: 13px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #fff;
color: #404040;
left: 10px;
top: 10px;
padding: 10px;
position: absolute;
z-index: 1000;
}
</style>
</head>
<body>
<div id='map'></div>
<script src='https://raw.github.com/mapbox/wax/v4/ext/modestmaps.min.js'></script>
<script src='https://raw.github.com/mapbox/wax/v4/dist/wax.mm.min.js'></script>
<script src='custom-interaction.js'></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment