MapBox has developed an open source vector format to power the future of our web maps. Vector tiles rethink web maps from the ground up, providing a single efficient format to power raster tiles, interactive features, geojson streams, mobile renderers, and much more.
The MapBox team quietly started powering MapBox Streets, our worldwide base map, with vector tiles several months ago. Now with hundreds of millions of map views across thousands of subscribers, the stability and scalability wins are clear. We want to share our vision for where we are taking vector tiles and what this means for the future direction of MapBox.
Incredible styling
In addition to developing this new vector tile format, we have rebuilt our entire platform to have vector tiles at its core. TileMill, our open source design studio, is going to relaunch with vector tiles fully integrated to be a powerhouse tool for custom cartography. Design iterations can happen in seconds and be applied to a full global vector tileset without lengthy downloads, imports, or time spent tuning database queries. In short, anyone will be able to make a totally custom branded map, of the entire globe, that is lighting fast on every device. Removing traditional bottlenecks from the creative process has allowed our cartographer AJ Ashton to give us a glimpse of what's to come.
Watch AJ Ashton design a map in the new TileMill 2
One format
Our format defines a protobuf schema that can pack layers, geometries, and feature attributes from any datasource into individual vector tiles. Once converted, the original datasource—shapefile, geojson, postgis database—is no longer necessary. Paired with a renderer like the super fast Mapnik and a CartoCSS stylesheet, vector tiles can be rendered as images, UTFGrids, geojson, and more. And the possibilities are wide open for rendering directly on mobile devices or in the browser.
Star mapnik-vector-tile on GitHub
Perfect for OpenStreetMap
Vector tiles are designed to leverage the global scale of trillions of local details in OpenStreetMap. Additional OSM tags allow map labels to be switched between multiple languages on the fly. And vector tiles can easily handle the rapid rate of updates to OSM. Edits to the map show up on MapBox Streets and any custom styles within a matter of minutes.
Start editing OpenStreetMap in iDREXML could not parse this XML/HTML:
<div class='pad3 fillF' id='offline'>
<div class='copy'>
<iframe class="vine-embed" src="https://vine.co/v/b0DvTPnpPtw/embed/postcard" width="480" height="480" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
<h1 class='centered'>Big world, small footprint</h1>
<p>Our vector tile-powered MapBox Streets dataset is highly optimized, slim enough to fit the entire world onto a single USB stick. By packing detailed data into lower zoom levels, vector tiles allow the highest zoom levels to be rendered at a fraction of the storage cost of raster tiles. Vector tiles point toward a radically more custom mapping future for mobile and offline applications that can cache more efficiently and render indefinitely from the same slim dataset.</p>
</div>
</div>Get in touch
We're sprinting right now on the new TileMill 2, and aim to have this in your hands in just months. Our work is happening entirely in the open on GitHub. While we can't promise timely support until the first beta release, we also won't be discouraging lurkers.
Get in touch if you have a special use case for vector tiles—custom styles, offline or mobile maps, custom rendering, or more. We're working with a handful of select partners on advancing this exciting technology and you may be the next.
— May 13 2013REXML could not parse this XML/HTML:
<div class='cell12 clearfix fillE' id='outro'>
<div class='cell6 pad3'>
<h3>About Young Hahn</h3>
<div class='author-image' style='background-image:url(/img/team/young.thumb.jpg);'> </div>
<small>
<a href='/about/team/#young-hahn'>Young Hahn</a>
leads the MapBox engineering team with a breadth of experience building practical, functional, and beautiful applications.
</small>
<a href='https://twitter.com/younghahn' class='twitter-follow-button' data-show-count='false' data-show-screen-name='true' data-lang='en'>Follow @younghahn</a>
<script type='text/javascript'>
// Follow user
!function(d,s,id){
var js,
fjs=d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js=d.createElement(s);
js.id=id;js.src='//platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}(document,'script','twitter-wjs');
</script>
</div>
<div class='cell6 pad3'><div id='twitter-tweets' class='tweets centered clearfix'>
<script type='text/template' id='tweet-template'>
<% if (obj.id_str) { %>
<a class='tweet' target='_blank' href='http://twitter.com/<%=from_user%>/status/<%=id_str%>'>
<span class='mug' style='background-image:url(<%=profile_image_url%>)'></span>
<small><strong><%=from_user%>:</strong> <%=text%></small>
</a>
<% } else { %>
<a class='tweet' href="http://twitter.com/search?q=http://mapbox.com/blog/vector-tiles%20OR%20http://www.mapbox.com/blog/vector-tiles"></a>
<% } %>
</script>
</div> tweets mention this blog post.Tweet this article REXML could not parse this XML/HTML: </div>
REXML could not parse this XML/HTML: </div>