rdmurphy · April 18, 2013 22:13
diff --git a/index.html b/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>