Introduction to Mapbox Studio
PLEASE interrupt if you have any questions!
While I'm talking, either log in
to your Mapbox account or sign up
for one at mapbox.com
Mapbox Studio is a modern design platform for managing your spatial data and creating custom map styles.
Mapbox Studio is now your command center for interacting with Mapbox.
It also contains a sexy new data editor with a visual interface that leverages GL technology to help you build beautiful, custom maps with custom data.
But to fully appreciate this new tool, we first have to go back in time.
Agenda for today:
- A brief history of web maps
- How GL works and why it's awesome
- Walk-through of Mapbox Studio UI
- Map-making time
A brief history of web maps.
Before modern interactive maps, what were the basic steps to make a digital map?
- Add data
- Style data at specific scale and extent
- Export to PDF/image
With static and print maps, there was one extent and one scale to style for.
This is not to say that print cartography is easy...
... but rather to say that it is straightforward.
But on an interactive map, there are multiple scales and extents to design for.
launched the first
online map service.
Their solution to the cartography problem was to create a bunch of static maps at pre-determined scales and extents.
Every "pan" of the map was really a fully new, pre-created image loading on the page.
In 2005, Google took this idea a step further when it launched Google Maps and introduced the world to map tiles.
Map tiles are 256x256 pixel PNG images that only load at the scale and extent of the map container.
This makes the map faster and more agile -- instead of loading the whole world or giant images, the page loads tiny images only in the places you're looking.
Tiling also introduced standardization to interactive maps, which facilitated a thriving ecosystem of mapping tools.
The standard includes:
- A preset list of map scales ("zoom levels")
- For each zoom level, a preset number of tiles it takes to cover the whole world
- For each tile at each zoom, a specific location the tile covers
This created an amazing, collaborative, open source mapping world that facilitated lots of interesting growth...
... including a little company called Mapbox
and a little tool called TileMill
was the first design tool from Mapbox
. It was for creating interactive
Thinking back, what were the three main steps to designing a print map?
- Add data
- Style data at specific scale and extent
- Export to PDF/image
For interactive maps, you want to do a lot of the same things, right?
You want to add data, style it, and export it.
The difference is you want to style for multiple scales and a global extent, and you want to export to map tiles.
- Add data
- Style data at pre-determined scales and a global extent
- Export to map tiles
Radical! But the magic of TileMill was all happening beneath the surface.
At its core, TileMill
was a visual interface
for interacting with a much more powerful
is the monster that eats data and stylesheets
and poops out map tiles
with the exact
right extents, at the exact
right zoom levels, stored in the exact
is magical. All hail Mapnik
In TileMill, users defined styles with a styling language called CartoCSS. In CartoCSS, you define how each data layer should be styled at each zoom level.
Would it blow your mind if I told you that CartoCSS was really just a pre-processor for Mapnik's XML styling specification?
So TileMill took your data and your CartoCSS style and fed them to Mapnik to create map tiles.
You could then add your map tiles to a map using Mapbox.js, OpenLayers, Leaflet, or one of many other web mapping libraries that facilitate interactions. The tiles were stored online and loaded in the browser on request.
So that was TileMill. And it worked really well for a long time.
But it had some limitations.
1. Image quality
3. Malleability and updates
What to do?!
In an ideal world, you could create map tiles on the fly based on desired image quality and styling rules instead of storing a bunch of similar but different tilesets.
Enter vector tiles and the Mapbox vector tile specification.
Vector tiles are similar to map tiles (the world, in a grid, created with Mapnik), but they contain vector data instead of images.
Vector tiles use a super compact file type called protocol buffers, or pbfs, to keep the data both small and fully intact.
Vector tiles added a new level of efficiency to the map tile creation process.
Vector tiles separate data storage from map rendering.
With the raster tile model, rendering was the core of the operation, as images were stored. With vector tiles, rendering only needs to happen at the very end of the process.
Mapbox Studio Classic
was released as a new
desktop design tool to replace
TileMill, focusing on this separated data/style paradigm
It has two parts: source mode and style mode.
is for converting
your vector data (GeoJSON, shapefiles, etc.) into vector tiles
is for creating stylesheets
based on those sources.
This makes the process for using Mapbox Studio Classic a little bit different than using TileMill:
- In Mapbox Studio Classic source mode, add your vector data
- Upload to Mapbox to convert the data to vector tiles
- Grab the ID of the newly-uploaded source and add it in Mapbox Studio Classic style mode
- Style that source data at pre-determined scales and a global extent with CartoCSS
- Upload style to Mapbox
It's okay. YOU GOT THIS.
When using TileMill, your output was a set of map tiles. What is the output from Mapbox Studio Classic?
A source and a style. No raster tiles are created at all...
... until you ask for them.
Mapbox stores your style and its associated vector tile dataset. When a web map is created using your style's ID and the browser requests tiles, the style and source are passed to Mapnik to render into map tiles ON THE FLY.
So this is the solution to the problems we outlined before, right?
Images generated on the fly mean no storage or malleability issues.
But... there are still limitations to this pattern.
Mapbox Studio Classic signaled a shift in the way sources and styles were managed on the server side...
... but the client-side behavior did not change: image tiles served to the browser in a grid, loaded when necessary at specific zoom levels.
The outputs of Mapbox Studio Classic are essentially basemaps with no truly interactive data.
To add interactive data, you need to add an overlay using your web mapping library and GeoJSON data, and there are limitations...
Unless you enjoy crashing browsers, of course!
Another bummer is the jumpyness when going bewteen zoom levels. And tile loading is fast, but not that fast.
What to do?!
We separated styles from sources when implementing vector tiles, so now the two are independent of each other.
Who says we need to keep using Mapnik to render image tiles? Why don't we just use a different renderer that better meets our mappy needs?
So we did. And we called it Mapbox GL.
[This is where we move on to the second part of our agenda.]
How GL works.
Mapbox GL is a way to render maps with vectors in the browser rather than as images on the server.
Up until now, all rendering has been happening server-side with Mapnik. Vector tiles are combined with CartoCSS styles, fed to Mapnik, and raster tiles are created and served to the browser.
With Mapbox GL, the rendering happens in your browser with the help of your device's graphics processing unit.
This makes map loading hella crazy stupid fast. It also means you can do cool stuff like rotating and tilting the map, smooth/infinite zooming, and more!
So in a practical sense, how does this work?
Because maps are being rendered in the browser (or on a device), we have to give some guidance on what to draw and how to draw it.
The stylesheet contains all the information needed to draw your map, including references to data, fonts, images, and, most importantly, styling rules.
These styling rules are defined in the spec as layers -- styled representations of data in your map.
So what does Mapbox Studio do? It is a visual interface for creating GL stylesheets.
Plus it's like, totally intuitive and pretty and easy to use.
Almost everything you do in Mapbox Studio relates directly to something in the Mapbox GL Style Specification -- especially creating and editing layers.
[Now we move onto part three!]
Walk-through of Mapbox Studio.
If you see this page, click Home
in the top right.
As I mentioned in the beginning, Mapbox Studio is a modern design platform for managing your spatial data and creating custom map styles.
First we'll create a new style, add some data, and make some edits to it. Then we'll explore the rest of the platform.
On the Home
page, look for the Styles
panel and click New style
You will be prompted to select a template
to start with. Click Basic
, then click Create
Welcome to the Mapbox Studio style editor
In the bottom right corner, you should see a blue
monster that's trying to say hello!
If you don't see that, click Help
in the top
right of the page and click where it says Intro
thing it shows us is the layers
pane. Each layer type
has different styling options
For any selected layer
you can both edit its style
and change the data
anywhere on the map to see which layers
are at that location.
applies to both geographic locations
and style layers
I want to mention a few other things before we get started.
Layers are drawn on the map from the bottom up. The ones at the top of the list are going to be on top of the others in the map.
You can create multiple layers from the same data.
maps (like the Basic
map we're staring with here) use Mapbox Streets vector tiles
. This dataset does not
have all data
at all zoom levels
There's a lot
of really cool
stuff you can do with Mapbox Studio
. Let's dive right in
! In the Layers panel
, Click on the water
Click the Color field and change the water to a nice light purple.
Now click the slider
next to the Color
field and click Enable styling by zoom level
This is where it starts to get fun
This panel creates a smooth transition
between colors as you zoom.
Pick a dark
color to fade to and adjust the zoom levels
slightly (from 5
Click on water in the layer panel to close the panel, then zoom in on the Great Lakes.
We can also do this with text. Open the place_label_city layer and click the Size field to see how it's currently set.
this field so instead of 16px
at zoom level 8
the ramp goes to 30px
at zoom level 12
Beautiful! This map is really coming along.
Let's save and poke around the rest of Mapbox Studio for a moment. In the top of the Layers panel, click the purple button that says Publish. Click Publish again at the prompt.
Click Okay, then click the Home button in the left sidebar. Your new style should be there!
Click on the title
of your map to see its style information page
This page shows the data that's being used in the map style as well as the layers that style that data. bridge is a good example of a single set of data that has multiple layers.
In the right sidebar, there is a link to Share this style. Copy the link and open it in your browser.
This is a good time to mention...
With the introduction of Mapbox GL
: Mapbox GL JS
Just like Leaflet and Mapbox.js know how to take map tiles and GeoJSON and draw them correctly, Mapbox GL JS knows how to take a stylesheet and draw it correctly.
Other than this share link, Mapbox GL JS and the Mapbox mobile SDKs are the only way to publish your map.
Okay, back to Mapbox Studio! Click Edit on the info page to go back to the style editor.
Now is the choose your own adventure part of the evening. What would you like to see?
What did we learn today?
We learned about how web maps came to be!
We learned about GL and how it works!
We learned how to use the Mapbox Studio interface!
We made our own map styles!
HOLY CARPS, Y'ALL! That's awesome!
You totally kicked butt today. Pat yourself on the back.
Keep playing! Keep making stuff! It just gets more fun!