Adding Tiles to Your Site
You can add MapBox tiles to any website using OpenLayers, an open source library for creating dynamic maps on the web, or the Google Maps API. If you're using Drupal or Managing News, you can add new layers with the OpenLayers module.
Adding Tiles with OpenLayers
Use the following code as a starting point. This code will produce a map with the World Light tileset. To use another tileset, simply change the layername and file_extension variables to match the values found on the desired tileset's page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MapBox Tileset Demo</title>
<script src="http://www.openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var map;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
function init(){
// Customize the values below to change the tileset.
// This information is available on each tileset page.
var layername = 'world-light';
var file_extension = 'png';
// Build the map
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 12,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(
-20037500,
-20037500,
20037500,
20037500
)
};
map = new OpenLayers.Map('map', options);
// Layer definitions
var layer = new OpenLayers.Layer.TMS(
"MapBox Layer",
[ "http://a.tile.mapbox.com/","http://b.tile.mapbox.com/",
"http://c.tile.mapbox.com/","http://d.tile.mapbox.com/" ],
{ 'layername': layername, 'type': file_extension }
);
// Add layers to the map
map.addLayers([ layer ]);
// Set the map's initial center point
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>