MateoV/custom-interaction.js

## custom-interaction.js
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||{}) {
                    // add content and hoverbox
                    __p.push('<div class="hoverbox">' + obj.state + '<br>' + obj.tornadoes + ' tornadoes</div>');
                };
                return __p.join('');
            },
            full: function anonymous(obj) {
                var __p = [],
                print = function(){
                    __p.push.apply(__p,arguments);
                };
                with (obj||{}) {
                    __p.push('');
                    //call function on click
                    clickcontent(obj);
                };
                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);
});

function clickcontent(d) {
    $('.clickbox').replaceWith('<div class="clickbox">' + d.state + '<br>' + d.tornadoes + ' tornadoes</div>');
}

## index.html
<!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;
      }
      .hoverbox {
        font: 13px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #404040;
        left: 10px;
        top: 10px;
        padding: 10px;
        position: absolute;
        z-index: 1000;
        }
      .clickbox {
        font: 13px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #404040;
        left: 10px;
        top: 50px;
        padding: 10px;
        position: absolute;
        z-index: 1000;
        }
    </style>
  </head>
  <body>
    <div id='map'>
      <div class='clickbox'></div>
    </div>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
    <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>
	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\|\|{}) {
	// add content and hoverbox
	__p.push('<div class="hoverbox">' + obj.state + '<br>' + obj.tornadoes + ' tornadoes</div>');
	};
	return __p.join('');
	},
	full: function anonymous(obj) {
	var __p = [],
	print = function(){
	__p.push.apply(__p,arguments);
	};
	with (obj\|\|{}) {
	__p.push('');
	//call function on click
	clickcontent(obj);
	};
	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);
	});

	function clickcontent(d) {
	$('.clickbox').replaceWith('<div class="clickbox">' + d.state + '<br>' + d.tornadoes + ' tornadoes</div>');
	}
	<!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;
	}
	.hoverbox {
	font: 13px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #404040;
	left: 10px;
	top: 10px;
	padding: 10px;
	position: absolute;
	z-index: 1000;
	}
	.clickbox {
	font: 13px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #404040;
	left: 10px;
	top: 50px;
	padding: 10px;
	position: absolute;
	z-index: 1000;
	}
	</style>
	</head>
	<body>
	<div id='map'>
	<div class='clickbox'></div>
	</div>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
	<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>