Several months ago MapBox added a blog post to their site discussing vector tiles. As part of the post they had some fun examples including one based on comic books and one based on pirate treasure maps (created by AJ Ashton). Here are the thumbnails from that page. For other nice examples see the gallery.
I liked these so much that I included images of them in a talk I gave to the New York State Department of Health earlier this year on web mapping. At the time, though, these tile layers were not available for public use. With the release of MapBox’s new software MapBox Studio, though, it now looks like these great tile layers can be included in your next project.
I’m just getting started with MapBox Studio so I definitely can’t give authoritative instructions on using the software. But here are the steps I took to upload the style to my MapBox account and use the tile layers:
1) Use MapBox Studio to upload style
I opened MapBox Studio, clicked on Projects (bottom left), then on New Project and the Comic and Pirate tile layers were available styles. I chose one, clicked on Save as and then uploaded directly to my MapBox account from within MapBox Studio. (Note that it is possible you can use this style from within the online dashboard without uploading, but I couldn’t see how).
2) Refer to the style in your HTML/JS MapBox project
Include the style in your project. To see an example, you can simply copy the code from MapBox here. For simplicity I’m showing the code below:
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta charset=utf-8 /><br />
<title>A simple map</title><br />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><br />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.0/mapbox.js'></script><br />
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.0/mapbox.css' rel='stylesheet' /><br />
<style><br />
body { margin:0; padding:0; }<br />
#map { position:absolute; top:0; bottom:0; width:100%; }<br />
</style><br />
</head><br />
<body><br />
<div id='map'></div><br />
<script><br />
L.mapbox.accessToken = 'pk.eyJ1Ijoic3BhdGlhbCIsImEiOiJINEMxWmw4In0.MXOfvjXYb65iOfIAKcRLbA';<br />
var map = L.mapbox.map('map', 'YOUR_TILE_STYLE')<br />
.setView([40, -74.50], 9);<br />
</script><br />
</body><br />
</html>
Voila! Here is what the comic and pirate tile layers look like as active maps:
Hi,
thanks for the tutorial. But why are you saying ‘vector’ maps when the embed maps are using png tiles?
Very good point! The tiles delivered to the client in the non-GL approach from MapBox are raster tiles. The design and creation of the tilesets uses vector tiles — which is what I was referring to. To display the vector tiles from MapBox we’d need to use MapBox GL. If time permits I’ll do an update to this post to reflect this.