rdmurphy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Mapbox + Leaflet</title>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
      <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.ie.css' rel='stylesheet' >
  <![endif]-->
  <style>

  .map {
      width: 960px;
      height: 600px;
  }

  </style>
</head>
<body>

<div id="map" class="map"></div>
<button id="findme">Find me!</button>
<span id="wells"></span>

<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>
<script>

var map = L.mapbox.map('map').setView([31.37, -99.32], 6);
var layer = L.mapbox.tileLayer('texastribune.map-sit023yd,texastribune.texas-disposal-well-hex');
var grid = L.mapbox.gridLayer('texastribune.texas-disposal-well-hex');

grid.on('click', function(e) {
  var count = e.data.count;
  if (count === 0) { return false; }

  map.panTo(e.latLng);
  if (map.getZoom() <= 6) { map.setZoom(10); }

  document.getElementById('wells').innerHTML = '# of Wells: ' + count;
});

map.addLayer(layer);
map.addLayer(grid);

document.getElementById('findme').onclick = function() {
  navigator.geolocation.getCurrentPosition( function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    handleNonClick(lat, lng);
    }, function(error) {
      alert('There was a problem!');
    });
  };

function handleNonClick(lat, lng) {
  map.panTo([lat, lng]).setZoom(10);
  grid.getData([lat, lng], function(d) {
    document.getElementById('wells').innerHTML = '# of Wells: ' + d.count;
  });
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Mapbox + Leaflet</title>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.ie.css' rel='stylesheet' >
	<![endif]-->
	<style>

	.map {
	width: 960px;
	height: 600px;
	}

	</style>
	</head>
	<body>

	<div id="map" class="map"></div>
	<button id="findme">Find me!</button>
	<span id="wells"></span>

	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>
	<script>

	var map = L.mapbox.map('map').setView([31.37, -99.32], 6);
	var layer = L.mapbox.tileLayer('texastribune.map-sit023yd,texastribune.texas-disposal-well-hex');
	var grid = L.mapbox.gridLayer('texastribune.texas-disposal-well-hex');

	grid.on('click', function(e) {
	var count = e.data.count;
	if (count === 0) { return false; }

	map.panTo(e.latLng);
	if (map.getZoom() <= 6) { map.setZoom(10); }

	document.getElementById('wells').innerHTML = '# of Wells: ' + count;
	});

	map.addLayer(layer);
	map.addLayer(grid);

	document.getElementById('findme').onclick = function() {
	navigator.geolocation.getCurrentPosition( function(position) {
	var lat = position.coords.latitude;
	var lng = position.coords.longitude;

	handleNonClick(lat, lng);
	}, function(error) {
	alert('There was a problem!');
	});
	};

	function handleNonClick(lat, lng) {
	map.panTo([lat, lng]).setZoom(10);
	grid.getData([lat, lng], function(d) {
	document.getElementById('wells').innerHTML = '# of Wells: ' + d.count;
	});
	}

	</script>
	</body>
	</html>