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.
The interaction control takes a parameter, callbacks
, that has the
default value of new wax.tooltip()
– the default tooltip library that comes
with wax. Any other library that implements the same interface
(see tooltips.js
) can be passed into the callbacks parameter.
<html>
<head>
<script src='wax/ext/leaflet.js' type='text/javascript'></script>
<script src='wax/dist/wax.leaf.js' type='text/javascript'></script>
<link href='wax/ext/leaflet.css' rel='stylesheet' type='text/css' />
<div id='map-div'></div>
<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 map = new L.Map('map-div')
.addLayer(new wax.leaf.connector(tilejson))
.setView(new L.LatLng(51.505, -0.09), 1);
wax.leaf.interaction(map, tilejson);
</script>
var interaction = wax.leaf.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()