<html>
<head>
<title>OpenLayers PHP/MBTiles Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- file to use openlayers -->
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css' rel='stylesheet' />
<link href='wax/theme/controls.css' rel='stylesheet' type='text/css' />
<!-- file to use openlayers -->
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script>
<script src='wax/ext/OpenLayers.js' type='text/javascript'></script>
<script src='wax/dist/wax.ol.js' type='text/javascript'></script>
<script src='wax/control/ol/interaction.js' type='text/javascript'></script>
<script src='wax/control/ol/legend.js' type='text/javascript'></script>
<style>
.olControlAttribution {
font-size: smaller;
right: 2px;
bottom: 2px;
position: absolute;
display: block;
}
.wax-legend {
max-width: 300px !important;
}
</style>
</head>
<body>
M
<!-- space where we are going to place the map -->
<div id="map" style="width: 600px; height: 500px"></div>
S
<script type="text/javascript">
// Use the mapbox openlayers zoom/pan control images.
//OpenLayers.ImgPath = 'http://js.mapbox.com/theme/dark/';
// Set up a map in a div with the id
var map = new OpenLayers.Map('map', {
controls: [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.LayerSwitcher()
//new wax.ol.Interaction()
],
units: 'm',
projection: new OpenLayers.Projection('EPSG:900913'),
maxExtent: new OpenLayers.Bounds(-20037508.34,
-20037508.34,
20037508.34,
20037508.34)
});
map.addLayer(new OpenLayers.Layer.TMS('geography-class',
'http://a.tiles.mapbox.com/mapbox/', {
maxResolution: 156543.0339,
type: 'png',
layername: 'geography-class'
}));
map.addControl(new wax.ol.Interaction({
tilejson: '1.0.0',
scheme: 'tms',
tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'],
grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'],
formatter: function(options, data) { return data.NAME }
}));
//Legend
map.addControl(new wax.ol.Legend());
map.zoomTo(1);
</script>
</body>
</html>