public
Last active

MBTiles in OpenLayers

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
<!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>
mbtiles.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<?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();
}
?>

// 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;
}

This is really quite useful.... Thanks!

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.