The interaction control adds quite a bit of logic to the map, adding interactivity – mouse hovers and clicks – to layers that support it, like those made with TileMill and the interactive UTFGrid section of the MBTiles spec.
wax/dist/wax.g.js
contains the Wax controls and integration code for
Google Maps.wax/theme/controls.css
contains default styles for controls. You can always
swap in your own later on.<html>
<head>
<script
src='http://maps.google.com/maps/api/js?sensor=false'
type='text/javascript'></script>
<script
src='wax/dist/wax.g.min.js'
type='text/javascript'></script>
<link
href='wax/theme/controls.css'
rel='stylesheet'
type='text/css' />
Wax has a custom Google map type that can display tilesets described by
the TileJSON format at wax.g.connector
.
<div id='map-div'></div>
<a class='attribution' href='http://mapbox.com/tileset/geography-class'>Geography Class</a>
<script>
var tilejson = {
tilejson: '1.0.0',
scheme: 'tms',
tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'],
grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'],
formatter: function(options, data) { return data.NAME }
};
var m = new google.maps.Map(
document.getElementById('map-div'), {
center: new google.maps.LatLng(0, 0),
disableDefaultUI: true,
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP });
m.mapTypes.set('mb', new wax.g.connector(tilejson));
m.setMapTypeId('mb');
wax.g.interaction(m, tilejson);
</script>
var interaction = wax.g.interaction(map, tilejson, options)
window.location
when the 'location' formatter is used. In some cases, like when you're using
Backbone or another Javascript framework, you might want a different
Javascript link-follower, or do things like redirecting users to a 'leaving this site'
page. You can provide one with a clickHandler function.interaction.remove()