-
Notifications
You must be signed in to change notification settings - Fork 32
/
Copy pathopenlayers.html
91 lines (78 loc) · 5.03 KB
/
openlayers.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
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers PHP/MBTiles Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<style>
.olControlAttribution {
font-size: smaller;
right: 2px;
bottom: 2px;
position: absolute;
display: block;
}
</style>
</head>
<body>
<a href="https://github.com/bmcbride/PHP-MBTiles-Server"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div id="map" style="width: 600px; height: 400px"></div>
<p>This example demonstrates the ability to view layers from an <a href="https://github.com/mapbox/mbtiles-spec" target="_blank">MBTiles</a> sqlite database file.</p>
<p>
<ul>
<li>Download the PHP-MBTiles-Server PHP script here: <a href="https://github.com/bmcbride/PHP-MBTiles-Server/blob/master/mbtiles.php" target="_blank">PHP-MBTiles-Server</a> (requires PHP/PDO).</li>
<li>Download the geography-class.mbtiles file here: <a href="http://a.tiles.mapbox.com/mapbox/download/geography-class.mbtiles">http://a.tiles.mapbox.com/mapbox/download/geography-class.mbtiles</a> (~130 MB).</li>
</ul>
</p>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script>
var map;
var mapquestOSM = new OpenLayers.Layer.XYZ("MapQuest Streets", ["http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png", "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"], {
attribution: "Data, imagery and map information provided by <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a>, <a href='http://www.openstreetmap.org/' target='_blank'>Open Street Map</a> and contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>CC-BY-SA</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
});
var mapquestOAM = new OpenLayers.Layer.XYZ("MapQuest Aerial", ["http://oatile1.mqcdn.com/naip/${z}/${x}/${y}.png", "http://oatile2.mqcdn.com/naip/${z}/${x}/${y}.png", "http://oatile3.mqcdn.com/naip/${z}/${x}/${y}.png", "http://oatile4.mqcdn.com/naip/${z}/${x}/${y}.png"], {
attribution: "Tiles Courtesy of <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a>. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
});
var hostedTiles = new OpenLayers.Layer.XYZ("Hosted Tiles", ["http://a.tiles.mapbox.com/v3/mapbox.geography-class/${z}/${x}/${y}.png", "http://b.tiles.mapbox.com/v3/mapbox.geography-class/${z}/${x}/${y}.png", "http://c.tiles.mapbox.com/v3/mapbox.geography-class/${z}/${x}/${y}.png", "http://d.tiles.mapbox.com/v3/mapbox.geography-class/${z}/${x}/${y}.png"], {
attribution: "Tiles Courtesy of <a href='http://tiles.mapbox.com/mapbox/map/geography-class' target='_blank'>MapBox</a>",
transitionEffect: "resize",
isBaseLayer: false,
opacity: 0.7,
visibility: false
});
// create TMS layer using MBTiles sqlite database
var mbTiles = new OpenLayers.Layer.TMS("Local MBTiles File", "mbtiles.php", {
getURL: mbtilesURL,
attribution: "Tiles Courtesy of <a href='http://tiles.mapbox.com/mapbox/map/geography-class' target='_blank'>MapBox</a>",
transitionEffect: "resize",
isBaseLayer: false,
opacity: 0.7
});
// See: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection
function mbtilesURL (bounds) {
var db = "geography-class.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 = new OpenLayers.Map('map', {
projection: "EPSG:900913",
zoom: 3,
center: [-10224217, 4901752],
layers: [mapquestOSM, mapquestOAM, mbTiles, hostedTiles]
});
var switcherControl = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcherControl);
switcherControl.maximizeControl();
</script>
</body>
</html>