Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

MBTiles in OpenLayers

View index.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>
View index.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
<?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!

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.