MapBox Light is now a template style

You can use the map ID mapbox.light or the style URL mapbox/light-v8.

This week we launched a preview of MapBox Light, our first global OpenStreetMap-based map. We’re eager to get designers and developers testing it out with their applications and data visualizations and get any feedback on issues or concerns that come up. We hope this map makes a great base for situations like data visualization where you need some context but don’t want it to be too distracting.

If you want to test out this new tileset, there are a number of ways to get it loading on your website. The quickest way is to use an embed code provided by MapBox. Head to the map preview page and pan and zoom around until the view looks like what you want to show. Then click the embed button at the bottom-right of the page.

Click the embed button

You’ll get a pop-up containing code that you can copy and paste into a blog post or any other HTML page - just adjust the width and height attributes to make it fit.

Copy the embed code

You can also achieve more advanced integration with a new or existing application by accessing the tiles through the MapBox Hosting API. We’ve recently expanded our documentation with information on how to build a map ‘microsite’ and making a layerswitcher for a ModestMaps-based application. (Note that v3 is the current version of our api - some of the documentation needs updating and still mentions v2, but v3 is mostly backwards-compatible with it.)

Use our Wax connector to easily load these and other tiles from MapBox into various popular JavaScript mapping frameworks. Here is a complete example for ModestMaps that creates a map center on the Bean in downtown Chicago (using coordinates and zoom level I quickly grabbed using this online tool).

<!DOCTYPE HTML>
<html>
<head>
    <meta charset='utf-8' />
    <title>MapBox Light demo</title>
    <link rel='stylesheet' href='wax/theme/controls.css' />
    <script src='wax/ext/modestmaps.min.js'></script>
    <script src='wax/dist/wax.mm.min.js'></script>
</head>
<body>
    <div id='map' style='height:500px;'></div>
    <script>
        var mm = com.modestmaps;
        var url = 'http://api.tiles.mapbox.com/v3/mapbox.mapbox-light.jsonp';

        wax.tilejson(url, function(tilejson) {
        var m = new mm.Map('map', new wax.mm.connector(tilejson));

        m.setCenterZoom(new mm.Location(41.8827, -87.6233), 18);

        wax.mm.zoomer(m).appendTo(m.parent);
        wax.mm.attribution(m, tilejson).appendTo(m.parent);
        });
    </script>
</body>
</html>

See the full Wax documentation for more details and examples. Regardless of where or how you are implementing this stylesheet, remember to display proper attribution for OpenStreetMap as the data provider.

If you any other question or feedback, get in touch with us at support.mapbox.com.