Skip to content

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
MBTiles in OpenLayers
<!DOCTYPE html>
<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="" type="text/css">
<link rel="stylesheet" href="" type="text/css">
.olControlAttribution {
font-size: smaller;
left: 2px;
bottom: 2px;
position: absolute;
display: block;
.olImageLoadError {
background-color: transparent;
opacity: 0.5;
filter: alpha(opacity=50); /* IE */
<script src=""></script>
// API key for Please get your own at
// 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:
function mbtilesURL (bounds) {
var db = "schenectady.mbtiles";
var res =;
var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round (( - / (res * this.tileSize.h));
var z =;
// Deal with Bing layers zoom difference...
if ( == 'OpenLayers.Layer.VirtualEarth' || == '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.setCenter(new OpenLayers.LonLat(-8231506.4946978, 5282861.4946323), 13);
<body onload="init()">
<h1 id="title">MBTiles Example</h1>
<div id="tags">
<p id="shortdesc">
Demonstrates the use of <a href="" target="_blank">MBTiles</a> in OpenLayers.
<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>
<li>Use <a href="">Global Mapper</a>, <a href="">gdal2tiles</a> or <a href="">MapTiler</a> to generate a TMS tile directory</li>
<li>Use <a href="">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>
<p>Download the original USGS Topo TIF with worldfile <a href="">here</a> (~4MB)<br>
Download the MBTiles sqlite database file <a href="">here</a> (~13MB)<br>
Download the PHP script <a href="">here</a></p>
$zoom = $_GET['z'];
$column = $_GET['x'];
$row = $_GET['y'];
$db = $_GET['db'];
//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->bindColumn(1, $zoom_level);
$q->bindColumn(2, $tile_column);
$q->bindColumn(3, $tile_row);
$q->bindColumn(4, $tile_data, PDO::PARAM_LOB);
header("Content-Type: image/png");
echo $tile_data;
catch(PDOException $e)
print 'Exception : '.$e->getMessage();

// Deal with Bing layers zoom difference...
if ( == 'OpenLayers.Layer.VirtualEarth' || == 'OpenLayers.Layer.Bing') {
z = z + 1;

This is really quite useful.... Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.