andy-esch · August 29, 2015 14:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Tile Explorer | CartoDB</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    
    <!-- Map takes up full browser window -->
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #summary {
          position: absolute;
          top: 0;
          right: 0;
          width: 425px;
          border-bottom: 1px solid black;
          border-left: 1px solid black;
          background: rgba(255,255,255,0.9);
          padding: 5px;
          overflow-x: scroll;
      }
    </style>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>
    <div id="summary"><h4>Click on any tile to get it's information</h4><p>Zoom: <span id="curr-zoom"></span></p><p>Lat/long: <span id="lat-long"></span></p><div id="tile-nums"></div><p id="tile-url"></p></div>

    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    
    <!-- Drop your code between the script tags below! -->
    <script>
    
    var getTileNums = function(latLng,zoom) {
        var n = 1 << zoom;
        var xtile = n * ((latLng.lng + 180) / 360);
        var lat_rad = latLng.lat / 180 * Math.PI;
        var ytile = n * (1 - (Math.log(Math.tan(lat_rad) + 1 / Math.cos(lat_rad)) / Math.PI)) / 2;

        return {x: Math.floor(xtile), y: Math.floor(ytile)}
    }

 	var options = {
 		center: [0,0.0],
 		zoom: 3
 	}

 	var map = new L.Map('map', options);
    var sublayer;

    $("#curr-zoom").text(map.getZoom());
    $("#lat-long").text(map.getCenter());

    var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);
    
    cartodb.createLayer(map, {
        user_name: 'andye',
        type: 'cartodb',
        sublayers: [{
            sql: "SELECT CDB_XYZ_Extent(0,0,0) the_geom_webmercator LIMIT 0",
            cartocss: "#layer{ line-color: #333; line-width: 2; line-opacity: 0.7;}"
        }]
    }).addTo(map)
    .done(function(layer) {
        sublayer = layer.getSubLayer(0);
    })
    .error(function(err) {
        console.log("Error: " + err);
    });
    
    map.on('zoomend', function() {
        $("#curr-zoom").text(map.getZoom());
    });
    
    map.on('click', function(e) {
        $("#lat-long").text(e.latlng);
        var tiles = getTileNums(e.latlng,map.getZoom());
        $("#tile-nums").html("<p>xtile: " + tiles.x + "</p><p>ytile: " + tiles.y + "</p>");
        var url = Mustache.render('http://a.basemaps.cartocdn.com/light_all/{{z}}/{{x}}/{{y}}.png', {z: map.getZoom(), x: tiles.x, y: tiles.y});
        $("#tile-url").html("<a href='" + url + "' target='_blank'>" + url + "</a>");
        sublayer.setSQL("SELECT CDB_XYZ_Extent(" + tiles.x + "," + tiles.y + "," + map.getZoom() + ") the_geom_webmercator");
    });

    </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tile Explorer \| CartoDB</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

	<!-- Map takes up full browser window -->
	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	#summary {
	position: absolute;
	top: 0;
	right: 0;
	width: 425px;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	background: rgba(255,255,255,0.9);
	padding: 5px;
	overflow-x: scroll;
	}
	</style>

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
	</head>
	<body>
	<div id="map"></div>
	<div id="summary"><h4>Click on any tile to get it's information</h4><p>Zoom: <span id="curr-zoom"></span></p><p>Lat/long: <span id="lat-long"></span></p><div id="tile-nums"></div><p id="tile-url"></p></div>

	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>


	<!-- Drop your code between the script tags below! -->
	<script>

	var getTileNums = function(latLng,zoom) {
	var n = 1 << zoom;
	var xtile = n * ((latLng.lng + 180) / 360);
	var lat_rad = latLng.lat / 180 * Math.PI;
	var ytile = n * (1 - (Math.log(Math.tan(lat_rad) + 1 / Math.cos(lat_rad)) / Math.PI)) / 2;

	return {x: Math.floor(xtile), y: Math.floor(ytile)}
	}

	var options = {
	center: [0,0.0],
	zoom: 3
	}

	var map = new L.Map('map', options);
	var sublayer;

	$("#curr-zoom").text(map.getZoom());
	$("#lat-long").text(map.getCenter());

	var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	cartodb.createLayer(map, {
	user_name: 'andye',
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT CDB_XYZ_Extent(0,0,0) the_geom_webmercator LIMIT 0",
	cartocss: "#layer{ line-color: #333; line-width: 2; line-opacity: 0.7;}"
	}]
	}).addTo(map)
	.done(function(layer) {
	sublayer = layer.getSubLayer(0);
	})
	.error(function(err) {
	console.log("Error: " + err);
	});

	map.on('zoomend', function() {
	$("#curr-zoom").text(map.getZoom());
	});

	map.on('click', function(e) {
	$("#lat-long").text(e.latlng);
	var tiles = getTileNums(e.latlng,map.getZoom());
	$("#tile-nums").html("<p>xtile: " + tiles.x + "</p><p>ytile: " + tiles.y + "</p>");
	var url = Mustache.render('http://a.basemaps.cartocdn.com/light_all/{{z}}/{{x}}/{{y}}.png', {z: map.getZoom(), x: tiles.x, y: tiles.y});
	$("#tile-url").html("<a href='" + url + "' target='_blank'>" + url + "</a>");
	sublayer.setSQL("SELECT CDB_XYZ_Extent(" + tiles.x + "," + tiles.y + "," + map.getZoom() + ") the_geom_webmercator");
	});

	</script>

	</body>
	</html>