MapBox core technologies and API.
Contacted the MapBox Staff about using this API.
Become familiar with concepts from the MapBox API.
Embedded a non-SSL map using the MapBox API.
MapBox offers an API for requesting map tiles over SSL. Before reading this guide, you should be familiar with setting up a normal map using the MapBox API. We've made SSL support much simpler in MapBox v1, so only a few lines of additional code are required.
You'll first start with an example from MapBox.js which sets up a simple map:
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.1/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.1/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.1/mapbox.ie.css' rel='stylesheet' >
<![endif]-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script type='text/javascript'>
var map = L.mapbox.map('map', 'examples.map-4l7djmvo')
.setView([40, -74.50], 9);
</script>
</body>
</html>
Next, a few simple modifications are required.
The scripts themselves must be served from SSL, so instead of api.tiles.mapbox.com,
the block should look like:
<script src='https://dnv9my2eseobd.cloudfront.net/mapbox.js/v1.0.1/mapbox.js' ></script>
<link href='https://dnv9my2eseobd.cloudfront.net/mapbox.js/v1.0.1/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='https://dnv9my2eseobd.cloudfront.net/mapbox.js/v1.0.1/mapbox.ie.css' rel='stylesheet' />
<![endif]-->
Then you need to tell MapBox.js to load SSL tiles by giving it SSL URLs to use:
L.mapbox.config.HTTPS_URLS = [
'https://dnv9my2eseobd.cloudfront.net/v3/'
];
By default, MapBox.js will detect whether the page requesting a map is itself
on SSL, and only use SSL when necessary. you can force it to use SSL
regardless with FORCE_HTTPS:
L.mapbox.config.FORCE_HTTPS = true;
So, all together, your page should look like:
<html>
<head>
<script src='https://dnv9my2eseobd.cloudfront.net/mapbox.js/v1.0.1/mapbox.js'></script>
<link href='https://dnv9my2eseobd.cloudfront.net/mapbox.js/v1.0.1/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='https://dnv9my2eseobd.cloudfront.net/mapbox.js/v1.0.1/mapbox.ie.css' rel='stylesheet' />
<![endif]-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script type='text/javascript'>
L.mapbox.config.HTTPS_URLS = [
'https://dnv9my2eseobd.cloudfront.net/v3/'
];
var map = L.mapbox.map('map', 'examples.map-4l7djmvo')
.setView([40, -74.50], 9);
</script>
</body>
</html>
With these changes - specifying SSL urls with the HTTPS_URLS setting
and using the correct endpoints for the script and CSS tags - you'll be able
to support SSL maps and use the full MapBox.js API documentation and examples.
Please contact MapBox support if you have any questions about using SSL during the beta program.