Zoom is a fundamental design element for maps. The same cartography can show political borders at one zoom and detailed building shapes close up. With Mapbox Studio and Mapbox GL, we support zoom-oriented styling with ramps: style values that can change between zoom levels. Instead of using a constant style value, a ramp allows properties like color, width, and font to change as people interact with the map.

zoom-streets

Mapbox Studio exposes the full power of ramps in a visual interface. The zoom level is the X axis and the value is a gradient, line, or curve on the Y axis. A ramp is made up of stops, which are specific values at specific zoom levels. Visually, these look like dots on the curve or the gradient, and they represent value & zoom combinations. If a ramp has a stop at zoom 0 and width 0 and another at zoom 20 and width 10, then at every zoom level between 0 and 20 the width will be interpolated between 0 and 10.

Studio is designed to be helpful in every situation. If you accidentally enter the same zoom value twice, you’ll see inline error messages and Studio will wait until the error is corrected before saving the style. Stops also technically need to be ordered by zoom level - but if you put them in a different order (e.g. 0, 22, 1), Studio automatically sorts them correctly.

fill-levels

Clicking Add Stop adds a new point in the zoom range that can be customized with a different value. Clicking it again adds another value at the consecutive zoom.

Studio lets you focus on the myriad possibilities for zoom-level styling instead of worrying about code. We’re always iterating to make this as simple, expressive and hassle-free as possible.