tormi · November 28, 2013 23:14
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers MBTiles Example</title>
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
 	<style>
 	.olControlAttribution {
 		font-size: smaller; 
 		left: 2px;
 		bottom: 2px;
 		position: absolute; 
 		display: block;
 	}
 	.olImageLoadError {
 		background-color: transparent;
 		opacity: 0.5;
 		filter: alpha(opacity=50); /* IE */
 	}
 	</style>
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script>
        // API key for http://openlayers.org. Please get your own at
        // http://bingmapsportal.com/ and use that instead.
        var apiKey = "Ap6PC13ktG2lQOnnRUqi7bX6pPwkP93-fshU6LWlMeN503YdcZInCVMczp6k2joo";
        var map;

        function init(){
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
            };
            map = new OpenLayers.Map('map', options);
 			
            var road = new OpenLayers.Layer.Bing({
                name: "Bing Road",
                key: apiKey,
                type: "Road"
            });
            var hybrid = new OpenLayers.Layer.Bing({
                name: "Bing Hybrid",
                key: apiKey,
                type: "AerialWithLabels"
            });

            var osm = new OpenLayers.Layer.OSM();

            // create TMS layer using MBTiles sqlite database
            var mbtilesLayer = new OpenLayers.Layer.TMS("MBTiles Overlay", "mbtiles.php", {
 				getURL: mbtilesURL,
 				isBaseLayer: false,
 				opacity: 0.7
            });
 			// See: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection
 			function mbtilesURL (bounds) {
 				var db = "schenectady.mbtiles";
 				var res = this.map.getResolution();
 				var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
 				var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
 				var z = this.map.getZoom();
 				// Deal with Bing layers zoom difference...
 				if (this.map.baseLayer.CLASS_NAME == 'OpenLayers.Layer.VirtualEarth' || this.map.baseLayer.CLASS_NAME == 'OpenLayers.Layer.Bing') {
 	               z = z + 1;
 	            }
 				return this.url+"?db="+db+"&z="+z+"&x="+x+"&y="+((1 << z) - y - 1);
 				
 			}
            map.addLayers([osm, road, hybrid, mbtilesLayer]);

            var switcherControl = new OpenLayers.Control.LayerSwitcher();
            map.addControl(switcherControl);
            switcherControl.maximizeControl();

            map.setCenter(new OpenLayers.LonLat(-8231506.4946978, 5282861.4946323), 13);
        }

    </script>
  </head>
  <body onload="init()">
    <h1 id="title">MBTiles Example</h1>

    <div id="tags">
        MBTiles
    </div>

    <p id="shortdesc">
        Demonstrates the use of <a href="http://mapbox.com/mbtiles-spec/" target="_blank">MBTiles</a> in OpenLayers.
    </p>

    <div id="map" class="smallmap"></div>
    <div id="docs">
 	<p>This example demonstrates the ability to create layers from an MBTiles sqlite database file.</p>
 	<ul>
 	  <li>Use <a href="http://www.globalmapper.com/">Global Mapper</a>, <a href="http://www.gdal.org/gdal2tiles.html">gdal2tiles</a> or <a href="http://www.maptiler.org/">MapTiler</a> to generate a TMS tile directory</li>
 	  <li>Use <a href="https://github.com/mapbox/mbutil">MBUtil</a> to export TMS directory to MBTiles sqlite file</li>
 	  <li>Create TMS layer with PHP script to fetch images from MBTiles sqlite database file</li>
 	</ul>
 	<p>Download the original USGS Topo TIF with worldfile <a href="http://projects.bryanmcbride.com/ol_mbtiles/o42073g8.zip">here</a> (~4MB)<br>
 	Download the MBTiles sqlite database file <a href="http://projects.bryanmcbride.com/ol_mbtiles/schenectady.mbtiles">here</a> (~13MB)<br>
 	Download the PHP script <a href="http://projects.bryanmcbride.com/ol_mbtiles/mbtiles.php.txt">here</a></p>
 	</div>
  </body>
 </html>
diff --git a/mbtiles.php b/mbtiles.php
 <?php
 $zoom = $_GET['z'];
 $column = $_GET['x'];
 $row = $_GET['y'];
 $db = $_GET['db'];
  try
  {
    //open the database
    $conn = new PDO("sqlite:$db");

    // query
 	$sql = "SELECT * FROM tiles WHERE zoom_level = $zoom AND tile_column = $column AND tile_row = $row";
 	$q = $conn->prepare($sql);
 	$q->execute();

 	$q->bindColumn(1, $zoom_level);
 	$q->bindColumn(2, $tile_column);
 	$q->bindColumn(3, $tile_row);
 	$q->bindColumn(4, $tile_data, PDO::PARAM_LOB);

 	while($q->fetch())
 	{
 	header("Content-Type: image/png");
 	echo $tile_data;
 	}
  }
  catch(PDOException $e)
  {
    print 'Exception : '.$e->getMessage();
  }
 ?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>OpenLayers MBTiles Example</title>
	<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
	<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
	<style>
	.olControlAttribution {
	font-size: smaller;
	left: 2px;
	bottom: 2px;
	position: absolute;
	display: block;
	}
	.olImageLoadError {
	background-color: transparent;
	opacity: 0.5;
	filter: alpha(opacity=50); /* IE */
	}
	</style>
	<script src="http://openlayers.org/dev/OpenLayers.js"></script>
	<script>
	// API key for http://openlayers.org. Please get your own at
	// http://bingmapsportal.com/ and use that instead.
	var apiKey = "Ap6PC13ktG2lQOnnRUqi7bX6pPwkP93-fshU6LWlMeN503YdcZInCVMczp6k2joo";
	var map;

	function init(){
	var options = {
	projection: new OpenLayers.Projection("EPSG:900913"),
	displayProjection: new OpenLayers.Projection("EPSG:4326"),
	units: "m",
	maxResolution: 156543.0339,
	maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
	};
	map = new OpenLayers.Map('map', options);

	var road = new OpenLayers.Layer.Bing({
	name: "Bing Road",
	key: apiKey,
	type: "Road"
	});
	var hybrid = new OpenLayers.Layer.Bing({
	name: "Bing Hybrid",
	key: apiKey,
	type: "AerialWithLabels"
	});

	var osm = new OpenLayers.Layer.OSM();

	// create TMS layer using MBTiles sqlite database
	var mbtilesLayer = new OpenLayers.Layer.TMS("MBTiles Overlay", "mbtiles.php", {
	getURL: mbtilesURL,
	isBaseLayer: false,
	opacity: 0.7
	});
	// See: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection
	function mbtilesURL (bounds) {
	var db = "schenectady.mbtiles";
	var res = this.map.getResolution();
	var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
	var z = this.map.getZoom();
	// Deal with Bing layers zoom difference...
	if (this.map.baseLayer.CLASS_NAME == 'OpenLayers.Layer.VirtualEarth' \|\| this.map.baseLayer.CLASS_NAME == 'OpenLayers.Layer.Bing') {
	z = z + 1;
	}
	return this.url+"?db="+db+"&z="+z+"&x="+x+"&y="+((1 << z) - y - 1);

	}
	map.addLayers([osm, road, hybrid, mbtilesLayer]);

	var switcherControl = new OpenLayers.Control.LayerSwitcher();
	map.addControl(switcherControl);
	switcherControl.maximizeControl();

	map.setCenter(new OpenLayers.LonLat(-8231506.4946978, 5282861.4946323), 13);
	}

	</script>
	</head>
	<body onload="init()">
	<h1 id="title">MBTiles Example</h1>

	<div id="tags">
	MBTiles
	</div>

	<p id="shortdesc">
	Demonstrates the use of <a href="http://mapbox.com/mbtiles-spec/" target="_blank">MBTiles</a> in OpenLayers.
	</p>

	<div id="map" class="smallmap"></div>
	<div id="docs">
	<p>This example demonstrates the ability to create layers from an MBTiles sqlite database file.</p>
	<ul>
	<li>Use <a href="http://www.globalmapper.com/">Global Mapper</a>, <a href="http://www.gdal.org/gdal2tiles.html">gdal2tiles</a> or <a href="http://www.maptiler.org/">MapTiler</a> to generate a TMS tile directory</li>
	<li>Use <a href="https://github.com/mapbox/mbutil">MBUtil</a> to export TMS directory to MBTiles sqlite file</li>
	<li>Create TMS layer with PHP script to fetch images from MBTiles sqlite database file</li>
	</ul>
	<p>Download the original USGS Topo TIF with worldfile <a href="http://projects.bryanmcbride.com/ol_mbtiles/o42073g8.zip">here</a> (~4MB)<br>
	Download the MBTiles sqlite database file <a href="http://projects.bryanmcbride.com/ol_mbtiles/schenectady.mbtiles">here</a> (~13MB)<br>
	Download the PHP script <a href="http://projects.bryanmcbride.com/ol_mbtiles/mbtiles.php.txt">here</a></p>
	</div>
	</body>
	</html>
	<?php
	$zoom = $_GET['z'];
	$column = $_GET['x'];
	$row = $_GET['y'];
	$db = $_GET['db'];
	try
	{
	//open the database
	$conn = new PDO("sqlite:$db");

	// query
	$sql = "SELECT * FROM tiles WHERE zoom_level = $zoom AND tile_column = $column AND tile_row = $row";
	$q = $conn->prepare($sql);
	$q->execute();

	$q->bindColumn(1, $zoom_level);
	$q->bindColumn(2, $tile_column);
	$q->bindColumn(3, $tile_row);
	$q->bindColumn(4, $tile_data, PDO::PARAM_LOB);

	while($q->fetch())
	{
	header("Content-Type: image/png");
	echo $tile_data;
	}
	}
	catch(PDOException $e)
	{
	print 'Exception : '.$e->getMessage();
	}
	?>